Rock And Roll Over

April 13, 2010 2:31 PM

looking for some html code for a decent presentation for photos-- specifically the kind where you mouse-over a thumbnail and it displays that one large, so you can look at all of them simply by mousing over each one.

I use Geocities, so it's not Dreamweaver, no flash, no CSS. I really don't know much at all about programming, but I've been doing html for so long that I know how to find what I need most of the time (two words: "view source").

anywho.. most of the time when I find a good code it says "put this in the head (bunch of code), and put this in the body ('nother bunch of code)-- again, nothing fancy. I am looking into doing much, much more, but I wanted to know if there was anything simple I could just start using for this kind of presentation right away.

(why do I feel like I'm going to get the verbal lashing of a lifetime from the comic book guy on The Simpsons?)

posted by herbplarfegan to technology (10 answers total)

dammit-- "presentation" was a really confusing choice of words.
I'm just talking about putting this on a website, not putting "a presentation" together. thanks
posted by herbplarfegan at 2:36 PM on April 13, 2010

Sounds like lightbox is what you're looking for. It uses jQuery, but you don't have to know much about the language to implement it, and it looks like their directions for where to insert the necessary bits of code are quite clear.

(Or you could do this using html and javascript for image rollovers.)
posted by Fifi Firefox at 3:12 PM on April 13, 2010

Here is a CSS gallery with a mouseover. Other ideas here, although many of them require a click to enlarge.
posted by sageleaf at 3:15 PM on April 13, 2010

I'd recommend you go with a Click To Enlarge option if you can. People tend to hate it when unexpected things happen while they browse the web. Music that starts automatically, stuff that pops up as they scroll around... people hate it.

I'll also 2nd the Lightbox recommendation. There are tons of variations to choose from. I use a jquery lightbox variant on my site and I love it. Click a thumbnail to see a larger version, and you can use keyboard keys or mouse clicks to move from large photo to large photo. It's really slick and amazingly user friendly. Google "jquery lightbox" and you'll get a ton of great options.
posted by 2oh1 at 3:41 PM on April 13, 2010

Lightbox works on the iPhone too. I just checked to satisfy my curiosity. In general, you might not want to depend on mouse overs if you can help it as touch devices don't necessarily have any support for that. Lightbox only seems to need it for the magical "Next/Prev" button.
posted by chairface at 4:06 PM on April 13, 2010

They're called modal dialogues. There are a hundred scripts out there. I hate almost all of them for one big reason: they force you to download a lot of fucking other shit (Oh, it's ONLY 30k after you remove all the spaces from it and gzip it and… etc., etc.).

My personal recommendation is Michael Leigeber's TinyBox script. It's exceptionally lightweight but it works everywhere and it fits nicely into a single javascript object.

You should check out some of his other stuff. He is a JavaScript hacker I hold in the deepest respect.
posted by Civil_Disobedient at 4:07 PM on April 13, 2010 [2 favorites]

I've been impressed with the ease of use of this MooTools based script for embedding a Picasa web gallery. It's based on SlimBox, a MooTools-based LightBox work-alike.
posted by flabdablet at 7:30 PM on April 13, 2010

I played around with a javascript from here to achieve what you want. Example of how it looks here.
posted by bwonder2 at 1:13 AM on April 14, 2010

Isn't this what's called a remote rollover?
posted by dpcoffin at 9:11 AM on April 14, 2010

nice bag of tricks, guys. thanks a zillion!
posted by herbplarfegan at 6:53 PM on April 14, 2010