randomize image slideshow

[TwanZ]

Hi all!

First of all, I know nothing of JavaScript. That's why I ended up using the scripts offered here. I'm using the following script for an image slideshow:
http://www.dynamicdrive.com/dynamici...plegallery.htm

My question is: How can I make the images appear in random order?

I found 'randomize: true' somewhere on the internet but it doesn't seem to have any effect.

On a side note: I tried to use 'presist: true' and it worked fine in IE but not in chrome. Any solution to that?

Tnx in advance

Kind regards,
Twan

[vwphillips]

changes to function simpleGallery shown in red

function simpleGallery(settingarg){
	this.setting=settingarg
	settingarg=null
	var setting=this.setting
    setting.random===true?setting.imagearray=simpleGallery.routines.shuffle(setting.imagearray):null;
	setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height)
	setting.fadeduration=parseInt(setting.fadeduration)
	setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0
	setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
	setting.preloadfirst=(!jQuery.Deferred)? false : (typeof setting.preloadfirst!="undefined")? setting.preloadfirst : true //Boolean on whether to preload all images before showing gallery
	setting.ispaused=!setting.autoplay[0] //ispaused reflects current state of gallery, autoplay[0] indicates whether gallery is set to auto play
	setting.currentstep=0 //keep track of # of slides slideshow has gone through
	setting.totalsteps=setting.imagearray.length*setting.autoplay[2] //Total steps limit: # of images x # of user specified cycles
	setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
	setting.oninit=setting.oninit || function(){}
	setting.onslide=setting.onslide || function(){}
	var preloadimages=[], longestdesc=null, loadedimages=0
	var dfd = (setting.preloadfirst)? jQuery.Deferred() : {resolve:function(){}, done:function(f){f()}} //create real deferred object unless preloadfirst setting is false or browser doesn't support it
	setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
	setting.$loadinggif=(function(){ //preload and ref ajax loading gif
		var loadgif=new Image()
		loadgif.src=simpleGallery_navpanel.loadinggif
		return jQuery(loadgif).css({verticalAlign:'middle'}).wrap('<div style="position:absolute;text-align:center;width:100%;height:100%" />').parent()
	})()
	for (var i=0; i<setting.imagearray.length; i++){  //preload slideshow images
		preloadimages[i]=new Image()
		preloadimages[i].src=setting.imagearray[i][0]
		if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
			setting.longestdesc=setting.imagearray[i][3]
		jQuery(preloadimages[i]).bind('load error', function(){
			loadedimages++
			if (loadedimages==setting.imagearray.length){
				dfd.resolve() //indicate all images have been loaded
			}
		})
	}
	var slideshow=this
	jQuery(document).ready(function($){
		var setting=slideshow.setting
		setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV
		if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
			alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
			return
		}
		setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
			.css({position:'absolute', left:0, top:0})
			.appendTo(setting.$wrapperdiv)
		setting.$loadinggif.css({top:setting.dimensions[1]/2-30}).appendTo(setting.$wrapperdiv) //30 is assumed height of ajax loading gif
		setting.gallerylayers=setting.$gallerylayers.get() //cache stacked DIVs as DOM objects
		setting.navbuttons=simpleGallery.routines.addnavpanel(setting) //get 4 nav buttons DIVs as DOM objects
		if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)
			setting.descdiv=simpleGallery.routines.adddescpanel(setting)
		$(setting.navbuttons).filter('img.navimages').css({opacity:0.8})
			.bind('mouseover mouseout', function(e){
				$(this).css({opacity:(e.type=="mouseover")? 1 : 0.8})
			})
			.bind('click', function(e){
				var keyword=e.target.title.toLowerCase()
				slideshow.navigate(keyword) //assign behavior to nav images
			})
		dfd.done(function(){ //execute when all images have loaded
			setting.$loadinggif.remove()
			setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')})
			setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')})
			slideshow.showslide(setting.curimage) //show initial slide
			setting.oninit.call(slideshow) //trigger oninit() event
			$(window).bind('unload', function(){ //clean up and persist
				$(slideshow.setting.navbuttons).unbind()
				if (slideshow.setting.persist) //remember last shown image's index
					simpleGallery.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)
				jQuery.each(slideshow.setting, function(k){
					if (slideshow.setting[k] instanceof Array){
						for (var i=0; i<slideshow.setting[k].length; i++){
							if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div
								slideshow.setting[k][i].innerHTML=null
							slideshow.setting[k][i]=null
						}
					}
					if (slideshow.setting[k].innerHTML) //catch gallerydesctext div
						slideshow.setting[k].innerHTML=null
					slideshow.setting[k]=null
				})
				slideshow=slideshow.setting=null
			})
		}) //end deferred code
	}) //end jQuery domload
}

new function shuffle below function setCookie shown in red

	setCookie:function(name, value){
		document.cookie = name+"=" + value + ";path=/"
	}, // note commer

   shuffle:function(ary){
    for (var r,t,z0=0;z0<ary.length;z0++){
     r=Math.floor(Math.random()*ary.length);
     t=ary[z0];
     ary[z0]=ary[r];
     ary[r]=t;
    }
    return ary;
   }

new option shown in red

var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", //ID of main gallery container,
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new", "There's nothing like a nice swim in the Summer."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "", ""],
		["http://i30.tinypic.com/531q3n.jpg", "", "", "Eat your fruits, it's good for you!"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", ""]
	],
    random:true, // true = radomise images
	autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run
		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
	},
	onslide:function(curslide, i){ //event that fires after each slide is shown
		//Keyword "this": references current gallery instance
		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	}
})

[jscheuer1]

In the future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread.

You could skip the second code block modifications in the above, and for the first just do:

setting.random && setting.imagearray.sort(function(){return 0.5 - Math.random();});

[TwanZ]

Got it to work. Thanks alot.