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> Quote Link to comment Share on other sites More sharing options...
mat3000000 Posted August 27, 2011 Author Share Posted August 27, 2011 Anyone? Quote Link to comment 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.