Jquery Thumbnail Image with Heading and Caption - Hubuhs. Living and Sharing

Hubuhs. Living and Sharing

Hubuhs is spot for living, blogger, tech, sport, travel, auto and food

Let's review a topic about how to create a jquery thumbnail image with heading and caption. Like this below : Click Here to See the E... nopict

Jquery Thumbnail Image with Heading and Caption

Let's review a topic about how to create a jquery thumbnail image with heading and caption.

Like this below :
Click Here to See the Example


How to create a jquery thumbnail image with heading and caption ?

First Step

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below:

</head>

you can use (Ctrl+F) to find easily

3.Right Before </head> place code of HTML below :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>$(document).ready(function () {

// transition effect
style = 'easeOutQuart';

// if the mouse hover the image
$('.photo').hover(
function() {
//display heading and caption
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
},

function() {
//hide heading and caption
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
}
);

});</script>


4. Find code of HTML below :

]]></b:skin>

you can use (Ctrl+F) to find easily

5. Right Before ]]></b:skin> place code of HTML below :

<!--Jquery-Thumbnail-BEGIN-->
.photo {
/* relative position, so that objects in it can be positioned inside this container */
position:relative;
font-family:arial;
/* hide those extra height that goes beyong the size of this container */
overflow:hidden;
border:5px solid #000;
width:350px;
height:186px;
}
.photo .heading, .photo .caption {
/* position inside the container */
position:absolute;
background:#000;
height:50px;
width:350px;
/* transparency for different browsers */
/* i have shared this in my CSS tips post too */
opacity:0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;

}
.photo .heading {
/* hide it with negative value */
/* it's the height of heading class */
top:-50px;
}

.photo .caption {
/* hide it with negative value */
/* it's the height of bottom class */
bottom:-50px;
}

/* styling of the classes*/
.photo .heading span {

color:#26c3e5;
top:-50px;
font-weight:bold;
display:block;
padding:5px 0 0 10px;
}
.photo .caption span{
color:#999;
font-size:12px;
display:block;
padding:5px 10px 0 10px;
}
<!--Jquery-Thumbnail-END-http://www.hubuhs.com-->


6. Click Save Template.

Second Step

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript :

<div class="photo">
<div class="heading"><span>TutorialWebForBlogger</span></div>
<img src="http://www.cmsnl.com/news/img/fuel_station_gas_nozzle.jpg" width="340px" height="175" alt="" />
<div class="caption"><span>This is Example of Jquery Thumbnail Image with Heading and Caption</span></div>
</div>


NOTES :

You can change :
  • TutorialWebForBlogger
  • http://www.cmsnl.com/news/img/fuel_station_gas_nozzle.jpg
  • width="340px"
  • height="175"
  • This is Example of Jquery Thumbnail Image with Heading and Caption.

4. Click Save and Done.

Now, you've already created jquery thumbnail image with heading and caption on your blog.
↩ Next Back to Top Prev ↪