Question

I’m pretty new to JQuery so I made my own light box that comes up and an exit button, it works great. I was just wondering how to make it so I can have a Next and Previous button and it will view the next image or div with the proper class assigned to it. For example, My HTML:

<button id="button1">Click Here</button>

<div id="view" class="outter">
    <img src="http://go.iomega.com/static/img/x_button_close.png" class="exit_button" id="close_view" />
        <div class="inner">
            <h1>stuff inside of the first div</h1>
        </div>
    <button id="previous">Prev</button><button id="next">Next</button>
</div>

<div id="view" class="outter">
    <img src="images/closebox.png" class="exit_button" id="close_view" />
        <div class="inner">
            <h1>stuff inside of the second div</h1>
        </div>
</div>

MY CSS

.outter{
    display:none; 
    width:620px; 
    height:380px; 
    top:20%; 
    left:17.5%; 
    position:absolute;
    z-index:2; 
}
.inner{
    width:600px; 
    height:330px; 
    background-color:white; 
    border:1px solid #000; 
    -moz-box-shadow:0px 0px 10px #111; 
    -webkit-box-shadow:0px 0px 10px #111; 
    box-shadow:0px 0px 10px #111; 
    margin-top:15px;
    z-index:1; 
}
.exit_button{ 
    float:right;
    z-index:3;
}
​

And My JQuery

$(document).ready(function(){
        $('#button1').click(function(){ 
            $('#view').fadeIn(750);
        }); 
        $('#close_view').click(function(){ 
            $('#view').fadeOut();
        }); 
}); ​

Here is all of that in a JSFiddle
http://jsfiddle.net/9cU5C/29/

This all works fine but I’d like to be able to add a whole bunch of div’s with the class “outter” in there and have the next button flip to the next “outter” classed div in line and vise versa with the previous button. I hope I’m explaining this properly and don’t sound stupid, I’m pretty new to JQuery and I enjoy doing things like this myself to get better at it. I tryed to google the problem, and found couldn’t come up with anything that I could get to work.

Thanks a bunch guys!
-Mike

Answer 1

make use or .next(), .prev(), and .closest(). Also, set classes on your ‘next’ and ‘previous’ buttons.

pseudo:

$('.next').click(function() {
   $('.outter').hide();
   $(this).closest('outter').next('outter').show();
});

$('.previous').click(function() {
   $('.outter').hide();
   $(this).closest('outter').prev('outter').show();
});

The concept is to hide all the elements, then make the appropriate one visible.

After you’re done with your learning exercise, definitely check out the code for lightbox and see how it’s done. It’s always great to try first, and then find out the ‘best’ approach.