I played around with it, taking it step by step closer to my code
until i hit an issue, and narrowed it down to modal effects... below
is my change to full effects that i'm using for my project, ignore the
jQuery vs $, its my way of avoiding certain conflicts
when i remove all these effects from my code the previous/next work,
but i need the effects to remain.... any ideas on why they could be
causing an issue (timing?) or how to make it work?
jQuery('a.Foo').each(function()
{
jQuery(this).click(function()
{
jQuery('#modal_' + this.id).modal({
overlayClose:true,
onOpen: function (dialog) {
dialog.overlay.fadeIn(300);
dialog.container.fadeIn(100);
dialog.data.fadeIn(300);
},
onClose: function (dialog) {
dialog.data.fadeOut(300);
dialog.container.fadeOut(100);
dialog.overlay.fadeOut(300, function ()
{
jQuery.modal.close();
});
},
closeHTML:'<a href="#">Back</a>',
minHeight:540,
minWidth:940,
maxHeight:540,
maxWidth:940,
opacity:60
});
});
});
On Dec 31, 12:37 pm, brian <zijn.digi...@gmail.com> wrote:
> On Thu, Dec 31, 2009 at 2:13 AM, nevgenevich <nevgenev...@gmail.com> wrote:
>
> > 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)
>
> It works fine for me. Here's the full page I used to test:
>
> <!DOCTYPE html>
> <html>
> <head>
> <title></title>
> <link rel="Stylesheet"
> href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"; />
> <style>
> body { padding: 100px; }
> div.Bar { display: none; }
> </style>
> <script
> src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";></script>
> <script src="jquery.simplemodal-1.3.3.min.js"></script>
> <script>
> $(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));
> }
> });
>
> });
>
> </script>
> </head>
> <body>
>
> <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>
>
> </body>
> </html>
