Results 1 to 10 of 10

Thread: ultimate fade-in imagearray passing

  1. #1
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question ultimate fade-in imagearray passing

    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.
    Last edited by Ike; 11-17-2009 at 08:52 PM.

  2. #2
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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: ""
    })
    Last edited by Ike; 11-17-2009 at 08:40 PM.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

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

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

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

    Code:
    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: ""
    })
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Ike (11-18-2009)

  5. #4
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by Ike; 11-17-2009 at 10:25 PM. Reason: connat sepll

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

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

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

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

    Code:
    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: ""
    })
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Ike (11-17-2009)

  8. #6
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

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

  9. #7
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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?
    Last edited by Ike; 11-18-2009 at 12:54 AM. Reason: clarity

  10. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

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

    Code:
    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.
    Last edited by jscheuer1; 11-18-2009 at 04:08 AM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Ike (11-18-2009)

  12. #9
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.

    Code:
    for (var datamulti = [], i = datastrip.length - 1; i > -1; --i){
    	datamulti[i] = [datastrip[i]];
    }
    Code:
    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.

    Quote Originally Posted by jscheuer1 View Post
    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.

  13. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

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

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

    HTML Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •