PDA

View Full Version : Simple Controls Gallery v1.4: preload from given index



mrechte
11-25-2011, 08:52 AM
1) Script Title: Simple Controls Gallery v1.4

2) Script URL (on DD): www.dynamicdrive.com/dynamicindex4/simplegallery.htm

3) Describe problem: I have a gallery containing many pictures. Before entering the galley, user has a preview (thumbnail) of the gallery and click on the pictures he/she wishes to view first. To allow this I had initially used the following code:

oninit:function() { //event that fires when gallery has initialized/ ready to run
this.navigate({{ index }})
},
Remark: {{ index }} is a template tag that will be replaced by the actual index value at runtime.

It works OK except that the picture may take time to appear because the scripts loads the pictures in this index order.

I found a similar thread (http://www.dynamicdrive.com/forums/archive/index.php/t-42454.html) on that matter but it did not solve the loading order problem.

I am a nut in JavaScript coding, but I did the following modification that fulfil my request:

1) introduces a new variable when constructing the class instance:
curimage: {{ index }}, // starting image (preloaded first)

2) in the js script, change the line from/ to
setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0

setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : setting.curimage

3) split the loading code into 2 portions to start from the requested image:
for (var i=setting.curimage; 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
}
})
}
for (var i=0; i<setting.curimage; 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
}
})
}

May be v1.5 could make provision for taking into consideration that feature.

Thanks