Please note that you may have been redirected (you might like to make a note of the URL in the address bar of your browser and update accordingly) This is a permanent archvie but is no longer actively maintained. Please visit http://joshuaink.com for the latest updates.

CSS photo gallery template

Friday March 11, 2005

Not being a photographer, or even any good at taking photos, I haven't really ventured into photo gallery layouts very much, so I thought I'd give it a whirl.

First stop The Turning Gate to hijack some photies (thanks Matt! :-)). The layout in the example works well across all browsers as far as I have tested (please note I have linked to only one full plate image), the real fun begins with the image description rollovers present on the thumbnail gallery.

The technique is based on Eric Meyer's pure CSS popups and as you would except this method applied to the thumbnails works well in Firefox, Safari, Opera etc. Although Eric's demo works in Internet Explorer, I ran into some problems layering over images.

Internet Explorer 5 PC and Mac

Version 5 PC just doesn't want to play along, at all, I am not sure why (5.5 does work but it's a bit buggy). On the Mac it works in principle but the pop up is too wide and breaks the layout.

Internet Explorer 6

Update

Please read the first comment on this post for the solution to the problem. The template has not been updated so you will need to apply the fix yourself.

Strange one this and it might be worth opening up the example to see if you are getting the same results as me.

At first it didn't work at all, then I was messing around with proprietary opacity filter and it started working but only if the page has full focus. By that I mean if you hit refresh and then mouse over the thumbnail, nothing happens. If you look in IE 6 you will see I have added a conditional IE comment asking users to CLICK HERE (the horror) to activate the thumbnail rollovers.

I don't know if anyone can tell me anymore about this, did I make a schoolboy error in the CSS? I am not sure. Either way it was a fun experiment and the full template is available for download here.

  1. Martin

    1576 days ago

    The fix for IE 6 is to declare a rule for the #main-content a:hover state, so that there’s a change between it and the inactive, normal link state (or at least, so that there’s a rule explicitly declared in the hover state that is only implicit in the inactive link state). I declared this for the hover state:

    #main-content a:hover { white-space: normal; }

    Apparently the kind of rule you should stick to is one belonging to CSS1 (since CSS2 doesn’t always work), and you should avoid using a color declaration.

    Credit to a certain SuzyUk for discovering this:

    http://www.webmasterworld.com/forum83/1189.htm

  2. Eric Irvine

    1576 days ago

    I know from my table days it might be a good idea to define a width and height for the images for that slight page-loading increase.

    Great job though! it’s quite nice.

  3. Eric Irvine

    1576 days ago

    BTW, using spans eh :P

  4. Eliot

    1576 days ago

    Quite beautiful. I may try to implement this template with Flickr Gallery. Could be a great combination!

  5. Indranil

    1576 days ago

    Great.
    Drunk in power, eh, John?? eh?

  6. Rob

    1576 days ago

    Just a quick note, I was reading some things about galleries on a blog the other day and the general consensus was to have navigation at the top rather than under the image. It normally reduces mouse movements when flicking through.

  7. Martin

    1576 days ago

    No problem. :)

    But having read my comment back, it’s apparent to me that I don’t have the tutorial-writing skills down yet. You’d probably do better by seeing that link I posted for a clearer explanation. ;)

  8. Anton

    1576 days ago

    Very nice!

  9. kartooner

    1576 days ago

    Love the layout and the color scheme is smooth and pleasing to the eyes. I’m jealous of you, man. Jealous! :)

  10. Matthew

    1575 days ago

    nice work, John. Very clean and attractive gallery. Now, if only my host server weren’t down at the moment for hardware upgrades, the links to my site would work … ;p

  11. nelson

    1572 days ago

    Hey,

    Great template, just what I was looking for. Just one thing though, how do I get the main image to appear when the hyperlink is clicked on? I don’t see the code that forces it to appear in the fullplate page?

    Thanks again

    Nelson

  12. JD

    1572 days ago

    Wow! It looks great! Thanks! :)

Christmas gifts?

Beginning CSS Web Development book cover

Recently

The last seven posts made on this site.

Geeky shiteMeta

A proud member