PHP Photo Album Script

[steph_graham]

Script: PHP Photo Album Script
http://www.dynamicdrive.com/dynamici...photoalbum.htm

My test page:
http://www.reallivinginteriors.com.a...lExternal.html

I have just two problems:
I have modified it so that on click it loads the large image in an iframe. This works well except in IE 6 where I get a white margin around the image.
Is there some way I can specify the margins and padding to 0?

Second problem:
Also I would like to have an ON state and HOVER state for the thumbs.

Help much appreciated!

steph

[Nile]

I suppose you change:

.slideshow img{ /*CSS for each image tag*/
border: 0;
width: 200px;
height: 106px;
}

To:

.slideshow img{ /*CSS for each image tag*/
border: 0;
width: 200px;
height: 106px;
margin: 0;
padding: 0;
}

[jscheuer1]

</div>
<div id="imageA"><iframe frameborder="0" marginHeight=0 marginWidth=0 id="iframe" width="350" height="350" scrolling="no" name="iframe" src="iframes/solutions_InternalExternal_Iframe.html"></iframe></div>

[steph_graham]

Thanks so much!

Any ideas about the thumbnail hover/on state?

[jscheuer1]

You will have to adjust your layout and/or these styles to get this to line up/look good, but to give you a rough idea, replace the on page styles with:

#thumbs {
	margin: 2px -8px -8px 8px;
}

.slideshow a img { /*CSS for each image tag*/
	margin: 6px 4px 0 0;
	border-width: 2px;
	border-style: solid;
	border-color: #000;
}

.slideshow a:hover img { /*CSS for each image tag*/
	border-color: #aaa;
}

.slideshow a.on img {
	border-color: #fff!important;
}

If you have other definitions for .on in your main stylesheet, these should be removed.

You will also need to have a way to get the on class to the a tag when clicked, while at the same time removing it from the others (if any) that have it.

For that, replace your:

function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var popwin=open(imgsrc.href, "popwin", popupsetting[1])
popwin.focus()
return false
}
else
return true
}

with:

function popuplinkfunc(imgsrc){
var popwin=open(imgsrc.href, imgsrc.target),
t = document.getElementById('thumbs').getElementsByTagName('a');
for (var i = t.length - 1; i > -1; --i)
t[i].className = '';
imgsrc.className = 'on';
return false;
}