SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Click on thumbnails to display larger image in separate div

    I would like to be able to click on a thumbnail images which will display the larger version in a separate div. Preferably the image fades in rather than just appear. Additionally I would like a border to appear around the thumbnail when selected.

    The only experience I have of javascript/jquery was from installing a lightbox2 gallery.

    I am total newcomer, so please be kind!!!


    stuart lighting v3 projects.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    There are lots of prewritten jQuery scripts for this sort of thing. You can Google things like jQuery thumbnail gallery" etc. and find a lot of examples. Here are some that may or not be what you want, or at least adaptable to your need:

    http://www.twospy.com/galleriffic/example-2.html (article)
    http://www.pikachoose.com/
    http://galleria.io/
    http://demo.webdeveloperplus.com/fea...ontent-slider/

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankyou for your input. The Galleriffic one looks the closest.

    In my attachment I have the left hand column which contains the thumbnails and the right hand column which is currently a blank div which I hope to display the selected image.

    Could Galleriffic be adapted to my current layout? I'd like to keep the layout exactly as it is.


    Many thanks

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Are you saying that, on page load, you want a blank space where the photos will appear?

    Of course that's possible, but I'm not sure if those scripts allow for that. (That's the downside of not knowing how to write them yourself.)

    Here is a nice, simple JS gallery that doesn't use jQuery, but just some simple JS:

    http://domscripting.com/domsters/photos.html

    It has a placeholder image until you click on a thumbnail. You could make that placeholder image a simple, transparent one, so that it looks like there's nothing there, or an image the same color as the background. You can style this gallery to look just like your screen shot, too.

    And here's another jQuery gallery I meant to list:

    http://exposure.blogocracy.org/demos/demo1.html?v=0.9.1

    Not what you want, quite, but o well ...

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The right hand div shouldn't be blank on page load but contain a default image which should be the first thumbnail.

    Thanks for al your input. Can anyone recommend a good JavaScript book for novices?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by designclash View Post
    The right hand div shouldn't be blank on page load but contain a default image which should be the first thumbnail.
    That sounds contradictory ... but anyhow, I think that domsters link is what you want.

    Can anyone recommend a good JavaScript book for novices?
    That domsters gallery I linked to is from an excellent book by Jeremy Keith, called DOM Scripting. It's a classic, and explains in detail how that gallery works. (There is a new version of the book here: )

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link its on my wish list, which is growing by the day. It has received many good reviews which is a big plus.

    Basically I have 2 columns. Click on a thumbnail in the left hand div and a larger version of the images appears in the right hand div.

    Thanks again for the help. Much food for thought.

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't see your earlier reply but yes the domsters link is pretty much what I had in mind.

    Cheers!

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yes, it's a really nice bit of code, too. And it can be laid out any way you like—just as in your screen shot. If you need any help with the layout, just let us know.

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    UK
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The layout and styling is actually done and exactly like the wireframe. Being a novice I had trouble to start with but it all clicked into place. Starting to enjoy piecing the puzzle together and am thinking I prefer it to working in print!

    I should imagine I'll have a few more questions soon but thanks for the input.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Glad it's working out. It's more satisfying and reassuring to get there yourself (at least for the most part).


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
  •