Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thumbnail viewer how to question

    Gotta throw it out there, I'm a newb. My question is about how to enlarge thumbnails. Basically I'll have a main picture of a product say 250px x250px and three thumbnails 75px x 75 px under it that I want to enlarge to the 250x250 size either when clicked on (in that case with a close button) or a mouseover type of effect where the images displays 250x250 when mouse is on it. Ive found a link to a somewhat close tutorial, but wanted to see if anyone had any ideas, help, or tutorials to point me towards. Btw in the link below im not wanting the thumbnail to be a cropped image. Anyways Thanks to all in advance.

    link
    http://www.sohtanaka.com/web-design/...er-thumbnails/

    Shawn

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    The essential markup and JavaScript you need are in that tutorial. It's perfectly possible to modify it to not use a CSS "cropping" technique. Have you tried to do this?

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    If you'd like an event (such as an image swap) to happen when you click your mouse, you're going to need JavaScript. CSS can swap/enlarge images on rollover, but not on click.

    If a lightweight, pure CSS solution suits you, look into remote rollovers.

    If you'd like the clicking functionality, the tutorial you linked to looks good with the exception of this CSS cropping part. I'd recommend sizing your images beforehand in a graphics program rather than letting the browser do the manipulation.

    Another solution would be AJAX. Lightbox and Thickbox (both of which I've used and would recommend) are two additional ways of enlarging thumbnails.
    matt | design | blog

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the comments, I probably should have worded it better, but I was more or less seeing if the javascript way in the link was the best way, or if there were other ways that i was unaware of. thanks again


  •  

    Posting Permissions

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