need some help with image display

Discussion in 'PHP' started by dougvcd, Jul 9, 2009.

0
  1. #1
    ok i have this code to display an image and data
    i control how big the image is at the start but would like peeps to be able to click some where and then see a bigger image
    if you see what i mean
    cheers
    Doug
    //Outputs the image and other data
Echo "<img src=http://www.lostpets.com/uploads/".$info['pname'] ." alt=\"Image\" align=\"left\" width=\"75px\" height=\"75px\" hspace=\"10px\" vspace=\"8px\"> <br>";
Echo "<b>Description:</b> ".$info['desc'] . " <br>";
Echo "<b>Area:</b> ".$info['area'] . " <br>";
Echo "<b>Tel:</b> ".$info['tel'] . " <br>";
Echo "<b>Date of listing:</b> ".$info['date'] . " <br/>";

Echo "<hr>";
}
    PHP:

     
    dougvcd, Jul 9, 2009 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    "would like peeps to be able to click some where and then see a bigger image"

    Would you want the bigger image to appear on the same page or a different page?

    If on a different page then you need to turn the image, or whatever you want clickable into an anchor, for example:

    <a href="biggerimage.html"><img src="myimg" /></a>

    If you want it on the same page then you need to use Javascript to change the width and height variables onClick.
     
    wd_2k6, Jul 9, 2009 IP
  3. DemCage

    DemCage Peon

    Messages:
    77
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Copy the following code in an empty .html file and try it out. You need two images in the same folder (cat.jpg & lens.png). :)

    <html>
<script language="JavaScript" type="text/javascript">
function NewSize() {  
if (document.getElementById("catimage").width == 75)  
	{
	  document.getElementById("catimage").width = 500;
          document.getElementById("catimage").height = 500;
	}
  else
	{
	  document.getElementById("catimage").width = 75;
	  document.getElementById("catimage").height = 75;
	}
}
</script>

<a href="javascript:NewSize()"><img name="lens" src="lens.png"></a>
<br>
<img  src="cat.jpg" id="catimage" width="75" height="75">
</html>
    Code (markup):
     
    DemCage, Jul 9, 2009 IP
  4. techbongo

    techbongo Active Member

    Messages:
    309
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    80
    #4
    Why don't you use PHP GD II library for resizing images. In this way, your images will be redrawn to new size, not directly resized. This stops distortion of images.
     
    techbongo, Jul 9, 2009 IP
  5. anthonywebs

    anthonywebs Banned

    Messages:
    657
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #5 
    //Outputs the image and other data
Echo "<a href=http://www.lostpets.com/uploads/".$info['pname'] ."><img src=http://www.lostpets.com/uploads/".$info['pname'] ." alt=\"Image\" align=\"left\" width=\"75px\" height=\"75px\" hspace=\"10px\" vspace=\"8px\"> </a><br>";
Echo "<b>Description:</b> ".$info['desc'] . " <br>";
Echo "<b>Area:</b> ".$info['area'] . " <br>";
Echo "<b>Tel:</b> ".$info['tel'] . " <br>";
Echo "<b>Date of listing:</b> ".$info['date'] . " <br/>";

Echo "<hr>";
}
    PHP:
     
    anthonywebs, Jul 9, 2009 IP
  6. dougvcd

    dougvcd Peon

    Messages:
    267
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    cheers
    Anthony
    that worked a treat
    Doug
     
    dougvcd, Jul 10, 2009 IP