How to code a gallery like this?

Discussion in 'HTML & Website Design' started by Mr.Dog, Dec 21, 2013.

  1. #1
    Hi,

    I'd be interested in coding a gallery like this... slightly similar:
    http://www.istockphoto.com/search/text/make warm/filetype/photos/source/basic#8783751

    I don't want to use a pre-made script (like a full gallery script), I'd only require some elements for it.

    *each image will have its own page and description
    *would rather be interested in this "hover effect": hover over the image and see a slightly larger image, but upon click it beams you to the individual image's page

    ...it's rather this thumbnail tray section that I'm interested.
    Any tips, recommendations?

    So far I only found complete scripts for entire galleries.
     
    Mr.Dog, Dec 21, 2013 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    I presume those thumbs are links right? So you shouldn't have problem with the clicking.

    For hover effect, I'd first prepare an absolute, transparent block as the wrapper for this popup. It will intially be hidden and have a blank image inside. Then, hook to the hover event on each thumbs: when this event is triggered, change the source of that blank image and display the popup wrapper. Where this popup should appear, is actually a function of current mouse position; it needs to be "away" a bit from the mouse so not to interfere with the hovering.
     
    hdewantara, Dec 21, 2013 IP
  3. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #3
    I am trying to figure out a way to avoid complex slowing Javascript...
     
    Mr.Dog, Dec 23, 2013 IP