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 <[email protected]> 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! :)
>
