Website Help - CSS image/gallery

Desmo · 09-10-2007, 10:45

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 · 09-10-2007, 11:27

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 · 09-10-2007, 12:13

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...zoom_version_3

Joe 90 · 09-10-2007, 12:31

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

Desmo · 09-10-2007, 12:47

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

Mark · 09-10-2007, 12:49

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

Admiral Huddy · 09-10-2007, 14:41

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

Joe 90 · 09-10-2007, 14:46

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

Desmo · 09-10-2007, 15:06

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 · 09-10-2007, 15:25

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

09-10-2007, 10:45	#1
Desmo The Last Airbender Join Date: Jun 2006 Location: Pigmopad Posts: 11,915	Website Help - CSS image/gallery 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 __________________

09-10-2007, 11:27	#2
Joe 90 Absinthe Join Date: Jan 2007 Location: Chester Posts: 2,345	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 __________________ 360 Blog \| Join GiffGaff \| Twitter

09-10-2007, 12:13	#3
Desmo The Last Airbender Join Date: Jun 2006 Location: Pigmopad Posts: 11,915	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...zoom_version_3 __________________

09-10-2007, 12:31	#4
Joe 90 Absinthe Join Date: Jan 2007 Location: Chester Posts: 2,345	ah yeah, you could steal their javascript and have a simple mouseover like that __________________ 360 Blog \| Join GiffGaff \| Twitter

09-10-2007, 12:47	#5
Desmo The Last Airbender Join Date: Jun 2006 Location: Pigmopad Posts: 11,915	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 __________________

09-10-2007, 12:49	#6
Mark Screaming Orgasm Join Date: Jul 2006 Location: Newbury Posts: 15,194	As long as you don't try to implement it on the forum, we should be safe.

09-10-2007, 14:41	#7
Admiral Huddy HOMO-Sapien Join Date: Jun 2006 Location: Chelmsford Posts: 6,692	I love the way you can download chunks of pre-made code to build your application with little experience. __________________ I just got lost in thought.. It was very unfamiliar territory. Techie Talk \| My gaming Blog \| PC spec \| The Admirals log

09-10-2007, 14:46	#8
Joe 90 Absinthe Join Date: Jan 2007 Location: Chester Posts: 2,345	lol yeah - and it makes for interesting results when the code actually works __________________ 360 Blog \| Join GiffGaff \| Twitter

09-10-2007, 15:06	#9
Desmo The Last Airbender Join Date: Jun 2006 Location: Pigmopad Posts: 11,915	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. __________________

09-10-2007, 15:25	#10
Joe 90 Absinthe Join Date: Jan 2007 Location: Chester Posts: 2,345	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 __________________ 360 Blog \| Join GiffGaff \| Twitter