Ultimate Fade-in slideshow - Image Border

**brergo** · 11-19-2009, 03:05 AM

I too am interested in setting up a border.

I am using the Joomla! CMS and a module that allows one to put Javascript code into a particular module/position on a page. I have gotten the slideshow to work but cannot get a border to display around the entire slideshow. It only displays on the top and the left side of the slideshow (see attached screenshot). Any thoughts on why?

Also, I am trying to arrange a grid of 9 small (90px X 90px) slideshows in a 3 x 3 arrangement (SEE BELOW X's). I would like a small space between the slideshows (maybe 3px) and I am able to easily get 3 slideshows vertically (as shown in attached screenshot), but how can I add 2 more columns next to the first?

X X X

X X X

X X X

Here is the code I am using (I cannot give you a link to the page as it is on my development/test server):

Code:

<html>

<head>

<style type="text/css">
#fadeshow1 .gallerylayer img {
 border: 1px solid #a52e34!important;
}
</style>

<style type="text/css">
#fadeshow2 .gallerylayer img {
 border: 1px solid #a52e34!important;
}
</style>

<style type="text/css">
#fadeshow3 .gallerylayer img {
 border: 1px solid #a52e34!important;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://localhost/jtest/slideshow/fadeslideshow.js">\



/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [90, 90], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://localhost/jtest/slideshow/thumbnail001.png", "", "", "Thumbnail001"],
["http://localhost/jtest/slideshow/thumbnail003.jpg", "", "", "Thumbnail003"],
["http://localhost/jtest/slideshow/thumbnail004.jpg", "", "", "Thumbnail004"],
["http://localhost/jtest/slideshow/thumbnail007.jpg", "", "", "Thumbnail007"],
["http://localhost/jtest/slideshow/thumbnail008.jpg", "", "", "Thumbnail008"],
["http://localhost/jtest/slideshow/thumbnail010.jpg", "", "", "Thumbnail010"],
["http://localhost/jtest/slideshow/thumbnail013.jpg", "", "", "Thumbnail013"],
["http://localhost/jtest/slideshow/thumbnail014.jpg", "", "", "Thumbnail014"],
["http://localhost/jtest/slideshow/thumbnail015.jpg", "", "", "Thumbnail015"],
["http://localhost/jtest/slideshow/thumbnail016.jpg", "", "", "Thumbnail016"],
["http://localhost/jtest/slideshow/thumbnail018.jpg", "", "", "Thumbnail018"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [90, 90], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://localhost/jtest/slideshow/thumbnail019.jpg", "", "", "Thumbnail019"],
["http://localhost/jtest/slideshow/thumbnail020.jpg", "", "", "Thumbnail020"],
["http://localhost/jtest/slideshow/thumbnail021.jpg", "", "", "Thumbnail021"],
["http://localhost/jtest/slideshow/thumbnail023.jpg", "", "", "Thumbnail023"],
["http://localhost/jtest/slideshow/thumbnail024.jpg", "", "", "Thumbnail024"],
["http://localhost/jtest/slideshow/thumbnail026.jpg", "", "", "Thumbnail026"],
["http://localhost/jtest/slideshow/thumbnail030.jpg", "", "", "Thumbnail030"],
["http://localhost/jtest/slideshow/thumbnail032.jpg", "", "", "Thumbnail032"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [90, 90], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://localhost/jtest/slideshow/thumbnail032.jpg", "", "", "Thumbnail032"],
["http://localhost/jtest/slideshow/thumbnail018.jpg", "", "", "Thumbnail018"],
["http://localhost/jtest/slideshow/thumbnail030.jpg", "", "", "Thumbnail030"],
["http://localhost/jtest/slideshow/thumbnail016.jpg", "", "", "Thumbnail016"],
["http://localhost/jtest/slideshow/thumbnail001.jpg", "", "", "Thumbnail001"],
["http://localhost/jtest/slideshow/thumbnail019.jpg", "", "", "Thumbnail019"],
["http://localhost/jtest/slideshow/thumbnail003.jpg", "", "", "Thumbnail003"],
["http://localhost/jtest/slideshow/thumbnail020.jpg", "", "", "Thumbnail020"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2750, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


</script>
</head>

<body>

<div id="fadeshow1"></div>

<div id="fadeshow2"></div>

<div id="fadeshow3"></div>

</body>

**jscheuer1** · 11-19-2009, 11:20 AM

After experimenting with this a bit I've found that if the image is significantly smaller than the slide show dimensions, this works. But if the image is the same as or close to the dimensions of the slide show, not.

In cases where image and slide show dimensions are the same, you need to do it like so:

Code:

#fadeshow1 .gallerylayer img {
 border: 1px solid #f00!important;
 border-top-width: 0!important;
 border-left-width: 0!important;
}
#fadeshow1 .gallerylayer {
 background-color:#f00!important;
}

AND increase the slide show dimensions by 2.

If there are a mixture of images sizes, one should increase the slide show dimensions enough to get the border to appear for all images and set the border for the images all around, and the background for the gallerylayer class to the background color outside the slide show.

**brergo** · 11-19-2009, 06:39 PM

Thanks John, I will try that. Any thoughts on the grid arrangement?

**brergo** · 11-20-2009, 12:01 AM

Excellent! Worked perfectly John. Now if you could only help me out with adding 2 additional columns to complete the 3 x 3 grid, that'd be awesome!

Brian

**jscheuer1** · 11-20-2009, 01:42 AM

The basic markup for a 3x3 could be (you could also use a table, but that is not recommended as it slows load times and can actually cause errors in some browsers):

HTML Code:

<div class="showcontainer">
<div id="fadeshow1" class="fadeshow"></div>

<div id="fadeshow2" class="fadeshow"></div>

<div id="fadeshow3" class="fadeshow"></div>
</div>
<div class="showcontainer">
<div id="fadeshow4" class="fadeshow"></div>

<div id="fadeshow5" class="fadeshow"></div>

<div id="fadeshow6" class="fadeshow"></div>
</div>
<div class="showcontainer">
<div id="fadeshow7" class="fadeshow"></div>

<div id="fadeshow8" class="fadeshow"></div>

<div id="fadeshow9" class="fadeshow"></div>
</div>
<div class="cleardiv"></div>

The basic style rules (to be added to your style section) would be:

Code:

.showcontainer {
 float: left;
}
.cleardiv {
 clear: left;
}
.fadeshow {
 margin: 2px;
}

Now, to get the exact spacing you want may take some experimentation, I'd suggest just trying the above to start though.

**brergo** · 11-20-2009, 01:55 AM

I'm not too sure on exact placement of the additional code. Here is the script as I have it so far (including the red borders you did up for me):

Code:

<html>

<head>

<style type="text/css">
#fadeshow1 .gallerylayer img {
 border: 1px solid #f00!important;
 border-top-width: 0!important;
 border-left-width: 0!important;
}
#fadeshow1 .gallerylayer {
 background-color:#f00!important;
}
</style>

<style type="text/css">
#fadeshow2 .gallerylayer img {
 border: 1px solid #f00!important;
 border-top-width: 0!important;
 border-left-width: 0!important;
}
#fadeshow2 .gallerylayer {
 background-color:#f00!important;
}
</style>

<style type="text/css">
#fadeshow3 .gallerylayer img {
 border: 1px solid #f00!important;
 border-top-width: 0!important;
 border-left-width: 0!important;
}
#fadeshow3 .gallerylayer {
 background-color:#f00!important;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://localhost/jtest/slideshow/fadeslideshow.js">\



/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [92, 92], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://localhost/jtest/slideshow/thumbnail001.png", "", "", "Thumbnail001"],
["http://localhost/jtest/slideshow/thumbnail003.jpg", "", "", "Thumbnail003"],
["http://localhost/jtest/slideshow/thumbnail004.jpg", "", "", "Thumbnail004"],
["http://localhost/jtest/slideshow/thumbnail007.jpg", "", "", "Thumbnail007"],
["http://localhost/jtest/slideshow/thumbnail008.jpg", "", "", "Thumbnail008"],
["http://localhost/jtest/slideshow/thumbnail010.jpg", "", "", "Thumbnail010"],
["http://localhost/jtest/slideshow/thumbnail013.jpg", "", "", "Thumbnail013"],
["http://localhost/jtest/slideshow/thumbnail014.jpg", "", "", "Thumbnail014"],
["http://localhost/jtest/slideshow/thumbnail016.jpg", "", "", "Thumbnail016"],
["http://localhost/jtest/slideshow/thumbnail018.jpg", "", "", "Thumbnail018"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [92, 92], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://localhost/jtest/slideshow/thumbnail019.jpg", "", "", "Thumbnail019"],
["http://localhost/jtest/slideshow/thumbnail020.jpg", "", "", "Thumbnail020"],
["http://localhost/jtest/slideshow/thumbnail023.jpg", "", "", "Thumbnail023"],
["http://localhost/jtest/slideshow/thumbnail024.jpg", "", "", "Thumbnail024"],
["http://localhost/jtest/slideshow/thumbnail026.jpg", "", "", "Thumbnail026"],
["http://localhost/jtest/slideshow/thumbnail030.jpg", "", "", "Thumbnail030"],
["http://localhost/jtest/slideshow/soft_touc_red_sm.png.jpg", "", "", "Soft Touch Red"],
["http://localhost/jtest/slideshow/28-MG-22.png", "", "", ""],
["http://localhost/jtest/slideshow/fine_high_shine_grey642.png", "", "", ""],
["http://localhost/jtest/slideshow/thumbnail032.jpg", "", "", "Thumbnail032"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [92, 92], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://localhost/jtest/slideshow/soft_touch_yellow_sm.png", "", "", ""],
["http://localhost/jtest/slideshow/thumbnail015.jpg", "", "", "Thumbnail015"],
["http://localhost/jtest/slideshow/thumbnail017.jpg", "", "", "Thumbnail017"],
["http://localhost/jtest/slideshow/diacool408.jpg", "", "", ""],
["http://localhost/jtest/slideshow/soft_touch_blue_sm.png", "", "", ""],
["http://localhost/jtest/slideshow/diacool406.png", "", "", ""],
["http://localhost/jtest/slideshow/34-MG-22.png", "", "", ""],
["http://localhost/jtest/slideshow/thumbnail021.jpg", "", "", "Thumbnail021"],
["http://localhost/jtest/slideshow/50_M-wm.png", "", "", ""],
["http://localhost/jtest/slideshow/thumbnail020.jpg", "", "", "Thumbnail020"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2750, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


</script>
</head>

<body>

<div id="fadeshow1"></div>

<div id="fadeshow2"></div>

<div id="fadeshow3"></div>

</body>

Not being a big code guy, I would probably put the HTML div's at the bottom in the <body> section to replace the existing div id's, correct?

As far as the style rules, am I replacing anything or just adding? Where exactly would the style rules go? I'm assuming the top part of the script?

Thanks again John, you are really a great help!

Brian

**jscheuer1** · 11-20-2009, 05:39 AM

First of all, let's simplify. You only need one style section. On top of that fact, if all of your shows require the same style, you may do it like so:

Code:

<style type="text/css">
.gallerylayer img {
 border: 1px solid #f00!important;
 border-top-width: 0!important;
 border-left-width: 0!important;
}
.gallerylayer {
 background-color:#f00!important;
}
</style>

That's in place of all of this stuff:

Code:

<style type="text/css">
#fadeshow1 .gallerylayer img {
 border: 1px solid #f00!important;
 border-top-width: 0!important;
 border-left-width: 0!important;
}
#fadeshow1 .gallerylayer {
 background-color:#f00!important;
}
</style>

<style type="text/css">
#fadeshow2 .gallerylayer img {
 border: 1px solid #f00!important;
 border-top-width: 0!important;
 border-left-width: 0!important;
}
#fadeshow2 .gallerylayer {
 background-color:#f00!important;
}
</style>

<style type="text/css">
#fadeshow3 .gallerylayer img {
 border: 1px solid #f00!important;
 border-top-width: 0!important;
 border-left-width: 0!important;
}
#fadeshow3 .gallerylayer {
 background-color:#f00!important;
}
</style>

Once we've simplified that part as I'm outlining, we can add to it so that you have:

Code:

<style type="text/css">
.gallerylayer img {
 border: 1px solid #f00!important;
 border-top-width: 0!important;
 border-left-width: 0!important;
}
.gallerylayer {
 background-color:#f00!important;
}
.showcontainer {
 float: left;
}
.cleardiv {
 clear: left;
}
.fadeshow {
 margin: 2px;
}
</style>

Now we are done with the style for the time being (we may still want to tweak it later). Next, the markup. Were you had:

HTML Code:

<div id="fadeshow1"></div>

<div id="fadeshow2"></div>

<div id="fadeshow3"></div>

Do this:

HTML Code:

<div class="showcontainer">
<div id="fadeshow1" class="fadeshow"></div>

<div id="fadeshow2" class="fadeshow"></div>

<div id="fadeshow3" class="fadeshow"></div>
</div>
<div class="showcontainer">
<div id="fadeshow4" class="fadeshow"></div>

<div id="fadeshow5" class="fadeshow"></div>

<div id="fadeshow6" class="fadeshow"></div>
</div>
<div class="showcontainer">
<div id="fadeshow7" class="fadeshow"></div>

<div id="fadeshow8" class="fadeshow"></div>

<div id="fadeshow9" class="fadeshow"></div>
</div>
<div class="cleardiv"></div>

It will key off of the new styles. All that remains is for you to make up initializations for fadeshow4 through fadeshow9 (you already have the first three):

Code:

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [92, 92], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://localhost/jtest/slideshow/thumbnail001.png", "", "", "Thumbnail001"],
["http://localhost/jtest/slideshow/thumbnail003.jpg", "", "", "Thumbnail003"],
["http://localhost/jtest/slideshow/thumbnail004.jpg", "", "", "Thumbnail004"],
["http://localhost/jtest/slideshow/thumbnail007.jpg", "", "", "Thumbnail007"],
["http://localhost/jtest/slideshow/thumbnail008.jpg", "", "", "Thumbnail008"],
["http://localhost/jtest/slideshow/thumbnail010.jpg", "", "", "Thumbnail010"],
["http://localhost/jtest/slideshow/thumbnail013.jpg", "", "", "Thumbnail013"],
["http://localhost/jtest/slideshow/thumbnail014.jpg", "", "", "Thumbnail014"],
["http://localhost/jtest/slideshow/thumbnail016.jpg", "", "", "Thumbnail016"],
["http://localhost/jtest/slideshow/thumbnail018.jpg", "", "", "Thumbnail018"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [92, 92], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://localhost/jtest/slideshow/thumbnail019.jpg", "", "", "Thumbnail019"],
["http://localhost/jtest/slideshow/thumbnail020.jpg", "", "", "Thumbnail020"],
["http://localhost/jtest/slideshow/thumbnail023.jpg", "", "", "Thumbnail023"],
["http://localhost/jtest/slideshow/thumbnail024.jpg", "", "", "Thumbnail024"],
["http://localhost/jtest/slideshow/thumbnail026.jpg", "", "", "Thumbnail026"],
["http://localhost/jtest/slideshow/thumbnail030.jpg", "", "", "Thumbnail030"],
["http://localhost/jtest/slideshow/soft_touc_red_sm.png.jpg", "", "", "Soft Touch Red"],
["http://localhost/jtest/slideshow/28-MG-22.png", "", "", ""],
["http://localhost/jtest/slideshow/fine_high_shine_grey642.png", "", "", ""],
["http://localhost/jtest/slideshow/thumbnail032.jpg", "", "", "Thumbnail032"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [92, 92], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://localhost/jtest/slideshow/soft_touch_yellow_sm.png", "", "", ""],
["http://localhost/jtest/slideshow/thumbnail015.jpg", "", "", "Thumbnail015"],
["http://localhost/jtest/slideshow/thumbnail017.jpg", "", "", "Thumbnail017"],
["http://localhost/jtest/slideshow/diacool408.jpg", "", "", ""],
["http://localhost/jtest/slideshow/soft_touch_blue_sm.png", "", "", ""],
["http://localhost/jtest/slideshow/diacool406.png", "", "", ""],
["http://localhost/jtest/slideshow/34-MG-22.png", "", "", ""],
["http://localhost/jtest/slideshow/thumbnail021.jpg", "", "", "Thumbnail021"],
["http://localhost/jtest/slideshow/50_M-wm.png", "", "", ""],
["http://localhost/jtest/slideshow/thumbnail020.jpg", "", "", "Thumbnail020"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2750, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

In other words, it is most likely simpler than you imagine. Feel free to ask additional questions though.

**brergo** · 11-20-2009, 12:37 PM

Awesome John, I will work on this later today and post back. Thanks again.

Brian

**brergo** · 11-21-2009, 02:51 AM

Well, here is a look at what I've come up after some minor tweaks (with thanks to John)...see attached screenshot.

Thanks again!

**brergo** · 11-24-2009, 02:17 PM

So all of the sudden the slideshow stopped working. I didn't change any of the code and I have no idea why. The only hint was an error that appeared once that said "Error in fadeshow is undefined - Line 195"

It appears that this happened after I changed my Apache listening port to 8080 to accommodate a client who needs to access the site to preview it from outside of my network. Once I changed the port back to 80 the slideshow seems to work again. Does it make sense that a port change could have caused an issue with the slideshow?

Thread: Ultimate Fade-in slideshow - Image Border

Thread Tools

Search Thread

Ultimate Fade-in slideshow - Image Border

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions