Jquery Slideshow - Want Random But Need To Start With Same Image

so i found this amazing jQuery slideshow called Skitter. it's awesome! so i implemented it in my latest project. i got it @ http://thiagosf.net/projects/jquery/skitter/#documentati

Solution 1:

To the best of my knowledge, that isn't a functionality of the Skitter script. However, you can easily add it. Start by opening up the jquery.skitter.js file (it will be hard to make changes to the .min.js file you're using now, and you can always minimize it later on).

Find the following line:

if (this.settings.show_randomly) this.settings.images_links.sort(function(a,b) {
    returnMath.random() - 0.5;
});

Immediately after that, add this:

/* START INITIAL FIXED IMAGE MOD */if (this.settings.show_randomly) { /* Only use a fixed initial image if show_randomly is enabled *//* The following function is used to move an item in an array from fromIndex to toIndex */Array.prototype.move = function(fromIndex, toIndex) {
        this.splice(toIndex, 0, this.splice(fromIndex, 1)[0]);
    };

    initialIndex = 0;

    /* The following function finds the desired initial image and stores it's location */
    $.each(this.settings.images_links, function(index, item) {
        if (item[1].slice(0,9) == "[initial]") initialIndex = index;
    });

    this.settings.images_links[initialIndex][1].replace("[initial]", ""); /* Removes the [initial] tag so the link works properly */this.settings.images_links.move(initialIndex, 0); /* Move it to the front of the array so it's displayed first */
}
/* END INITIAL FIXED IMAGE MOD */

Then, to declare an initial (start) image, simply add [initial] to the beginning of the href attribute of the desired image. The following example will always start off with images/003.jpg, assuming you have show_randomly enabled in the script options.

<divclass="box_skitter box_skitter_large"><ul><li><ahref="#cube"><imgsrc="images/001.jpg"class="cube" /></a><divclass="label_text"><p>cube</p></div></li><li><ahref="#cubeRandom"><imgsrc="images/002.jpg"class="cubeRandom" /></a><divclass="label_text"><p>cubeRandom</p></div></li><li><ahref="[initial]#block"><imgsrc="images/003.jpg"class="block" /></a><divclass="label_text"><p>block</p></div></li><li><ahref="#cubeStop"><imgsrc="images/004.jpg"class="cubeStop" /></a><divclass="label_text"><p>cubeStop</p></div></li><li><ahref="#cubeHide"><imgsrc="images/005.jpg"class="cubeHide" /></a><divclass="label_text"><p>cubeHide</p></div></li><li><ahref="#cubeSize"><imgsrc="images/006.jpg"class="cubeSize" /></a><divclass="label_text"><p>cubeSize</p></div></li></ul></div>

If you want to minimize this again, there are several Internet services, such as http://www.minifyjavascript.com, http://refresh-sf.com/yui, or http://jscompress.com.