SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast murphaloid's Avatar
    Join Date
    Oct 2011
    Posts
    54
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Need help with Image gallery

    I have a div containing image thumbnails on the left panel and an empty space div on the right. I want the user to hover and/or click on the thumbnail on the left, so the full size image, with description, appears in the space in the right panel. This will not go to a new page, but just make the larger image appear next to the thumbnails.

    I'd like this to have a smooth fade-in effect, ideally.

    What is the best way to do this? I'm not asking you to tel me the code, just what method would you advise?

    I'm reasonably competent with html/css but dont yet know javascript/jquery. Is there a gallery that does exactly this you know of I can drop into my website or must I build it from scratch(which I cant do if it involves jquery/javascript)?

    Thanks

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,332
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    Using a library like jQuery is very easy; with minimal understanding of Javascript.
    You simply add the reference in the head of your HTML page

    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    And then you can use all the really cool stuff shown in the API Docs, like Fade.

    HTH
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Enthusiast murphaloid's Avatar
    Join Date
    Oct 2011
    Posts
    54
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok, guess I better get learning!

    Thanks for your reply

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    There are quite a few of these, such as

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

    http://www.twospy.com/galleriffic/example-2.html

    http://demo.webdeveloperplus.com/fea...ontent-slider/

    http://slidervilla.com/pointelle/

    http://www.pikachoose.com/

    As Parkin T said, these are very easy to add to your site. You can change their layout with CSS, too, of course.


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
  •