I am creating an image thumbnail slider, As I click on the thumbnail Image a pop-up box with larger Image will be open. Here I need to add the next and prev button to the larger image.
Here it is what I practiced:
HTML
<div id="wrapper">
<div id="content">
<div id="content_left">
</div>
<ul id="thumb_holder">
<li><a href="javascript:void(0);"><img src="img/img1_thumb.jpg" alt="motherly" /> </a></li>
<li><a href="javascript:void(0);"><img src="img/img2_thumb.jpg" alt="xo" /> </a></li>
<li><a href="javascript:void(0);"><img src="img/img3_thumb.jpg" alt="keep your eyes open" /> </a></li>
<li><a href="javascript:void(0);"><img src="img/img4_thumb.jpg" alt="bacon bits" /> </a></li>
<li><a href="javascript:void(0);"><img src="img/img5_thumb.jpg" alt="nature sent packing" /> </a></li>
<li><a href="javascript:void(0);"><img src="img/img6_thumb.jpg" alt="snow man" /> </a></li>
</ul>
</div>
<div id="large_image_holder">
<ul id="large_images">
<li><img src="img/img1.jpg" alt="motherly" /></li>
<li><img src="img/img2.jpg" alt="xo" /></li>
<li><img src="img/img3.jpg" alt="keep your eyes open" /></li>
<li><img src="img/img4.jpg" alt="bacon bits" /></li>
<li><img src="img/img5.jpg" alt="nature sent packing" /></li>
<li><img src="img/img6.jpg" alt="snow man" /></li>
</ul>
</div>
</div>
</div>
Jquery
$(document).ready (function(){
$("#large_images li").each(function(index, element){$(element).attr("class", 'hide');});
$("#large_images li").each(function(index, element){$(element).attr("id", 'img'+index);});
$("#thumb_holder li a").each(function(index, element){$(element).attr("rel", 'img'+index);});
var mainImg ='img0';
var current = 'img0';
$('#img0').css('display', 'inline');
$('#img0').addClass('current');
$('#thumb_holder li a').click (function(){
mainImg = $(this).attr('rel');
if(mainImg != current){
$('.current').fadeOut('slow');
$('#'+mainImg).fadeIn('slow', function(){
$(this).addClass('current');
current = mainImg;
});
}
});
});
<div id="picture">
<a id="prev" class="nav"> Next</a>
<a id="next" class="nav"> Prev</a>
</div>
And the CSS
a.nav{
position:absolute;
top:10px;
cursor:pointer;
}
#picture a#prev{
color:red;
left:10px;
/*background: add images for nav buttons if needed*/
}
#picture a#next{
color:blue;
right:10px;
}
#picture{
position:relative;
}
And for the click handler..
$('#picture').on('click', '.nav', function(){
alert(this.id); //Do what you do in $('#thumb_holder li a').click..
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.