SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Sep 2003
    Location
    Northern California
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display larger image on rollover (a al istockphoto.com)

    I need to display a larger version of a thumbnail for a product catalog containing approx 250 products ( example). I want the larger image to display when the user clicks the thumbnail (or mouses over -- one or the other) . The product info details are retrieved using php/mysql. The images (thumb/large) were dynamically resized.

    Possible solutions:
    1. Pop-up window displaying the full image when thumb is clicked. This tends to be frowned upon.

    2. Separate page "fullimage.php?id=123" with the sole purpose of showing the full image.

    3. A javascript window that functions similarly to istockphoto.com when browsing thumbnails

    4. If there is an AJAX solution out there, I'd like to know as well. Even though in this case I dealing with 1 image at a time, I can see other situations where I have a grid of thumbnails.

  2. #2
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can probably show you how to do this with the istock javascript (javascriptkit.com) if you are still looking for a solution.

  3. #3
    SitePoint Guru
    Join Date
    Sep 2003
    Location
    Northern California
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, thank you. I a reviewing the scripts on javascriptkit.com but do not see what I am looking for. If a code exists elsewhere, pls advise.

    Welcome to SitePoint!

  4. #4
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How are your images named? I see on the example it is thumbs/7_thumb.jpg what are the bigger pictures called and what directory do they sit in. The reason i ask is that i will tweak the javascript for you so it makes it really easy to add this effect.

    Thanks for the welcome!

  5. #5
    SitePoint Guru
    Join Date
    Sep 2003
    Location
    Northern California
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the image data (file name) is being pulled from the database and inserted into the page dynamically.

    the full size images are in the 'full' directory and just named using the 'id' associated with that image. /products/prod_images/full/35.jpg whereas the thumbs are in /products/prod_images/thumbs/35_thumb.jpg

    As a backup, I am using a popup window called from within an <a> tag but would like to learn multiple ways of doing it.

  6. #6
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See if this is what you are looking for. just view the source and grab the style and js.

    The example is setup like you have it (ie) /products/prod_images/full/ etc

    http://www.amagondes.com/jsthing.html

  7. #7
    SitePoint Guru
    Join Date
    Sep 2003
    Location
    Northern California
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for taking the time to do this....will need to digest the code slowly since javascript isn't my thing. i see there's extra code in their for ratings, etc. which i would attempt to remove for clarity sake.

  8. #8
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome. I'm actually going to work on one myself that is easier to use because i think i would like to use it a bit more. I'll post back up here when its done.

  9. #9
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was also recently looking for something similar to this type of functionality. Thanks for the excellent suggestion on the "istockphoto" method. TBH, I am a longtime member there and was going to attempt this anyway.

    Curious if you got what you needed mgm_03? I'm still not satisfied with the solution I came up with but could not get it working using pure JS. I now feed the dimensions of the image to the script using PHP at the server side and resize the box to fit the image. Works, but would have loved to have JS do the resize for me to lesson the load on the server. I was trying to call a routine that dynamically resizes the div based on the size of the image. But the image kept returning sizes of zero height & width no matter how I tried to pull them.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •