Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: thumbnail preview?

  1. #1
    Join Date
    Dec 2004
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post thumbnail preview?

    hey,I have a "view picture" button and when you click it,it goes to the url of the picture.I'm wondering if theres anyway to make a thumbnail of the picture when you hover over the "view picture" button in javascript?i dont want to have to make a small thumbnail of every picture in photoshop,like some people suggested.

    thanks for the support

    regards

    Mav
    Last edited by maverick; 07-01-2006 at 02:51 AM.

  2. #2
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    You can do something like this:

    Code:
    <script language="javascript">
    function resizeImage(id,w,h) {
    
      var resizeimg = document.getElementById(id)
      resizeimg.style.height = h
      resizeimg.style.width = w
    
    }
    </script>
    and do whatever you like with it eg.

    HTML Code:
    <img src="something.jpg" id="something" width="100" height="100" onmouseover="resizeImage(this.id,'400','400')">
    ID: You will need an ID for the image

    Tell me if it doesn't work
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Thumbnails are really the way to go. They save so much on bandwidth when loading the page. Many programs can make these smaller images at one pass of a directory. There really is no reason not to use thumbnails and many reason why you should.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Dec 2004
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    yeah i guess i could resize the images with some software,in that case... whats the JS code to display a small thumbnail of the picture when you hover the " view picture" button? regards

    Mav

  5. #5
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Try my script
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  6. #6
    Join Date
    Dec 2004
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    yep I'v tried it and it seems pretty good but once you hover over the image it doesn't resize back and once you hover over it,since alot of my pictures are big it disrupts the whole page.I found this script :

    http://jsmadeeasy.com/javascripts/Im...-box/index.htm

    it kind of seems to be what i;m looking for but it does not show up on firefox,its just for IE.

    or similar to this:

    http://icant.co.uk/articles/imagepreview/

    only once you click the preview it open the link on a new windows insted of having to click the text next to camera image.
    Last edited by maverick; 07-01-2006 at 09:10 AM.

  7. #7
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    It uses this:

    resizeImage(your_id,your_height,your_width)

    So you can customize it onmouseover or onmouseout or whatever!
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  8. #8
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Talking Try this!

    Quote Originally Posted by maverick
    yep I'v tried it and it seems pretty good but once you hover over the image it doesn't resize back and once you hover over it,since alot of my pictures are big it disrupts the whole page.I found this script :

    http://jsmadeeasy.com/javascripts/Im...-box/index.htm

    it kind of seems to be what i;m looking for but it does not show up on firefox,its just for IE.

    or similar to this:

    http://icant.co.uk/articles/imagepreview/

    only once you click the preview it open the link on a new windows insted of having to click the text next to camera image.
    Here - Try this:

    Attachment 406

    I hope it's what your looking for!
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  9. #9
    Join Date
    Dec 2004
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    sweet,thanks thats exactly what I was looking for

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Doesn't make it any less of a bad idea. Can you say 'slow page loads'?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •