Thanks a lot for a full example so quickly! styling isnt a problem at
all, that i can hack together somehow... however, your code doesnt
fully work (i've only tried the previous link part thus far, but...)
it generates the link properly, when clicking on it: it closes the
modal but does nothing else. i can verify with a console.log that it
gets to after the call to open the previous modal, but it doesnt open
anything..... checked to make sure it was generating the modal link
correctly too (ie calling the correct id)
any suggestions?
On Dec 30, 1:42 pm, brian <zijn.digi...@gmail.com> wrote:
> 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! :)- Hide quoted text -
>
> - Show quoted text -
