Craig Hopson Posted April 14, 2012 Share Posted April 14, 2012 (edited) Hi i use this script to slideshow all pictures in a folder but i want it to pick up if a new photo is uploaded with out having to refresh the browser anyone have any ideas var fullpageslideshow={imagesarr:[], layers:null, thumbs:null, layerorder:{fg:1, bg:0}, curimage:0, previmage:0,setting:{fadeduration:1000, autorotate:{enabled:true, pause:3000}, thumbdimensions:[50,50], sortby:'date', thumbdir:''},signalcomplete:function(){ var slideshow=this, imagesarr=this.imagesarr, thumbs=this.thumbs, templayer=this.templayer, setting=this.setting, imagecount=0 function createthumbnail(i, imageref, thumbref){ var thumbimgsrc=(setting.imagesobj.baseurl)? setting.thumbdir+setting.imagesobj.images[i][1] : imageref.src thumbref.html('<img src="'+thumbimgsrc+'" style="width:'+setting.thumbdimensions[0]+'px;height:'+setting.thumbdimensions[1]+'px" />') thumbref.find('img:eq(0)').css({opacity:0.3}) } function process(i, imageref, thumbref){ templayer.append('<img src="'+imageref.src+'" />') var tempimage=templayer.find('img:last') imageref._specs={w:tempimage.width(), h:tempimage.height()} thumbref.find('img:eq(0)').css({opacity:1}) if (i==slideshow.curimage){ //if first image has loaded slideshow.changeimage(slideshow.curimage, true) if (setting.autorotate.enabled) setting.rotatetimer=setInterval(function(){slideshow.cycleimage()}, setting.autorotate.pause) } imagecount++ if (imagecount==imagesarr.length){ templayer.remove() } } for (var i=0; i<imagesarr.length; i++){ createthumbnail(i, imagesarr[i], thumbs.eq(i)) if (imagesarr[i].complete){ process(i, imagesarr[i], thumbs.eq(i)) } else{ imagesarr[i].onload=function(){ var pos=this._index process(pos, this, thumbs.eq(pos)) } } }},scaleimage:function(imageref){ var od=imageref._specs, windoww=$(window).width(), windowh=$(window).height() var neww=(od.w>od.h)? windoww : Math.round(windowh*od.w/od.h) var newh=Math.round(neww*od.h/od.w) if (neww>windoww){ neww=windoww newh=Math.round(neww*od.h/od.w) } else if (newh>windowh){ newh=windowh neww=Math.round(newh*od.w/od.h) } var xpos=(neww>=windoww)? 0 : windoww/2-neww/2 var ypos=(newh>=windowh)? 0 : windowh/2-newh/2 return {width:neww+'px', height:newh+'px', left:xpos+'px', top:ypos+'px', position:'absolute'}},changeimage:function(i, forcechange){ var layers=this.layers, imagesarr=this.imagesarr, layerorder=this.layerorder, thumbs=this.thumbs, setting=this.setting var fglayer=layers.eq(layerorder.fg), bglayer=layers.eq(layerorder.bg) if (!imagesarr[i].complete && typeof forcechange=="undefined") return bglayer.stop(true,true).css({opacity:1, zIndex:999}).empty().append($('<img src="'+imagesarr[i].src+'" />').css(this.scaleimage(imagesarr[i]))) //update background layer's image fglayer.css({opacity:1, zIndex:1000}).stop(true,true).animate({opacity:0}, setting.fadeduration, function(){ bglayer.css('z-index', 1000) fglayer.css('z-index', 999) }) layerorder.fg=layerorder.fg==1? 0 : 1 layerorder.bg=layerorder.bg==1? 0 : 1 this.previmage=this.curimage this.curimage=i thumbs.eq(this.previmage).find('img:eq(0)').removeClass('selected') thumbs.eq(i).find('img:eq(0)').addClass('selected')},cycleimage:function(){ var nextimage=(this.curimage<this.imagesarr.length-1)? this.curimage+1 : 0 this.changeimage(nextimage)},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,{return new Date(b[2])-new Date(a[2])}) else{ images.sort(function(a,{ //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>') 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) }) })}}/////////////INITIALIZE SCRIPT BELOW:fullpageslideshow.init({ //initialize scriptimagesobj: fpslideshowvar, //no need to change. Object variable referencing images as generated inside "fpslideshow.php"thumbdir: '', //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"fadeduration: 1000,thumbdimensions:[30,30],autorotate:{enabled:true, pause:4000}}) also have this php file <?Header("content-type: application/x-javascript");function returnimages($dirname=".") { $pattern="\.(jpg|jpeg|png|gif|bmp)$"; $files = array(); $curimage=0; if($handle = opendir($dirname)) { while(false !== ($file = readdir($handle))){ if(eregi($pattern, $file)){ $filedate=date ("M d, Y H:i:s", filemtime($file)); echo " [$curimage, \"$file\", \"$filedate\"],\n"; $curimage++; } } echo " [\"placeholder\"]\n"; closedir($handle); } return($files);}echo "var fpslideshowvar={\n";echo " baseurl: \"http://" . $_SERVER["SERVER_NAME"] . dirname($_SERVER['PHP_SELF']) . "/\",\n";echo " images: [\n";returnimages();echo " ],\n";echo " desc: []\n";echo "}\n";?> Edited April 18, 2012 by Craig Hopson Link to comment Share on other sites More sharing options...
justsomeguy Posted April 16, 2012 Share Posted April 16, 2012 One option would be to have an ajax request that periodically goes out to get the full list of images, and compare that list with what is already loaded to see if it changed, or another option would be to send an ajax request where PHP would determine if there are new images and only return information about those instead of the entire list. In that case you would need to have Javascript also send a time interval that specifies the last time it looked up the images so that PHP knows how new an image has to be in order to be considered "new" to Javascript. Changing the slideshow code to deal with new images is more complex, based on what is already there the easiest way might be to destroy and rebuild the entire slideshow. Link to comment Share on other sites More sharing options...
Craig Hopson Posted April 18, 2012 Author Share Posted April 18, 2012 (edited) Ok how about after it has run the slide show before it starts again from the beginning it reruns the php script witch will find new picturesSo after all pictures have been shown it would just refresh the web page thus picking up new imagesSomething like location.reload(true) If this would work where would the line go??? Edited April 18, 2012 by Craig Hopson Link to comment Share on other sites More sharing options...
justsomeguy Posted April 18, 2012 Share Posted April 18, 2012 You can just refresh the page if you want, the cycleimage function is where it checks whether to go back to the start. You would need to change how that function works. Link to comment Share on other sites More sharing options...
Craig Hopson Posted April 18, 2012 Author Share Posted April 18, 2012 how though i dont understand JS Link to comment Share on other sites More sharing options...
justsomeguy Posted April 18, 2012 Share Posted April 18, 2012 cycleimage:function(){ var nextimage=(this.curimage<this.imagesarr.length-1)? this.curimage+1 : 0 if (nextimage == 0) window.location.reload(true); this.changeimage(nextimage)} Link to comment Share on other sites More sharing options...
Craig Hopson Posted April 18, 2012 Author Share Posted April 18, 2012 Thank you so much worked a treat Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now