SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Expanding Thumbs

    No, it's not a medical condition it's a question. I'm not actually sure if it should be posted here or in the JS section or whatever as I'm not sure what technology will create the solution.

    On my site I have four image thumbs running across the middle:
    http://simonpaulcreative.com/

    Now I don't want to reformat them or alter them in any way, but when clicked on I'd like each image to expand into a mini window within the main window - Just like when one clicks on an image in someones photo album on Facebook. It would also be good if I had the ability to add a caption. So just to be clear, I don't want it to open in a separate browser window or tab.

    I'm using Dreamweaver at the moment but only to hand code HTML/CSS. I don't have any understanding of JS (yet).

    Any advice will be gratefully received.
    Cheers,
    simon

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Yes, you really need JavaScript for that. It's pretty easy to use a pre-made script, though. Here's one I like:

    http://www.digitalia.be/software/slimbox2

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph, I've not used JavaScript before, but I'll certainly give it a go. I was thinking of using CSS and absolute positioning to position the large pics off screen, and then change their coordinates on clicking the small thumbs, but I had no idea how lol.

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    If you do a search on CSS lightbox or modal, you'll get quite a few CSS-only solutions.

    Here's one: http://www.cssplay.co.uk/menu/cssplay-radiobox.html

    Most of them are not compatible with legacy browser versions, however, so JS might be a better solution.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for that Ralph, I was starting to get a bit daunted by the JavaScript, don't think I'm quite ready for JS yet.
    The first CSS looks promising, and it works back to IE6.

    Thanks again,
    simon


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
  •