Remove Border Image On One Gallery

[NoClue]

1) Script Title: Photo Album script v2.0

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

3) Describe problem:

I am using the above script for a few different galleries. On one gallery I would like to keep the image border, but on another gallery I would like to remove the border. How can I do this? This is the code for the border in the css:

/*CSS for images within an album*/
.photogallery img{
border: 1px solid #393838;
}

Thank you.

[jscheuer1]

In addition to the photogallery class, which applies to all galleries made with this script, each individual gallery also has the id:

photogallery-x

where x is a number from 1 to however many galleries you have on the page. So to set a unique border (none in this case) for just the second gallery:

#photogallery-2 img {
border: none;!important;
}

[NoClue]

Please bear with me.

I see the id using firebug, but where in the code do I add -x the number? Please note that I only have one gallery per page.

Thanks!

[jscheuer1]

With only one gallery per page:

.photogallery img {
border: none;!important;
}

will do nicely. Just make sure to only apply that style to the page(s) where you want no border.

Like say you have a stylesheet that all the pages use. It can have:

.photogallery img { 
border: 1px solid #393838;
}

But then in a separate stylesheet used only by the page(s) where you want no border, have:

.photogallery img {
border: none;!important;
}

Styles cascade, so all pages may have the sheet with the border: 1px solid #393838;. The !important keyword will override it.

[NoClue]

Sorry to bother you again, but I'm using Joomla to build the site and it allows you to link to the css file via the index.php for all the pages. So, is there a way I can add the code directly to the js code or around the images in the js file to remove the border. If it's not possible then I'll just live with it.

Here is the code. Thanks!

-----------------------------------------------

<script type="text/javascript">

//Define your own array to hold the photo album images
//Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

var myportfolioLOGOS=new Array()
myportfolioLOGOS[0]=["../lirva/portfolio/logos/OSP.jpg", "", ""]
myportfolioLOGOS[1]=["../lirva/portfolio/logos/YorkAngels.jpg", "", ""]
myportfolioLOGOS[2]=["../lirva/portfolio/logos/WIBC.jpg", "", ""]
myportfolioLOGOS[3]=["../lirva/portfolio/logos/Troy.jpg", "", ""]

//initiate a photo gallery
//Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])
var thepics=new photogallery(myportfolioLOGOS, 3, 3, '680px', '300px')

//OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
//DELETE everything below to disable
//Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined
thepics.onselectphoto=function(img, link){
if (link!=null) //if this image is hyperlinked
window.open(link.href, "", "width=800, height=600, status=1, resizable=1")
return false //cancel default action when clicking on image, by returning false instead of true
}

</script>