jquery - creating a image viewer pop up with next and prev button -
i creating image box. in body image thumbnails appearing , on click them wish show clicked image in pop , next , prev buttons
<html> <head> <style> .image_box{height:600px; width: 1000px;} .image_1{height: 100px; width: 100px; float: left; margin: 10px 0 0 10px;} .my_popup{top:0; left:0; right:0; bottom: 0; background: rgba(####); position: absolute;} .box_pop_up{float: left; margin-left: 20px;} </style> <script> function hidepopup(){ $('.my_popup').hide(); } function showpopup(){ $('.my_popup').show(); } $(function(){ $('.image_1').on('click', function({ showpopup(); }); $('.my_popup').on('click', function({ hidepopup(); }); }); </script> </head> <body> <div class="image_box"> <div class="image_1"><img src="......" /></div> <div class="image_1"><img src="......" /></div> <div class="image_1"><img src="......" /></div> <div class="image_1"><img src="......" /></div> </div> <div class="my_popup"> <div class="left_button_box box_pop_up"><img src="prev.png"></div> <div class="center_image_box box_pop_up"></div> <div class="right_button_box box_pop_up"><img src="next.png"></div> </div> </body> </html> so i've created image viewer box clicking on image thumbnails thumbnail image shows enlarged in pop centered image box , next images of image box should show clicking next , prev buttons , want suppose user have clicked on random image among of 4 image should open in pop clicked how can ? , next prev images. please me out , 1 more question have if using tabbed albums have 4 albums , each album in tabbed structure , if move different tab album box same functionality code have add define album using image showing code
most straight forward solutions use image lightbox such :
http://fancyapps.com/fancybox/ or google search " image lightbox ".
Comments
Post a Comment