SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbnail click to open main image in column on same page

    I have created a three column layout in which a dozen thumbnails are laid in a grid in the far right column (div = “sub-content”). I want users to be able to click on a thumbnail (no rollovers, animation or fancy visual effects of any kind required) and have the related full-size image (about 30kb each) open in the middle column (div = “main-content”) of the same page. Is there a way to do this using only CSS?

    I am trying to do this without using tables, frames and pop-ups because many viewers find these slow to open online. Is my only option to turn to Javascript, Flash or some other scripted method of which I know less than a nano-nothing?

    I have minimal CSS knowledge – but what little I know comes entirely from Dan Shafer’s “HTML Utopia” book (no, no-one paid me to say that!). If you are able to help please keep your explanation simple and clear enough for a true beginner and show any code that you recommend. Also please don’t recommend that I “just write a little javascript” as I live on a high floor where the windows are often open. Thank you for sharing your expertise.

  2. #2
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    uk
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    i am just in the process of putting together a portfolio site for a photographer which is of a smilar layout to the one you're looking for (2 cols, not 3). Take a look at it here . It's not quite finished yet, but has just been tested with most browsers and platforms and everything displays as it should. It also validates with W3C apart from a few missing 'alt' tags. If you need any help let me know and i'll see if i can assist.

    cheers

    janice

  3. #3
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem seems to be solved - thank you!

    Unbelievable! I spent the last two weeks on this (about 12 hours a day) and you've shown me how to do it within 20 minutes of making my post. I'm speechless.

    I may yet have problems with my layout, in which case I will ask for additional advice but for now, what you showed me looks perfect. Thank you very much!

    My old website, if you're curious to see the nightmare I'm updating, is www.studiocyberia.com.

    Thank you once again.

    Mark

  4. #4
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Do I understand your source code correctly?

    Janice,

    I have had a look at your code (thank you for sharing, as they say here in New York). Your site design looks beautiful and works smoothly and quickly.

    I would like to check whether my understanding is accurate. It appears to me from your html sourcecode that clicking a thumbnail only appears to open the main image in a column on the same page but in fact opens an entirely new page. Presumably once the first page has been loaded the thumbnails and other unchanged content are all in the browser's cache which explains why it loads so swiftly.

    If my understanding is correct, this does resolve the visual aspect of my question but doesn't actually achieve it using the method I had in mind. Perhaps I will just need to revise my expectations. Or, equally likely, I may not understand your sourcecode correctly. Or... perhaps there is another way of achieving my goal: to have a thumbnail click open a copy of the main image (and only the main image) in another column on the same page.

    Once again, thanks for your suggestion. At least I now know of one possible solution.

    Mark

  5. #5
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark,

    I have a script you could use and I don't think it's difficult to use it...
    The script is here (with an explanation). Here's a practical application of the script.

    I hope this helps.

  6. #6
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bonrouge: Another elegant solution!

    Bonrouge,

    Thank you for your script. It looks and works perfectly - exactly the kind of thing I had in mind. I still have the (increasingly faint) hope that there is a "pure CSS" way of solving this, (no javascript, no flash, no tables, no popups, etc....) but your solution is fast, seamless and only mildly intimidating to a complete ignoramus.

    Thanks for your help.

    Mark

  7. #7
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark,
    The good news! There IS a pure CSS answer.
    The bad news! IE is 'not very good' and doesn't support it.

  8. #8
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    uk
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    yes you're right it does open another page. i couldn't find a pure css way of doing this without creating another page and without using some sort of cms to call the images. at least this design works in older browsers and is cross platform compatible.
    the main category pages are template pages so it was just a case of slotting in the image in a page created from the template.
    if you do find another way to do this, i'd be interested to hear the solution.

    cheers
    janice


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
  •