Add additional p tag to Photo Album script?

[shirster]

1) Script Title: Photo Album

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...photoalbum.htm

3) Describe problem: I'd like to add a <p> tag for the optional description text so that I can style it with css, but I have no idea where to add it. Any help appreciated !

Thanks !
Shirley

[jscheuer1]

First of all, all text appearing in the description can be styled using this hook:

.slideshow { /*CSS for DIV containing each image*/
float: left;
width: 200px;
height: 270px;
}

In the stylesheet, for example:

.slideshow { /*CSS for DIV containing each image*/
float: left;
width: 200px;
height: 270px;
text-align:center;
font-family:arial, sans-serif;
font-size:90%;
}

If you add some style in there that has an adverse effect upon the image's appearance, it can almost always be negated here:

.slideshow img { 
width: 174px;
height: 146px;
}

If that is enough, then it is better not to add a <p> element. If you have to add an element, a <div> or even a <span> would probably be better choices. It is in the function buildimage(i) that you can add one of these:

function buildimage(i){
var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" target="'+href_target+'">' : ""
tempcontainer+='<img src="'+galleryarray[i][0]+'" border="1" title="'+galleryarray[i][1]+'">'
tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
return tempcontainer
}

To add a span change it to:

tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/><span>'+galleryarray[i][2]+'<\/span>' : tempcontainer

To add a division, use (note - the br tag is removed as a div will add a linebreak of its own):

tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<div>'+galleryarray[i][2]+'<\/div>' : tempcontainer

The style hooks for these would be:

.slideshow span { 
style rules here
}

and:

.slideshow div { 
style rules here
}

respectively.