Full Screen Slideshow - Message possible while loading images?

[zorbas2]

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]

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]

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]

Please guys! No way to do that?

[zorbas2]

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]

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]

That works like a charm!!

THANK YOU!!!