php_beginner_83 Posted September 29, 2009 Share Posted September 29, 2009 Hi Everyone I need some advice on how to display an image on the same page as the thumbnails for the images. Right now I have the thumbnails displayed down one side of the web page and on the other side is my photo gallery. The photo gallery is where the photos are displayed. There are 'Next' and 'Previous' links which allows the user to move between each photo. Now I want the user to be able to click on one of the thumbnails and that image will display. Does anyone have any ideas how I should do this? Should I use php or would javascript or css be a better idea?? This is code from the webpage where the photo gallery and thumbnails are displayed... <div id="content1"> <div id="sidebar"> <p>this is the bar</p> <?php include('thumbnails.php');?> </div> <div id="photoContent"> <?php include('photoGallery.php');?> </div> </div> This is from the file that creates the thumbnails.. while (array is not empty) { $currentImage = "images//" . substr(strrchr($row['Path'],92),1); $counter++; if ($counter % 3 == 0) { echo "<a href=#><img src='thumb.php?image=$currentImage' alt='' /></a><br/>"; } else { echo "<a href=#><img src='thumb.php?image=$currentImage' alt='' /></a>"; } } This is code that creates the photo gallery.. while (array is not empty) { $descriptions[$counter] = $row['pictures.Description']; $paths[$counter] = substr(strrchr($row['Path'],92),1); $counter++; } $imgIndex = $_GET['img']; if(!isset($paths[$imgIndex])) { $imgIndex = 0; } $currentImage = "images//" . $paths[$imgIndex]; if ($imgIndex<=0) { $prev = "Previous"; } else { $prev = "<a href=\"".$_SERVER['SCRIPT_NAME']."?page=photo&img=".($imgIndex-1)."&ID=".$albumID."\">Previous</a>"; } if ($imgIndex>=(count($paths)-1)) { $next = "Next"; } else { $next = "<a href=\"".$_SERVER['SCRIPT_NAME']."?page=photo&img=".($imgIndex+1)."&ID=".$albumID."\">Next</a>"; } echo "<div id='photoLinks'><pre>$prev $next</pre><br></div>"; echo "<div id='photoBody'></br><h2>$titles[$imgIndex]</h2>"; echo "<img src=\"{$currentImage}\"></br></br>"; echo "<p>$descriptions[$imgIndex]</p></div>"; I'd really appreciate any advice or suggestions you can give. Thanks Quote Link to comment Share on other sites More sharing options...
khr2003 Posted September 30, 2009 Share Posted September 30, 2009 Hi It really depends on how you want to do it. You have number of options: Displaying the thumbnails on page and once you click on any of them you get the photo in another page. Displaying the thumbnails and the single large photo in one page, when you click on any thumbnail the page will be refreshed any you will get the new photo. Or the previous option but using ajax so you do not have to refresh the page to get the new image I think all these three options are valid for you case 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.