Re: [jQuery] Re: simplemodal next/back functionality
On Thu, Dec 31, 2009 at 2:13 AM, nevgenevich <nevgenevich@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>
posted by twitter @ 9:37 AM
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home