Website Help - CSS image/gallery

[Desmo]

Hey all....need a bit of help with something I'm trying to do with a website.

I'm using DW3 and want to make it so that when I click an image thumbnail, the larger picture version appears in a kind of hovering window in the middle of the page (not another actual browser window). This will then disappear again when it is clicked. Hope that makes sense :)

Can this easily be done with just html and CSS? If not, what else do I need to do. Please bear in mind that my knowledge is quite limited with CSS and html :)

[Joe 90]

don't know if you've seen it but you can get a flash based version of this which could then browse between pics without having to go back to click on another one... it appears in the middle and kind of adds a grey tint over the rest of the site, with the image you want in the middle.

you could also do this with html/css as a kind of 'virtual' window in the middle...you probably would just want to script something with php and create a new div in ur css to set the div to appear in the middle of the page, with whatever extra styling you wanted :)

[Desmo]

Seems I may have found something which is all CSS based that does the trick.

I'm using this... http://randsco.com/index.php/2006/04/10/photo_caption_zoom_version_3

[Joe 90]

ah yeah, you could steal their javascript and have a simple mouseover like that :D

[Desmo]

It's not javascript, it's all CSS/html. I only needed something simple really, although I might try and modify it a little if I can. Although I don't really know what I'm doing ;D

[Mark]

As long as you don't try to implement it on the forum, we should be safe. ;D

[Admiral Huddy]

I love the way you can download chunks of pre-made code to build your application with little experience.

[Joe 90]

lol yeah - and it makes for interesting results when the code actually works :D

[Desmo]

Here's the page by the way, if anyone is interested....

www.jmartworks.co.uk/site2/samples.html

an old project back from the dead :)

Still a work in progress at the moment though.

[Joe 90]

thats not too bad.

i'd suggest one thing atm though - http://www.cleancss.com/

clean up the css a bit ;)

on a busy day like today the current css hurts my eyes :(

[Desmo]

Nice one, will give it a whirl :)

[Joe 90]

hey des, just had a thought - would you mind me posting the link on a web dev forum i'm a member of to see what they (might) do to the css...might end up with it looking rather nice :D

[Mark]

Desmo, I have to admit I'm not so sure about what you've done there.

The problem is that if you want to look at the images in sequence (particularly the bottom set), then you have to move the mouse off one and dodge around it to get to the next.

Actually, I have to admit that most of the inline image viewers annoy me in one way or another, but maybe I'm just too Web 1.0. :)

[LeperousDust]

This is just feedback des, but i'm not a fan of the rollover thing you've got going there, i think its a bad implementation of a piece of code. It worked well on the site you linked to, but it doesn't feel right on yours... I think you'd be better with what show mentioned, something like how www.ebuyer.com does the product images, someone elses website here does that too (can't remember though Designcut or something?)

[Desmo]

I'm all up for suggestions :)

But it needs to be something I can easily modify to suit my site, baring in mind my limited skills.

[Desmo]

hey des, just had a thought - would you mind me posting the link on a web dev forum i'm a member of to see what they (might) do to the css...might end up with it looking rather nice :D
Fire away mate, anything that will help is welcome :)

BTW, I will be adding more pics, this is just a quick test, so it will need to have more images.

[LeperousDust]

I don't know how to do it myself, but i'm pretty sure the overlay method isn't too hard (i've seen it done far to many times on peoples websites to suggest so). I would imagine you can pick code up from somewhere, but i'm the wrong person to talk to about that, i just give my opinion :p :D

[MarcLister]

thats not too bad.

i'd suggest one thing atm though - http://www.cleancss.com/

clean up the css a bit ;)

on a busy day like today the current css hurts my eyes :(Bookmarked. Thanks. :)

[Jasper]

anything worth doing from an interface design point of view won't be achievable in pure CSS. and please please please don't touch flash, unless you're beating it with a very large stick.

have a look at this: http://www.huddletogether.com/projects/lightbox/

it's using javascript, but it degrades nicely for the few loons that have javascript disabled. something like this is going to be your best option short of using a full-blown gallery system

[Desmo]

Ahhh, that's much more like the thing I've seen before and had in mind. Nice one Jasp :D

[Desmo]

All changed to the one Jasper linked to. Already modified it and it's working great :D

[LeperousDust]

Thats what i was talking about, and thats MUCH better! :) good good good

[MarcLister]

As LeperousDust says, that is very very good. They use something similar on SortItOutSI.net (for Football Manager downloads). Ironically it doesn't work as well as yours does. ;D

[Desmo]

Just need to add a few more samples and get some other bits together and I'm ready to go :D

[MarcLister]

Go? Where? You're not leaving us are you?

:'(

[Desmo]

Yes I am. You smell.

[MarcLister]

...nice. Yes I do. I had a shower this morning don't you know. ;D

[Joe 90]

you might want to look at lightbox 2 ;)

http://www.huddletogether.com/projects/lightbox2/


this is the flash based method i had in mind earlier (obviously just JS now) - just didn't have the bookmark at work and since returning home headed for the pub before the bookmarks :)

[Mat]

Ive used code from this place before:

http://www.cssplay.co.uk/

The guy has some very impressive examples.