how do i open a different lightbox for each item on a page?
hello.
on my contacts page i have lots of contacts each with there own map img.
at the moment not matter which map i click it opens the same lightbox. how do i tell it to open the correct lightbox?
- <div id="location">
<a href='#' class='basic' id='1'><img src="http://www.rickyspires.co.uk/wp-content/uploads/2013/03/google-map-icon-small.png" width="20" height="20"/>
<div id="lightbox" class='1'>
<div class='close'><a href="#">Close</a></div>
<h1>location 1</h1>
</div></div>
- <div id="location">
<a href='#' class='basic' id='2'><img src="http://www.rickyspires.co.uk/wp-content/uploads/2013/03/google-map-icon-small.png" width="20" height="20"/>
<div id="lightbox" class='2'>
<div class='close'><a href="#">Close</a></div>
<h1>location 2</h1>
</div></div>
- <div id="location">
<a href='#' class='basic' id='3'><img src="http://www.rickyspires.co.uk/wp-content/uploads/2013/03/google-map-icon-small.png" width="20" height="20"/>
<div id="lightbox" class='3'>
<div class='close'><a href="#">Close</a></div>
<h1>location 3</h1>
</div></div>
the light box is using
http://www.ericmmartin.com/projects/simplemodal/this is becuase i couldnt get google maps to show in ie8 but it works using his code ;)
this is the js i have
jQuery(function ($) {
- // Load dialog on click
$('#location .basic').click(function (e) {
$('#basic-modal-content').modal();
$('#basic-modal-content').css('display', 'block');
$('#simplemodal-container').css('display', 'block');
$('#simplemodal-overlay').css('display', 'block');
return false;
});
$('.close a').click(function(){
$('#basic-modal-content').css('display', 'none');
$('#simplemodal-container').css('display', 'none');
$('#simplemodal-overlay').css('display', 'none');
});
});