Add additional p tag to Photo Album script?

[shirster]

1) Script Title: Photo Album

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/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.