creating a image viewer pop up with next and prev button

I am creating a image box. in the body the image thumbnails are appearing and on click them i wish to show the clicked image in pop up and also the next and 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 a image viewer box by clicking on image thumbnails the thumbnail image shows up enlarged in pop up centered image box and all the next images of the image box should be show up by clicking next and prev buttons and also i want suppose user have clicked on random image among of four so the image should be open in pop up which is clicked how i can do this ? And next prev images. please help me out for this and one more question i have like if i am using tabbed albums like i have four albums and each album is in tabbed structure and if i move to different tab album box for the same functionality so what code i have to add to define which album is currently using the image showing code

Answers


You can check this tutorial 1 , tutorial 2 on how to create a very simple lightbox if you don't want to use existing lightbox available online. But like matts answer, you can simple download any existing lightbox plugins, check the link below.

http://www.dreamcss.com/2009/03/31-mind-blowing-collection-of-jquery.html


most straight forward solutions use a image lightbox such as http://fancyapps.com/fancybox/

or do a google search for " image lightbox ".


Need Your Help

How to add cellspacing and cellpadding in HTML tables generated by xtable?

r xtable

I would like to add spacing or padding to a html table generated by xtable.

Retrieve all items from DynamoDB using query?

python boto amazon-dynamodb

I am trying to retrieve all items in a dynamodb table using a query. Below is my code: