mat3000000 Posted August 27, 2011 Share Posted August 27, 2011 This question is PHP and javascript/jQuery so I wasn't sure where to post it, but anyway... Here is the code I am using so far. Currently it just displays a larger version of the image in a new window. I would like a lighbox instead. I have tried this with "FancyBox" but couldn't get it to work on all the images, just the first one. Any suggestions? <?php //GET PRODUCT VAR etc. ^^ $directory = "Images/items/$product/"; //get all image files with a .jpg extension. $images = glob($directory . "*.jpg"); $imgone = $images[0]; $gallery = ''; foreach($images as $image) { $tn = explode("/", $image); $tnname = $tn[3]; $gallery .= '<a href="#" rel="'.$image.'" class="image" title="Images/items/'.$product.'/large/'.$tnname.'" alt="'.$product.'"><img src="Images/items/'.$product.'/thumbs/'.$tnname.'" class="thumb" border="1" style="margin-bottom:7px;"/></a> '; } if(is_dir("Images/items/".$product)){ $gallery .= "<div id='image' class='bigimg' align='left'>"; $gallery .= '<a href="largeimg.php?id='.$product.'&i=Images/items/'.$product.'/large/0main_img.jpg" target="_new"> <img src="Images/items/'.$product.'/0main_img.jpg" border="0" alt='.$name.'/> <span class="more"><img src="Images/zoom.png" /></span></a></div>'; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><?php echo $name; ?></title> <script type="text/javascript" src="js/ddsmoothmenu.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <link href="CSS/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="CSS/ddsmoothmenu.css" /> </head> <body> <div class="hidden"> <script type="text/javascript"> $(function() { $(".image").click(function() { var image = $(this).attr("rel"); var large = $(this).attr("title"); var product = $(this).attr("alt"); $('#image').hide(); $('#image').fadeIn('slow'); $('#image').html('<a href="largeimg.php?id='+ product +'&i=' + large + '" target="_new"><img src="' + image + '"/><span class="more"><img src="Images/zoom.png" /></span></a>'); return false; }); }); </script> Link to comment https://forums.phpfreaks.com/topic/245830-php-generated-gallery-implementing-lightbox/ Share on other sites More sharing options...
mat3000000 Posted August 27, 2011 Author Share Posted August 27, 2011 Anyone? Link to comment https://forums.phpfreaks.com/topic/245830-php-generated-gallery-implementing-lightbox/#findComment-1262681 Share on other sites More sharing options...
jcbones Posted August 27, 2011 Share Posted August 27, 2011 According to Lightbox's tutorial, you need to point the `rel` attribute at lightbox. <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> Link to comment https://forums.phpfreaks.com/topic/245830-php-generated-gallery-implementing-lightbox/#findComment-1262683 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.