Not sure how to explain this but sort of like an accordion effect in essence. I have a div full of thumbnails (see http://www.liambrazier.com/test1) - I want, when one is clicked, for all the thumbnails and rest of page to slide down revealing a single div above them (below the header and navigation) which will contain the larger image, or video for example. Clicking on a different thumbnail should load another image or vid etc.

With a close button to hide the revealed div and slide up the rest of page again.

I know this is possible but I am hopeless when it comes to jQuery so any help would be most welcomed!

1 answer

0
points

So in looking at your site (the url referenced) to alter your markup a bit to facilitate things.

  • wrap each of the thumbnails in an anchor tag A with the href attribute pointing to the desired "full-size" image
  • add a DIV with display:none and an ID to be targeted for inserting images and containing the "close" button

now, short of writing the script for you, here's what you need to accomplish:

  • form a jQuery selector composed of all A elements in the thumbnails group
  • bind a click event to each, which will first check to see if the "preview area" is already showing, then append an IMG element and animate with a method such as .slideDown()
  • only replace the image element if the preview is showing
  • on clicking the close button, the .slideUp() animation should close the preview area.

take a look at the documentation, documentation and I hope this helps!

Answered over 8 years ago by Paul Gueller
  • Thanks, it's the second part I'm clueless on - is there a revavent example anywhere you know of I can dissect the code of? Liam Brazier over 8 years ago