ultimate fade-in imagearray passing

[Ike]

1) Script Title: Ultimate Fade-in slideshow (v2.1)

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

3) Describe problem:

Hi, I already have an array of filenames which I want to pass into imagearray. I have tried pointing it direct and also dumping into a string to replicate the original format. Neither works.

What syntax do I require in order to point imagearray to the actual array?


Thanks,

Ike.

*it is probably worth noting that the array is built dynamically and is therefore subject to change.

[Ike]

e.g. where data[x] = file.jpg

.
.
.
<script>
var datastrip = new Array ();
var j = 0;
var images = new String;
for (i = 4; i <= data.length; i++) {
if (data[i] !== "") {
datastrip[j] = data[i];
j++;
images = images + '["' + data[i] + '"], ';
}
}
datastrip.length = datastrip.length - 1;
images = images.replace (', ["undefined"], ','');
</script>


<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="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: "mooddemo1", //ID of blank DIV on page to house Slideshow
dimensions: [100, 100], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [images],
displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

[jscheuer1]

If data is already an array of image filenames, all you need is:

var mygallery=new fadeSlideShow({
wrapperid: "mooddemo1", //ID of blank DIV on page to house Slideshow
dimensions: [100, 100], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: data,
displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

But if data is an array of image objects, you first need to convert:

for (var datanames = [], i = data.length - 1; i > -1; --i){
	datanames[i] = data[i].src;
}

Then:

var mygallery=new fadeSlideShow({
wrapperid: "mooddemo1", //ID of blank DIV on page to house Slideshow
dimensions: [100, 100], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: datanames,
displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

[Ike]

thanks for the reply John.

thats what i thought -

imagearray: datastrip, //(datastrip - 0=abc.jpg, 1=def.jpg etc.) this is text not actual images.

it displays nothing however.

imagearray: [datastrip], //shows the first image in the array only

that is why i tried the string idea but using firebug the format seems the same but again, it does not display.



any ideas?

cheers,

ike.

[jscheuer1]

Oh yeah, thats right. The array of images used by Ultimate Fade is multidimensional. So you need to convert to a multidimensional array. Now, I'm a little confused as to the name of the original array of image filenames, if it is datastrip:

for (var datamulti = [], i = datastrip.length - 1; i > -1; --i){
	datamulti[i] = [datastrip[i]];
}

Then:

var mygallery=new fadeSlideShow({
wrapperid: "mooddemo1", //ID of blank DIV on page to house Slideshow
dimensions: [100, 100], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: datamulti,
displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

Or, if you don't need to preserve the original datastrip array:

for (var  i = datastrip.length - 1; i > -1; --i){
	datastrip[i] = [datastrip[i]];
}

Then:

var mygallery=new fadeSlideShow({
wrapperid: "mooddemo1", //ID of blank DIV on page to house Slideshow
dimensions: [100, 100], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: datastrip,
displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

[Ike]

Sir, you are a gentleman and a scholar. Many thanks.

[Ike]

one more thing though...

i have mutiple slideshows on one page with different wrapper IDs. the idea is that the same array of filenames appear in a different order in each of the instances.

however, randomize does not seem to work - it make no difference if it is set to true or false. i know it does on another page so it must be the way the values are passed as if i copy the array and then run the copy through a Fisher-Yates algorithm then both arrays still appear the same

it looks like the script cannot randomize as the values are in an array rather than being passed as array elements??

is there any way round this without having to use php to populate imagearray through server-side scripting to enable the array elements to be generated in the original format on-the-fly and therefore get randomisation?

[jscheuer1]

I know what you are talking about, but Im not sure if I'm following 100%. I can tell you that if you feed the same array into various instances of Ultimate Fade, it doesn't matter how many times Ultimate Fade shuffles it, in the end it will be in the order of the last shuffle. I think this is what you are experiencing.

Arrays are objects. Just because you feed an array into a different code stream, it is still the same array. The last modification that you make to it will be reflected in all code streams that use that array.

If I'm right about that being your problem (pretty sure), you need to make a fresh copy of the array each time you feed it to Ultimate Fade. There are numerous ways to do that. Perhaps the easiest is to use concat(). Normally it is used to merge arrays:

ar1.concat(ar2);

Which would add ar2 onto the end of ar1 and return the new array. But, since it returns a new array, and doesn't require the second array to contain anything, you could do (following upon one of our our previous examples):

for (var datamulti = [], i = datastrip.length - 1; i > -1; --i){
	datamulti[i] = [datastrip[i]];
}

var mygallery1=new fadeSlideShow({
wrapperid: "mooddemo1", //ID of blank DIV on page to house Slideshow
dimensions: [100, 100], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: datamulti.concat([]),
displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery2=new fadeSlideShow({
wrapperid: "mooddemo2", //ID of blank DIV on page to house Slideshow
dimensions: [100, 100], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: datamulti.concat([]),
displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

Now random is still random though, so it is always possible that with this or any approach that randomizes a copy of the array or makes a new random array of the same contents, either way you go about it, it could happen that two instances could turn out the same. But this is less likely the more images are involved, still it can happen. However, without making copies somewhere along the way, if you are just shuffling the same array over and over, it will always be the same in the end, so doing it as I describe is a big improvement.

But, in light of that, what you might want to do (if there are enough images involved) is make your multidimensional array, shuffle it, then split it up into 2, 3 or more arrays, however many you need if there are enough images to support this approach, then feed one each of these smaller arrays into each instance of the slide show you are creating for the page. If this interests you, it isn't too hard to work out, let me know. But, as I say, the number of images becomes important. Too few images, and this approach just won't be all that interesting to your users.

[Ike]

I can tell you that if you feed the same array into various instances of Ultimate Fade, it doesn't matter how many times Ultimate Fade shuffles it, in the end it will be in the order of the last shuffle. I think this is what you are experiencing.

yep, that was the issue.

for (var datamulti = [], i = datastrip.length - 1; i > -1; --i){
	datamulti[i] = [datastrip[i]];
}

var mygallery1=new fadeSlideShow({
wrapperid: "mooddemo1", //ID of blank DIV on page to house Slideshow
dimensions: [100, 100], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: datamulti.concat([]),

yep, a null concat did the job (i think, currently running on dev images but seems to do the job). a little repitition is acceptable - like you say 'random' will sometimes give that result.

But, in light of that, what you might want to do (if there are enough images involved) is make your multidimensional array, shuffle it, then split it up into 2, 3 or more arrays, however many you need if there are enough images to support this approach, then feed one each of these smaller arrays into each instance of the slide show you are creating for the page. If this interests you, it isn't too hard to work out, let me know. But, as I say, the number of images becomes important. Too few images, and this approach just won't be all that interesting to your users.

so this is a sort of fisher-yates type approach then. it sounds good but as only 9 images are guarenteed to be collected i'm not sure.

the ideal would be to get a different image to appear in a different instance for any 9 of the images available simultaneously and then have the positions change on each fade-out/in. however, i have no idea how it would be possible to enforce that and expect it would be easier to build a purpose-built solution!

if you have any idea on that then great, but as i say i think it would require an enormous amount of work so the current implementation will probably have to suffice for now.

thanks again John.

ike.

[jscheuer1]

Well, as far as code repetition goes, if you are making otherwise identical slide shows, you may loop:

var galleries;
(function(){
var i, datamulti = [];
for (i = datastrip.length - 1; i > -1; --i){
	datamulti[i] = [datastrip[i]];
}

for(i = 0, galleries = []; i < 5; ++i){

galleries[i]=new fadeSlideShow({
wrapperid: "mooddemo" + i, //ID of blank DIV on page to house Slideshow
dimensions: [100, 100], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: datamulti.concat([]),
displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

}
})();

This will give you 4 shows that would be sent to four divisons:

<div id="mooddemo0"></div>
<div id="mooddemo1"></div>
<div id="mooddemo2"></div>
<div id="mooddemo3"></div>

These divisions need not all be placed one right after the other though.

Note: I've also added a self executing anonymous function to protect our variables, placing only 'galleries' outside it so that a global reference to each gallery instance will still exist. I'll have to give the idea of a unique but otherwise apparently random sort order to each show's array more thought. I can say that as the number of images decreases and/or the number of shows increases, there will always come a point mathematically where one or more shows would have to duplicate the order in another show or shows.