Cross Browser Multi-Page Photograph Gallery

[dennyjim50]

Cross Browser Multi-Page Photograph Gallery

http://www.cssplay.co.uk/menu/lightbox.html



I'd like my page to have 8 columns and 6 rows
thumbnail size = 57x75
mouseover image = 384x500

I'd prefer not to change the size of the container holding the thumbs too much if possible, as I want the mouse over image to come up to the right hand side of the thumbs and not over the thumbs themselves.

Any help would be greatly appreciated,

Thanks in advance

Denise

[Medyman]

To change thumbnail size, adjust:

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

To change full-sized image size:

.photo ul.topic li a:hover ul li a:hover img, 
.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}

The number of rows/columns is dictated by the number of items you add. So, if you had 10 more pictures, it will automatically add as many rows as it needs.

You might need to fiddle a little bit with the height/width to get the right amount of rows/columns. Change via:

.photo {width:635px; height:550px; text-align:left; position:relative; margin:0 auto;}

[dennyjim50]

Thanks Medyman,

Can I still use your help please.
I've sorted out a few things and all is fine but I can not get the enlarged image to stay open on the right in a fix position.

It moves along with me as I go through the thumbnails, it's all over the place
and I really need it to stay fixed.

Thanks Denise


This is the original
http://www.cssplay.co.uk/menu/lightbox.html



And this is me so far altering it.

<style type="text/css">


/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

/* slides styling */


.photo {width:975px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:14px; width:124px; height:30px; text-align:center; line-height:30px; color:#fff; text-decoration:none; border:1px solid #000; border-width:1px 1px 0 0; background:#000; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}

.photo ul.topic li.active a
{color:#fff; background:#000;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:red; background:#000;}

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:600px; background:#000; width:464px; padding:40px 60px; border:20px solid #000; z-index:1;}

.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:600px; background:#000; width:464px; padding:40px 60px; border:20px solid #000; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #000; margin:1px;}


.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#000; border:1px solid #000;}

.photo ul.topic li ul li a img
{display:block; width:57px; height:75px; border:5px solid #eee;}


.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:relative; left:300px; top:10px; width:384px; height:500px; border-color:#000;}
</style>

[Medyman]

I think it's because you changed these:

left:300px; top:10px;

to the last style block.

Try reverting back to the orig.