PDA

View Full Version : Full Screen Slideshow - Message possible while loading images?



zorbas2
01-22-2015, 04:39 PM
I am using the fpslideshow for example at http://www.stoupa.de/de/unterkunft/apartments/alkyoni.php
Is it possible to display a message like for examle 'Images are looading - please be patient...' while the images are loading?

Let me know how to do that. Thanks in advance!!

Beverleyh
01-22-2015, 04:54 PM
Try optimising your images first http://tools.dynamicdrive.com/imageoptimizer/

The slideshow images total 1.45MB at present, but if you optimise them, you'll get them down to about 800kb. And at almost half the size, it means that they'll load in almost twice as fast.

zorbas2
01-22-2015, 05:47 PM
Thank you for your quick reply!
I know my images are not well optimised. But even with optimised images the visitor would have to wait a couple of seconds - especially on slower connections...
I believe it can't be very difficult to add such a message. I just don't know how (where) to do it. Can anyone help regarding this?

zorbas2
01-23-2015, 10:58 AM
Please guys! No way to do that?

zorbas2
01-23-2015, 11:04 AM
Try optimising your images first http://tools.dynamicdrive.com/imageoptimizer/

The slideshow images total 1.45MB at present, but if you optimise them, you'll get them down to about 800kb. And at almost half the size, it means that they'll load in almost twice as fast.

I tried your optimiser.
When trying to optimise them to about 50% of the original file size the image quality decreases significantly. So I am staying with my beloved Gimp...

vwphillips
01-23-2015, 11:11 AM
the message HTML



<div id="loadwindow" style="position:absolute;z-Index:101;left:100px;top:100px;width:200px;height:100px;background-Color:red" >loading message</div>


additional option


fullpageslideshow.init({ //initialize script
imagesobj: fpslideshowvar, //no need to change. Object variable referencing images as generated inside "fpslideshow.php"
thumbdir: 'thumbnails', //sub directory directly below main images directory containing the thumbnail versions. Image names should be same as main images.
sortby: 'date', //sort by "date" or "filename"
loadingid:'loadwindow',
fadeduration: 1000,
thumbdimensions:[30,30],
autorotate:{enabled:true, pause:4000}
})


modify function (change in red)


init:function(options){
this.setting=$.extend({}, this.setting, options)
this.setting.autorotate.pause+=this.setting.fadeduration
var images=options.imagesobj.images || options.imagesobj, imagesarr=this.imagesarr
images.pop()
if (options.imagesobj.baseurl){ //if images are auto retrieved using PHP
this.setting.thumbdir=options.imagesobj.baseurl+this.setting.thumbdir+"/" //augment thumbnail directory with baseurl to form full URL to thumbs dir
if (options.sortby=="date")
images.sort(function(a,b){return new Date(b[2])-new Date(a[2])})
else{
images.sort(function(a,b){ //sort by file name
var filea=a[1].toLowerCase(), fileb=b[1].toLowerCase()
return (filea<fileb)? -1 : (filea>fileb)? 1 : 0
})

}
}
var thumbsarr=['<ul class="fpthumbs" style="z-index:1001">']
for (var i=0; i<images.length; i++){
imagesarr[i]=new Image()
imagesarr[i].src=(options.imagesobj.baseurl)? options.imagesobj.baseurl+images[i][1] : images[i]
imagesarr[i]._index=i
thumbsarr.push('<li></li>')
}
thumbsarr.push('</ul>')
var d=document.getElementById(options.loadingid);
if (d&&window['preload']){
preload(imagesarr,d)
}
jQuery(function($){
var slideshow=fullpageslideshow
var layers=$('<div style="position:absolute;left:0;top:0; width:100%; height:100%;overflow:hidden;background:black;" />').clone().andSelf().appendTo(document.body)
var thumbs=$(thumbsarr.join('')).appendTo(document.body)
thumbs=thumbs.find('li')
thumbs.each(function(i){
var $thumb=$(this)
this._index=i
$thumb.css({left: 60*i+20})
$thumb.click(function(){
clearTimeout(slideshow.setting.rotatetimer)
slideshow.changeimage(this._index)
})
})
slideshow.layers=layers
slideshow.thumbs=thumbs
slideshow.templayer=$('<div style="position:absolute;left:-5000px;top:-5000px;visibility:hidden" />').appendTo(document.body)
slideshow.signalcomplete()
$(window).resize(function(){
if (imagesarr[slideshow.curimage].complete==true)
var cssattr=slideshow.scaleimage(imagesarr[slideshow.curimage])
slideshow.layers.eq(slideshow.layerorder.fg).find('img').css(cssattr)
})
})
}


new function



function preload(a,d){
clearTimeout(preload[d.id]);
for (var z0=0;z0<a.length;z0++){
if (a[z0].width<40){
return preload[d.id]=setTimeout(function(){ preload(a,d); },200);
}
}
d.style.visibility='hidden';
}

zorbas2
01-23-2015, 11:54 AM
That works like a charm!!

THANK YOU!!!