Question

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/#documentation

Is it possible to (and if so, how do I) have the images be randomly displayed BUT always start with a particular one?
For example, say I want the first image that it shows when a user loads the page is a particular one with a welcome message. But then for every image “after” that one, it’s randomized.

I have the “show_randomly: true,” part in the head and my current slide is randomizing successfully. I just hope to have a ‘start’ image.

So from its homepage, I did the “Customize Features” and copy/pasted the code it gave me into the head of my page…

<!-- CSS -->
<link type="text/css" href="scripts/SkitterSlideshow/css/skitter.styles.css"
      media="all" rel="stylesheet" />

<!-- JS -->
<script type="text/javascript" 
      src="scripts/SkitterSlideshow/js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" 
      src="scripts/SkitterSlideshow/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" 
      src="scripts/SkitterSlideshow/js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" 
      src="scripts/SkitterSlideshow/js/jquery.skitter.min.js"></script>

<!-- Init Plugin -->
<script>
        $(document).ready(function() {
            $(".box_skitter_large").skitter({
                animation: "randomSmart", 
                dots: true, 
                preview: true, 
                controls_position: "center", 
                numbers_align: "right", 
                hideTools: true, 
                show_randomly: true, 
                controls: true, 
                interval: 5000,
                velocity: 0.5,
            });
        });
</script>

So like i said, i have a successful slideshow running and it IS randomizing the images. Just need a way to have it always start with one particular image from the list.
THANKS!!!

Answer 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) {
    return Math.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.

<div class="box_skitter box_skitter_large">
    <ul>
        <li><a href="#cube"><img src="images/001.jpg" class="cube" /></a><div class="label_text"><p>cube</p></div></li>
        <li><a href="#cubeRandom"><img src="images/002.jpg" class="cubeRandom" /></a><div class="label_text"><p>cubeRandom</p></div></li>
        <li><a href="[initial]#block"><img src="images/003.jpg" class="block" /></a><div class="label_text"><p>block</p></div></li>
        <li><a href="#cubeStop"><img src="images/004.jpg" class="cubeStop" /></a><div class="label_text"><p>cubeStop</p></div></li>
        <li><a href="#cubeHide"><img src="images/005.jpg" class="cubeHide" /></a><div class="label_text"><p>cubeHide</p></div></li>
        <li><a href="#cubeSize"><img src="images/006.jpg" class="cubeSize" /></a><div class="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.