[SOLVED] CSS image gallery

Graisbeck · #1 Dec 11th, 2007, 21:27

Hi All,
Can I please have some advise/tips on how to change this code from using thumbnails to using text "links" to view the large image in a different container, I've been messing around with it for a couple of days with no joy.

Thanks in advance for any help given.

Code: Select all

 
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>

HTML: Select all

<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>
<br />
<a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> 
<a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a>
<br />
<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a>
<br />
<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>
</div>

nashultz07 · #2 Dec 12th, 2007, 00:25

Not sure what you are asking. Are you wanting text links that go to the larger images instead of image links going to them?

Stuart · #3 Dec 12th, 2007, 02:30

I'm not sure, either. Could you explain a bit more?

welshstew · #4 Dec 12th, 2007, 08:07

If I am reading your question right, then all you need to do is remove the initial thumb image and replace that with text. Something like

HTML: Select all

<div class="gallerycontainer">
<a class="thumbnail" href="#thumb">simple<span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a><br/>
<a class="thumbnail" href="#thumb">unreal<span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a><br />
<a class="thumbnail" href="#thumb">sushi<span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a><br />
<a class="thumbnail" href="#thumb">horses<span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a><br />
<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" />Dynamic Drive</span></a><br />
<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" />Zoka Coffee</span></a><br />
</div>

Graisbeck · #5 Dec 12th, 2007, 13:14

I'm wanting the text links when hovered or clicked to open an image in a seperate div within the same page, if thats possible???

I'll try that Welshstew, thanks.

Thanks for your interest guys.

maspick · #6 Dec 13th, 2007, 19:33

Quote:

Originally Posted by Graisbeck

I'm wanting the text links when hovered or clicked to open an image in a seperate div within the same page, if thats possible???

I'll try that Welshstew, thanks.

Thanks for your interest guys.

In your HTML, create each link as follows:

Code: Select all

<div id="links"><a href="#">This is a Link<img src="image.jpg"  width="width" height="height"/></a>...</div>

In your CSS:

Code: Select all

#links a img { display: none; }

#links a:hover img { display: block; position: absolute; top: (screen location)px; left: (screen location)px; }

The screen locations I noted in the hover definition are the top and left points to the position for the top left corner of the image.

This is not in another div but should allow the images to appear where you want them.

This is from memory from a project a while ago. I hopefully haven't forgotten anything crucial.

That's my 2 cents :^{>

Graisbeck · #7 Dec 18th, 2007, 08:07

Thanks all for your help.

I used an amended version of Welshstew's code to solve the problem.

Thanks again

Gary

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Image Gallery Help	McG	Web Page Design	1	Apr 18th, 2008 01:29
[SOLVED] First Attempt at Basic Image Gallery Not Working...	Jack Franklin	JavaScript Forum	1	Sep 30th, 2007 08:14
PHP image gallery	Maverick25r	PHP Forum	2	Oct 12th, 2006 01:16
Image gallery not displaying enlarged image	AdRock	PHP Forum	15	Sep 1st, 2006 11:31
need an image gallery	spellbyte	Web Page Design	4	Mar 7th, 2006 13:45

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] CSS image gallery