Here, is my pagination view like in blow image :
But, I want my pagination like below :
Here, Is my html stucture :
<div class="pagination">
<span class="label-pagination">Showing 1 to10 of 1147 entries </span>
<b>1</b>
2
3
›
»
</div>
css is :
.pagination {
width: 100%;
display: inline-block;
}
.pagination a{
border: 1px solid #FFFFFF;
transition: background-color .3s;
float: right;
text-decoration: none;
padding: 8px 16px;
color: #fff;
}
.page-display {
float: right;
}
.pagination b {
border: 1px solid #FFFFFF;
transition: background-color .3s;
float: right;
text-decoration: none;
padding: 8px 16px;
color: #fff;
background: #999999;
}
.pagination > a:first-child {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
}
.pagination > a:last-child {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
}
.pagination .label-pagination {
float: left;
}
.pagination a:hover {
background: #999999;
}
Also I want my first and last pagination in border-radius, How do I do that?
You can do it like this.
Hope it will helps you.
.page-display {
float: right;
}
.pagination b {
border: 1px solid #999999;
transition: background-color .3s;
text-decoration: none;
padding: 8px 16px;
color: #fff;
background: #999999;
float: left;
}
.pagination a:first-child {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
}
.pagination a:last-child {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
}
.pagination .label-pagination {
float: left;
}
.pagination a:hover {
background: #999999;
}
.pagination {
display: inline-block;
width: 100%;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
.pagination-btns {
float: right;
}
<div class="pagination">
<span class="label-pagination">Showing 1 to10 of 1147 entries </span>
<span class="pagination-btns">
<b>1</b>
2
3
›
»
</span>
</div>
Using fullPage.js (a jQuery scrolling menu), I have the following situation:
I have an unordered list - the source of which is an SQL database (using PHP to echo out).
There are only two items per page being echoed out.
At the top of the page, I have a simple Menu:
First Item
Second Item.
I want to link to the first and second items in the list.
Before the PHP, I have the following:
<a name="theList">
I have to set up .. but how do I target the different children within the list?
Baffling me -- if anyone could help, I'd very very thankful!
The correct way to use fullPage.js should be:
1 .Have a menu with data-menuanchor:
<ul id="menu">
<li data-menuanchor="theList1">First slide</li>
<li data-menuanchor="theList2">Second slide</li>
<li data-menuanchor="theList3">Third slide</li>
<li data-menuanchor="theList4">Fourth slide</li>
</ul>
2 .config with js: anchors: ['theList1', 'theList2', 'theList3', 'theList4'],
3 .add CSS rule to style
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
anchors: ['theList1', 'theList2', 'theList3', 'theList4'],
menu: '#menu',
slidesNavigation: true
});
#CHARSET "ISO-8859-1";
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
a{
text-decoration:none;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
/* Custom CSS
* --------------------------------------- */
body{
font-family: arial,helvetica;
color: #333;
color: rgba(0,0,0,0.5);
}
.wrap{
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
}
h1{
font-size: 6em;
}
p{
font-size: 2em;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.section{
text-align:center;
}
#menu li {
display:inline-block;
margin: 10px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
#menu li a{
text-decoration:none;
color: #000;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #fff;
}
#menu{
position:fixed;
top:0;
left:0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin:0;
}
.twitter-share-button{
position: fixed;
z-index: 99;
right: 149px;
top: 9px;
}
#download{
margin: 10px 0 0 0;
padding: 15px 10px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear,0 0,0 100%,from( #5bc0de),to( #2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(top, #5bc0de, #2f96b4);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
vertical-align: middle;
cursor: pointer;
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
#download a{
text-decoration:none;
color:#fff;
}
#download:hover{
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: #2F96B4;
background-position: 0 -15px;
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-ms-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
#infoMenu{
height: 20px;
color: #f2f2f2;
position:fixed;
z-index:70;
bottom:0;
width:100%;
text-align:right;
font-size:0.9em;
padding:8px 0 8px 0;
}
#infoMenu ul{
padding: 0 40px;
}
#infoMenu li a{
display: block;
margin: 0 22px 0 0;
color: #333;
}
#infoMenu li a:hover{
text-decoration:underline;
}
#infoMenu li{
display:inline-block;
position:relative;
}
#examplesList{
display:none;
background: #282828;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 20px;
float: left;
position: absolute;
bottom: 29px;
right: 0;
width:638px;
text-align:left;
}
#examplesList ul{
padding:0;
}
#examplesList ul li{
display:block;
margin: 5px 0;
}
#examplesList ul li a{
color: #BDBDBD;
margin:0;
}
#examplesList ul li a:hover{
color: #f2f2f2;
}
#examplesList .column{
float: left;
margin: 0 20px 0 0;
}
#examplesList h3{
color: #f2f2f2;
font-size: 1.2em;
margin: 0 0 15px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
padding: 0 0 5px 0;
}
/* Demos Menu
* --------------------------------------- */
#demosMenu{
position:fixed;
bottom: 10px;
right:10px;
z-index: 999;
}
<link href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<ul id="menu">
<li data-menuanchor="theList1">First slide</li>
<li data-menuanchor="theList2">Second slide</li>
<li data-menuanchor="theList3">Third slide</li>
<li data-menuanchor="theList4">Fourth slide</li>
</ul>
<div id="fullpage">
<div class="section" id="section0">One</div>
<div class="section" id="section1">
<div class="slide">Two 1</div>
<div class="slide">Two 2</div>
</div>
<div class="section" id="section2">Three</div>
<div class="section" id="section3">Four</div>
</div>
I'm having a problem with my CSS style sheet. I try inputting the values to the DIV CLASSES, but there is no effect. The style sheet worked fine on my other HTML website, but I'm using a common header and footer via PHP on this website and it seems like it's interfering with the CSS for some reason. I don't know if my coding has any fallacies in it, but from what I can see everything looks fine:
CSS STYLE SHEET
body {
background-color: #000;
font-family: Arial, Verdana;
color: #fff;
}
a:link {
color: #ff0;
text-decoration: none;
}
a:visited {
color: #ff0;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: none;
}
a:active {
color: #000f;
text-decoration: none;
}
p {
text-align: justify;
font-size: 14px;
}
.container {
border: 1px solid #fff;
width: 820px;
height: 1350px;
padding: 10px;
}
.header {
background-image: url("/Images/CSS/logo.jpg");
background-position: center;
background-size: cover;
height: 20%;
width: 100%;
}
.logo {
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: -o-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
border: 0px solid #fff;
height: 90%;
width: 100%;
}
.logo h1 {
margin: 15px;
color: #ffa500;
float: right;
position: relative;
bottom: -160;
}
.logo p {
font-size: 12px;
margin: 15px;
color: #ffa500;
float: left;
position: relative;
bottom: -175;
}
.userbar {
width: 100%;
height: 10%;
background-color: #000;
border: 1px solid #fff;
padding: 5px;
.body {
border: 0px solid #fff;
width: 100%;
height: 70%;
}
.left {
border: 1px solid #fff;
float: left;
width: 250px;
height: 100%;
}
.right {
border: 0px solid #fff;
float: right;
width: 550px;
height: 100%;
}
.nav {
width: 100%;
border: 1px solid #fff;
margin-top: 15px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style-position: none;
list-style: none;
}
.nav li {
width: 85%;
margin: 15px;
color: #fff;
border-bottom: 1px dotted #fff;
}
.side {
margin-top: 25px;
color: #fff;
width: 100%;
border: 1px solid #fff;
}
.content {
width: 100%;
}
.content p {
padding: 10px;
color: #fff;
text-align: justify;
border-style: solid;
border-width: 0px;
}
.footer {
height: 10%;
width: 100%;
border: 1px solid #fff;
}
.footer p {
padding: 5px;
color: #fff;
text-align: center;
}
.pic {
padding: 10px;
margin: 10px;
}
.pic p {
width: 430px;
text-align: center;
font-size: 9px;
}
.pic1 {
float: left;
padding: 10px;
margin: 10px;
border: 1px solid #fff;
}
.pic1 p {
width: 170px;
text-align: center;
font-size: 9px;
}
.pic2 {
float: right;
margin: 10px;
padding: 10px;
border: 1px solid #fff;
}
.pic2 p {
width: 170px;
text-align: center;
font-size: 9px;
}
Index Page
Note that the Index page itself is not html. It's a PHP file and I'm using separate PHP files for the header and footer. This is just the page source to let you see the layout of my website.
<html>
<head>
<title></title>
<link rel ="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
</div>
<div class="userbar">
</div>
</div>
<div class="body">
<div class="left">
<div class="nav">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
</ul>
</div>
<div class="side">
<h3 align="center">News</h3>
</div>
</div>
<div class="right">
<div class="content"> </div><!----content----!>
</div><!----right----!>
<div class="footer">
</div>
</div><!----container----!>
</body>
</html>
I am developing a site using a dynamic PHP header and seem to have gotten that part working. My issues came when trying to put the remaining content in the container div along with the header div. All other content is ignored and gets pushed to the left and down below the container. I want it to be INSIDE the container and center on the page like the header does.
Here is where I am with the site:
http://maniandcompany.com/test/test/Print.php
I have tried several things including overflow:hidden; to no avail.
Here is the HTML Page
<div id="container">
<div id="header">
<?php include 'header.php'; ?>
</div>
<div id="body">
<div class="text">
<h1>Title H1</h1>
<h3>H3 Copy</h3>
<h2>H2 Title</h2>
<p>body copy p</p>
<span class="more_pictures">more images:</span>
</div>
<div class="main_image"><img src="images/Corporate_Id_main1.jpg" />
</div>
</div>
<div style="clear: both;"></div>
</div>
Here is the CSS
/*Container*/
#container {
width:790px;
margin:auto;
overflow:hidden;
}
/*Body*/
#body {
width:790px;
margin-top:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #484941;
overflow:hidden;
}
.main_image {
float:right;
width:527px;
height:350px;
margin-left:3px;
}
.text {
float:left;
font-family:Georgia, "Times New Roman", Times, serif;
width: 220px;
min-height: 350px;
margin-left:20px;
margin-right:20px;
}
.text h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color: #666;
text-transform: uppercase;
}
.text h2 {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color: #F60;
}
.text h3 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
font-style:italic;
color: #CCC;
padding-bottom: 20px;
}
.text p {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color: #999;
padding-bottom:10px;
}
.text .more_pictures {
font-size:9px;
font-style:italic;
color: #999;
}
/*header*/
#header {
width:790px;
height:140px;
}
#head {
width:790px;
}
/*logo*/
#logo {
float:left;
width: 260px;
height: 100px;
}
/*main navigation*/
#nav_main {
float:left;
font-size: 12px;
color: #000;
font-family: Georgia, "Times New Roman", Times, serif;
text-decoration: none;
font-style: italic;
width:240px;
height:20px;
text-align:center;
margin-left:20px;
margin-top:110px;
position:absolute;
z-index:2;
}
#nav_main .current {
float:left;
padding-right: 10px;
color: #F60;
text-decoration: none;
}
#nav_main .current a:link {
color: #F60;
text-decoration: none;
}
#nav_main .current a:visited, a:hover, a:active {
color: #F60;
text-decoration: none;
}
#nav_main .inactive {
padding-right: 10px;
float:left;
color: #000;
text-decoration: none;
}
#nav_main .inactive a:link{
color: #000;
text-decoration: none;
}
#nav_main .inactive a:visited {
color: #000;
text-decoration: none;
}
#nav_main .inactive a:hover, a:active {
color: #F60;
text-decoration: none;
}
/*NAV STYLES*/
#nav {
float:right;
height: 100px; /*height of our content box*/
width: 527; /*width of our content box*/
margin-left:3px;
}
#nav #greybox {
height: 20px;
width: 527px;
background: #CCC;
background-color: #ccc;
margin-bottom:5px;
}
#nav #greybox2 {
height: 20px;
width: 527px;
background: #CCC;
background-color: #ccc;
margin-top: 60px;
}
/*Thumbstrip*/
#nav #thumbStrip {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color: #F60;
-webkit-backface-visibility: hidden;
float: left;
height: 70px;
width: 527px;
margin-bottom:5px;
}
#nav #thumbStrip .thumb {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
margin-left: 3px;
-moz-box-shadow: 0px 0px 0px #FFF;
-webkit-box-shadow: 0px 0px 0px #FFF;
box-shadow: 0px 0px 0px #FFF;
opacity:0.4;
filter:alpha(opacity=40);
}
#nav #thumbStrip .thumb:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumb .first {
margin-left: 0px;
}
#nav #thumbStrip .thumb p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumb img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
#nav #thumbStrip a:link, .thumbStrip a:visited {
font-size: 0.8em;
color: #F60;
}
#nav #thumbStrip a:hover, #thumbStrip a:active {
border: none;
color: #F60;
}
/*Thumbstrip First*/
#nav #thumbStrip .thumbfirst {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
margin-left: 0px;
-moz-box-shadow: 0px 0px 0px #FFF;
-webkit-box-shadow: 0px 0px 0px #FFF;
box-shadow: 0px 0px 0px #FFF;
opacity:0.4;
filter:alpha(opacity=40);
}
#nav #thumbStrip .thumbfirst:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbfirst p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbfirst img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
/*thumb active first*/
#nav #thumbStrip .thumbActiveFirst {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
color: #F60;
-moz-box-shadow: 0px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 3px #FFF;
box-shadow: 0px 1px 3px #FFF;
opacity:1.0;
filter:alpha(opacity=100);
}
#nav #thumbStrip .thumbActiveFirst:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbActiveFirst p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbActiveFirst img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
/*thumb active*/
#nav #thumbStrip .thumbActive {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
color: #F60;
margin-left: 3px;
-moz-box-shadow: 0px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 3px #FFF;
box-shadow: 0px 1px 3px #FFF;
opacity:1.0;
filter:alpha(opacity=100);
}
#nav #thumbStrip .thumbActive:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbActive p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbActive img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
#nav #thumbStrip a:link, #content .thumbStrip a:visited {
font-size: 0.8em;
color: #F60;
}
#nav #thumbStrip a:hover, #thumbStrip a:active {
border: none;
color: #fff;
}
#nav #thumbStrip .thumb .first {
margin-left: 0px;
}
Thanks in advance for your help.
line 119 on the source page has a div closing tag that is ending you 'body' div before your 'clear' div.
<div class="main_image"><img src="images/Corporate_Id_main1.jpg" />
</div>
</div> <-- erase this closing tag.
<div style="clear: both;"></div>
</div>
Not to mention you have 2 sets of opening and closing head and body tags. im not sure if you're including a php file with those and then repeating them in your other pages or what, but there are a lot of stray tags on that page.
I got this code which address my "Get the 1st image of the post then display it" issue.
<?php echo get_first_image() ?>
My problem is, how to i make it to automatically adjust its size (lets say 50x50) then display it.
What i want to to do is simply get the image from my published post, resize it (50x50 and 250x250) then display it. It will be use in a slider/enhance version of recent post.
thank you very much!
HERES THE CODE of the SLIDER/Recent post
$(".main_image .desc").show();
$(".main_image .block").animate({ opacity: 0.85 }, 1 );
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
//Set Variables
var imgAlt = $(this).find('img').attr("alt");
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
if ($(this).is(".active")) {
return false;
} else {
//Animate the Description
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
//Show active list-item
$(".image_thumb ul li").removeClass('active');
$(this).addClass('active');
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$("a.collapse").click(function(){
$(".main_banner .block").slideToggle();
$("a.collapse").toggleClass("show");
});
<div class="main_image">
<img src="banner1.jpg" alt="" />
<div class="desc">
Close Me!
<div class="block">
<h2>Title</h2>
<small>Date</small>
<p>Copy</p>
</div>
</div>
</div>
<div class="image_thumb">
<ul>
<li>
<img src="image\banner1_thumb.jpg" alt="image1234" />
<div class="block">
<h2>Title</h2>
<small>Date</small>
<p>Copy</p>
</div>
</li>
</ul>
</div>
.main_image {
width: 598px;
height: 456px;
float: left;
background: #333;
position: relative;
overflow: hidden;
color: #fff;
}
.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px;
padding: 10px;
}
.main_image p {
font-size: 1.2em;
line-height: 1.6em;
padding: 10px;
margin: 0;
}
.block small {
font-size: 1em;
padding: 0 0 0 20px;
background: url(iconcalendarKO.gif) no-repeat 0 center;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: none;
.main_image .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
}
.main_image a.collapse {
background: url(btn_collapse.gif) no-repeat left top;
height: 27px;
width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px;
right: 20px;
}
.main_image a.show {background-position: left bottom;}image_thumb section CSS
.image_thumb {
float: left;
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.image_thumb img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.image_thumb ul {
margin: 0;
padding: 0;
list-style: none;
}
.image_thumb ul li{
margin: 0;
padding: 12px 10px;
background: #f0f0f0 url(nav_a.gif) repeat-x;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
.image_thumb {
float: left;
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.image_thumb img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.image_thumb ul {
margin: 0;
padding: 0;
list-style: none;
}
.image_thumb ul li{
margin: 0;
padding: 12px 10px;
background: #f0f0f0 url(nav123_a.gif) repeat-x;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
background: #ddd;
cursor: pointer;
}
.image_thumb ul li.active {
background: #fff;
cursor: default;
}
html .image_thumb ul li h2 {
font-size: 1.5em;
margin: 5px 0;
padding: 0;
}
.image_thumb ul li .block {
float: left;
margin-left: 10px;
padding: 0;
width: 170px;
}
.image_thumb ul li p{display: none;}
isnt get_the_post_thumbnail enough?
Just call it twice, with different sizes