Sunday, 15 September 2013

Jquery dialog boxes for more than one images using php while

Jquery dialog boxes for more than one images using php while

I have make an image list of ten thumbnails using php while and when user
click on them takes a dialog box with the original image in size. My
problem is that only first picture's thumbnail gives dialog box... When
user click on the rest thumbnails, just get nothing! I am sure that
something is wrong with jquery code but I can't imagine what! Any idea?
My PHP code:
<?php $count=1; while ($count <= 10){
$image_url = $variable->{'photo'.$count}; ?>
<!-- 01. PHOTO VIEWER -->
<div id="viewer_img">
<img src="<?php echo $image_url; ?>" alt="IMAGE <?php echo $count; ?>" />
</div>
<!-- 01. END -->
<!-- 02. PHOTO OPENER -->
<div id="opener_img">&nbsp;</div>
<!-- 02. END -->
<?php $A1++; }?>
My jQuery code:
var $JQ_ = jQuery.noConflict();
$JQ_(function(){
$JQ_('[id^="viewer"]').dialog({autoOpen:false,
draggable:false,
resizable:false,
modal:true,
position:['center',10],
width:'590',
height:'370',
show:{effect:"fade", duration:250},
hide:{effect:"fade", duration:250}});
$JQ_("#opener_img").click(function(){$JQ_("#viewer_img").dialog("open");});
});

No comments:

Post a Comment