Search code examples
phpsqlslideshow

Open slideshow image on new page

First time here and hoping someone can help me. Apologies if I've done anything wrong with regards to posting this question here...

I've created a slide show (using PHP) based on 8 images loaded from an SQL database (PHPMyAdmin)

I want to be able to click on any one image to open a new page which will then show a larger version of the same.

I've scoured the internet and various other forums but struggling to find any help.

Please let me know if you require any further information prior to providing an answer. Any help will be hugely appreciated.

<div class="mySlides">
    <div class="numbertext"><?php echo $i . " / 8" ?></div>
    <a href="http://stu10.lccwebtest.co.uk/getimage.php"> 
    <img src="<?php echo $product["Product_Image"];?>" style="width:100%">
</div>
Solution

  • My suggestion would be to end the anchor tag after the image (so the image is part of the link), set it's target attribute to _blank (so it opens in a new page), and finally pass some reference to getimage.php (so it can load the larger image). For example:

    <div class="mySlides">
  <div class="numbertext"><?php echo $i . " / 8" ?></div>
  <a href="http://stu10.lccwebtest.co.uk/getimage.php?id=<?php echo $product["ID"];?>" target="_blank"> 
    <img src="<?php echo $product["Product_Image"];?>" style="width:100%">
  </a>
</div>

    I've made an assumption on what your primary key is for "products", replace "ID" in my example above with the correct primary key.

    Based on further discussion we established that getimage.php has no other function other than to show the larger image. So in that case how about doing away with it and adding the larger image url directly to the anchor as in the below:

    <div class="mySlides">
  <div class="numbertext"><?php echo $i . " / 8" ?></div>
  <?php $largerImageUrl = $product["Product_Image"]; //replace the code here with your actual larger image url for this slide ?>
  <a href="<?php echo $largerImageUrl;?>" target="_blank"> 
    <img src="<?php echo $product["Product_Image"];?>" style="width:100%">
  </a>
</div>

    That reduces a lot of extra work. The only times you'd need a script in the middle would be if the larger image location was a secret or you wanted to somehow record the number of times it was viewed or you wanted to display some other html around the image. In other words, if it had some other function.