Given the following HTML: <ul> <li><a href="#" class="Foo" id="one">one</a></li> <li><a href="#" class="Foo" id="two">two</a></li> <li><a href="#" class="Foo" id="three">three</a></li> <li><a href="#" class="Foo" id="four">four</a></li> <li><a href="#" class="Foo" id="five">five</a></li> </ul> <div class="Bar" id="modal_one">Modal one</div> <div class="Bar" id="modal_two">Modal two</div> <div class="Bar" id="modal_three">Modal three</div> <div class="Bar" id="modal_four">Modal four</div> <div class="Bar" id="modal_five">Modal five</div>
$(function() { $('a.Foo').each(function() { $(this).click(function() { $('#modal_' + this.id).modal({overlayClose:true}); }); }); var num_divs = $('div.Bar').length; $('div.Bar').each(function(i) { /* if there is a previous div add a link to it */ if (i > 0) { /* get the ID for previous div */ var prev_id = $(this).prev('.Bar').attr('id'); /* add the link with click event */ $('<a href="#" class="Prev">previous</a>') .click(function() { $.modal.close(); $('#' + prev_id).modal({overlayClose:true}); }) .appendTo($(this)); } /* if there is a next div add a link to it */ if (i < num_divs - 1) { /* get the ID for next div */ var next_id = $(this).next('.Bar').attr('id'); /* add the link with click event */ $('<a href="#" class="Next">next</a>') .click(function() { $.modal.close(); $('#' + next_id).modal({overlayClose:true}); }) .appendTo($(this)); } }); }); You'll need to style the .Prev & .Next links somehow; this just appends them. You could also add a container div to hold the links inside each of the divs before the two if statements. That might help with styling them. On Wed, Dec 30, 2009 at 4:12 AM, nevgenevich <nevgenev...@gmail.com> wrote: > i'm using simplemodal library to show a collection of items, each of > which is some html content... however, all of these are of the same > structure and are related, so i'm trying to find a way to implement > back/next links to save users an extra click (to close the current, > then open next, and wait for the animations to happen for half a > second) to view the next in the series and to give an easy way to go > through all the items (kinda like lightbox allows you to easily go > though all the images in a set; thats essentially the behavior i'm > looking for) > > first i tried opening a modal from within a modal, but that doesnt > work. next i'm trying to close the modal from within the modal AND > then programmatically open the next one (assuming that its somewhat > trivial to 'know' which one needs to be opened for any given link) > > so say i have 5 items, and i've opened the 2nd, it should have a > previous link to go to the 1st and a next link to go to the 3rd... but > how can i make these links actually function? is this something that > can be achieved with some tricky coding or does the actual plugin/ > framework need changes to enable it to 'see' sets of items like > lightbox? any ideas are appreciated! :) >