Ads Top

Stylish jQuery Photo Gallery With Description Effect

Every time we  are  trying to  give  unique   tutorials with  easy  steps.Because,beginners can understand without  any doubts. So this is also  just widget. you  know how  easy to add it. Few  days  ago  i posted about Attractive jQuery photo galley  In  this   tutorial  im  gonna explain  how to  add   stylish  jQuery  photo  gallery  with  description effect.It  means  you  can  add s mall description according  to  your  image.  Description  also   included  animation.So it looks  more  attractive.Im using  Jquery and Css3  for  this  photo  gallery.Follow  these  step to  add to  your blog. Get all photo gallery.

Stylish+jQuery+Photo+Gallery+With+Description+Effect


Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {

//Speed of the slideshow
var speed = 5000;

//You have to specify width and height in #slider CSS properties
//After that, the following script will set the width and height accordingly
$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());

//Assign a timer, so it will run periodically
var run = setInterval('newsscoller(0)', speed);

$('#gallery li:first, #excerpt li:first').addClass('selected');

//Pause the slidershow with clearInterval
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});

//Continue the slideshow with setInterval
$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed);
return false;
});

//Next Slide by calling the function
$('#btn-next').click(function () {
newsscoller(0);
return false;
});

//Previous slide by passing prev=1
$('#btn-prev').click(function () {
newsscoller(1);
return false;
});

//Mouse over, pause it, on mouse out, resume the slider show
$('#slider').hover(

function() {
clearInterval(run);
},
function() {
run = setInterval('newsscoller(0)', speed); });});


function newsscoller(prev) {

//Get the current selected item (with selected class), if none was found, get the first item
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

//if prev is set to 1 (previous item)
if (prev) {

//Get previous sibling
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');

//if prev is set to 0 (next item)
} else {

//Get next sibling
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}

//clear the selected class
$('#excerpt li, #gallery li').removeClass('selected');

//reassign the selected class to current items
next_image.addClass('selected');
next_excerpt.addClass('selected');

//Scroll the items
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800); }

</script>
<style>

#slider {

/* You MUST specify the width and height */
width:660px;
height:275px;
position:relative;
overflow:hidden;
-moz-box-shadow: 0px 0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
}
#mask-gallery {
overflow:hidden;
}

#gallery {
list-style:none;
margin:0;
padding:0;
z-index:0;
width:900px;
overflow:hidden;
}
#gallery li {
float:left;
}
#mask-excerpt {
position:absolute;
top:0;
left:0;
z-index:500;
width:100px;
overflow:hidden;
}

#excerpt {
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;

list-style:none;
margin:0;
padding:0;

z-index:10;
position:absolute;
top:0;
left:0;

width:100px;
background-color:#000;
overflow:hidden;
font-family:arial;
font-size:14px;
color:#fff;
}

#excerpt li {
padding:5px;
}

.clear {
clear:both;
}
#btn-prev {
border-top: 1px solid #96d1f8;
background: #65a9d7;
padding: 4px 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 9px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
#btn-prev:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
#btn-prev:active {
border-top-color: #238acf;
background: #238acf;
}
#btn-next {
border-top: 1px solid #96d1f8;
background: #65a9d7;
padding: 4px 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 9px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
#btn-next:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
#btn-next:active {
border-top-color: #238acf;
background: #238acf;
}
</style>
<div id="debug"></div>
<div id="slider">

<div id="mask-gallery">
<ul id="gallery">
<li><img src="http://4.bp.blogspot.com/-j_6QOaTuLCQ/UUNGkGEcjdI/AAAAAAAAHOs/CANxlyJnVvE/s1600/btrix_image2" width="660" height="275" alt=""/></li>
<li><img src="http://2.bp.blogspot.com/-dp26Ub0qhB8/UUNGlARp7DI/AAAAAAAAHO0/xyXgXrOP48s/s1600/btrix_image1.jpg" width="660" height="275" alt=""/></li>
<li><img src="http://2.bp.blogspot.com/-8UESQ46gwQM/UUNGm0YBP8I/AAAAAAAAHO8/81cNif5NNbw/s1600/btrix_image3.jpg" width="660" height="275" alt=""/></li>
<li><img src="http://3.bp.blogspot.com/-bFgDRlKV2aI/UUNGo2-Q0EI/AAAAAAAAHPE/abTaAslSzgQ/s1600/btrix_image5.jpg" width="660" height="275" alt=""/></li>
<li><img src="http://1.bp.blogspot.com/-dTVXayv2h-4/UUNGo3RBAoI/AAAAAAAAHPM/WjZ_7b_GS84/s1600/btrix_image4.jpg" width="660" height="275" alt=""/></li>
</ul>
</div>

<div id="mask-excerpt">
<ul id="excerpt">
<li>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li>
<li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
<li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li>
<li>tristique senectus et netus et malesuada fames ac turpis egestas.</li>
<li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li> </ul>
</div>

</div>

<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-next">next</a>
</div>

<div class="clear"></div>


You can change photos by changing Image URLs
You can change image discription by changing red color text.


7. Now save your HTML/Javascript'.

    You are done...

No comments:

Categories

adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.