PDA

View Full Version : 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):


<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:


#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):


<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:


.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):


<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:


<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:



<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:


<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:


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

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

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

Do this:


<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):



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!:D

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?

jscheuer1
11-24-2009, 03:26 PM
Yes, all of your URL's/URI's mentioned as part of or as assigned by script to src or href attributes for scripts, images, links, stylesheets, all or some of these could potentially be affected. Port 80 is the default port. If another one is used, it must sometimes be indicated in some spots in other code, and/or removed from values in code where it might appear as part of a fetched object's value like location.href (not that one specifically I don't believe, but possibly, and possibly others).

All that said, it may be as simple as changing (and similar):


http://localhost/whatever

to:


http://localhost:8080/whatever

or to:


http://localhost:80/whatever

or even just to:


/whatever

Generally none of this would be an issue if the page is live on the web. Then you can (would have to use, or a path that pointed to the actual server) just use:


/whatever

Come to think of it though, if it says localhost and is being viewed from a remote machine, that would probably point to the remote machine, not to the host computer.

brergo
11-24-2009, 04:47 PM
Ah ha! Rookie mistake. That makes perfect sense. It wasn't able to locate the images so nothing displayed.

Thanks yet again for your excellent assistance John.

brergo
12-09-2009, 10:28 PM
A new twist in my slideshow saga. Instead of using the div's, I'd like to put the slideshow in a table. I had done it a while ago with an older version of the script (see code below). I was wondering if you could help adapt the newer version of the script to the table? Part of the issue is that in the old version, the height,width, etc. were set up in the table and now we've set them up in the script itself.

Here is the script as it was set up:


<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["thumbs/1.jpg", "", ""] //plain image syntax
fadeimages[1]=["thumbs/2.jpg", "", ""] //image with link syntax
fadeimages[2]=["thumbs/3.jpg", "", "_new"] //image with link and target syntax
fadeimages[3]=["thumbs/4.jpg", "", "_new"] //image with link and target syntax
fadeimages[4]=["thumbs/5.jpg", "", "_new"] //image with link and target syntax

var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["thumbs/6.jpg", "", ""] //plain image syntax
fadeimages2[1]=["thumbs/7.jpg", "", ""] //image with link syntax
fadeimages2[2]=["thumbs/8.jpg", "", "_new"] //image with link and target syntax
fadeimages2[3]=["thumbs/9.jpg", "", "_new"] //image with link and target syntax
fadeimages2[4]=["thumbs/10.jpg", "", "_new"] //image with link and target syntax
var fadeimages3=new Array() //2nd array set example. Remove or add more sets as needed. ETC,ETC...


And here is the code for the table:


<td width="342" valign="top"><br />
<table width="217" height="168" align="center" cellpadding="2" cellspacing="0">
<tr>
<td align="center"><table border="1" bordercolor="#A52E34">
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 90, 90, 0, 3000, 1, "R")


</script></td>
</tr>
</table></td>

<td align="center" valign="middle"><table border="1" bordercolor="#A52E34">
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 90, 90, 0, 3500, 1, "R")


</script></td>
</tr>
</table></td>
<td><table border="1" align="center" bordercolor="#A52E34">
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages3, 90, 90, 0, 2900, 1, "R")


</script></td>

</tr>
</table></td>
</tr>
<tr>
<td><table border="1" align="center" bordercolor="#A52E34">
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages4, 90, 90, 0, 3300, 1, "R")


</script></td>
</tr>

</table></td>
<td><table border="1" align="center" bordercolor="#A52E34">
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages5, 90, 90, 0, 2900, 1, "R")


</script></td>
</tr>
</table></td>
<td><table border="1" align="center" bordercolor="#A52E34">
<tr>

<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages6, 90, 90, 0, 3700, 1, "R")


</script></td>
</tr>
</table></td>
</tr>
<tr>
<td><table border="1" align="center" bordercolor="#A52E34">
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages7, 90, 90, 0, 4000, 1, "R")


</script></td>

</tr>
</table></td>
<td><table border="1" align="center" bordercolor="#A52E34">
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages8, 90, 90, 0, 4400, 1, "R")


</script></td>
</tr>
</table></td>
<td><table border="1" align="center" bordercolor="#A52E34">

<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages9, 90, 90, 0, 2300, 1, "R")


</script></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

jscheuer1
12-10-2009, 07:20 AM
That really makes no difference. Just set the width and height in the initialization, ex:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--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: ""
})

That's the size the thing will be.