PDA

View Full Version : Ultimate Fade In Slideshow v2.0 doesnt display jpgs in order of file name anymore?



rkk
03-07-2013, 04:18 AM
1) Script Title:
Ultimate Fade In Slideshow v2.0
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
3) Describe problem:
ive been using the same code for years, all of the sudden this past week i noticed it isnt displaying images according to file name....i deleted all images from server and uploaded 4 test images.....instead of showing in this order 1.jpg, 2.jpg, 3.jpg, 4.jpg, it does 1.jpg, 3.jpg, 4.jpg, 2.jpg

nothings been changed on my end code wise...it works using php version yall helped me create so all i do is upload images to server.

does it have something to do with maybe an update to php or javascript? or do i have to update to slideshow 2.4?

as you can see display mode code is not set to randomize
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true, randomize:false},

jscheuer1
03-07-2013, 09:48 AM
Updating the slideshow will not change the order of the images. You may already be usinf v2.4 anyway. It's the order of the images in the folder as seen by the server. You can sort them using PHP or javascript though, or upload them in a sequence that makes the server see them in the order that you prefer. What exact PHP code are you using?

vwphillips
03-07-2013, 09:58 AM
Ultimate Fade In Slideshow does not have a sort capability

however to sort the array
'numeric' or 'alpha'


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.vicsjavascripts.org.uk/StdImages/5.gif", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://www.vicsjavascripts.org.uk/StdImages/2.gif", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://www.vicsjavascripts.org.uk/StdImages/7.gif"],
["http://www.vicsjavascripts.org.uk/StdImages/4.gif", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false,sort:'numeric'}, // sort = 'numeric' or 'alpha'
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})



function fadeSlideShow(settingarg){
if (settingarg.displaymode.sort=='numeric'){
settingarg.imagearray.sort(function(a,b){ return a[0].substring(ary[0][0].lastIndexOf('/')+1).split('.')[0]-b[0].substring(ary[0][0].lastIndexOf('/')+1).split('.')[0]; })
}
if (settingarg.displaymode.sort=='alpha'){
settingarg.imagearray.sort(function(a,b){ return a[0].substring(ary[0][0].lastIndexOf('/')+1)-b[0].substring(ary[0][0].lastIndexOf('/')+1); })
}
this.setting=settingarg
settingarg=null
var setting=this.setting
setting.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500
setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 0
setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only)
setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0)
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(){}
if (setting.displaymode.randomize) //randomly shuffle order of images?
setting.imagearray.sort(function() {return 0.5 - Math.random()})
var preloadimages=[] //preload images
setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
for (var i=0; i<setting.imagearray.length; i++){ //preload 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]
}
var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always"
setting.closebutton=(setting.descreveal=="always")? '<img class="close" src="'+closebutt[0]+'" style="float:right;cursor:hand;cursor:pointer;width:'+closebutt[1]+'px;height:'+closebutt[2]+'px;margin-left:2px" title="Hide Description" />' : ''
var slideshow=this
jQuery(document).ready(function($){ //fire on DOM ready
var setting=slideshow.setting
var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow 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, width:'100%', height:'100%', background:'black'})
.appendTo(setting.$wrapperdiv)
var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />')
.css({left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif
.appendTo(setting.$wrapperdiv)
var $curimage=setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image
if (setting.longestdesc!="" && setting.descreveal!="none"){ //if at least one slide contains a description (versus feature is enabled but no descriptions defined) and descreveal not explicitly disabled
fadeSlideShow.routines.adddescpanel($, setting)
if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with
setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight})
setting.$descinner.click(function(e){ //asign click behavior to "close" icon
if (e.target.className=="close"){
slideshow.showhidedescpanel('hide')
}
})
setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon
slideshow.showhidedescpanel('show')
$(this).css({visibility:'hidden'})
})
}
else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover)
setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
}
}
setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})
if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
$loadingimg.hide()
slideshow.paginateinit($)
slideshow.showslide(setting.curimage)
}
else{ //initialize slideshow when first image has fully loaded
$loadingimg.hide()
slideshow.paginateinit($)
$curimage.bind('load', function(){slideshow.showslide(setting.curimage)})
}
setting.oninit.call(slideshow) //trigger oninit() event
$(window).bind('unload', function(){ //clean up and persist
if (slideshow.setting.persist) //remember last shown image's index
fadeSlideShow.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
}
}
})
slideshow=slideshow.setting=null
})
})
}

rkk
03-07-2013, 04:30 PM
hi

all i know is that i havent touched the code for years and its been working fine with displaying my images in the numeric sequence....all of the sudden it stopped doing this...so wondering why that is

this is the php inside index.html that calls the image php

<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0-(c) Dynamic Drive DHTML code library
***********************************************/
</script>

<script type="text/javascript" src="index.php"></script>

<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "headshotsshow1", //ID of blank DIV on page to house Slideshow
dimensions: [952, 355], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: galleryarray,
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true, randomize:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "headshot1toggler"
})
</script>

<script language="JavaScript" type="text/javascript">
<!--
//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>



this is the index.php code:



<?php
Header("content-type: application/x-javascript");

function returnimages($dirname="./images/headshots/") {
$pattern="\.(jpg|jpeg|png|gif|bmp)$";
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){
echo 'galleryarray[' . $curimage .']=["' . $dirname . $file . '"];' . "\n";
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo "var galleryarray=new Array();" . "\n";
returnimages();
?>

rkk
03-07-2013, 04:39 PM
so i added this to html sort:'numeric'}, and it displayed images in order

when i added

if (settingarg.displaymode.sort=='numeric'){
settingarg.imagearray.sort(function(a,b){ return a[0].substring(ary[0][0].lastIndexOf('/')+1).split('.')[0]-b[0].substring(ary[0][0].lastIndexOf('/')+1).split('.')[0]; })
}
if (settingarg.displaymode.sort=='alpha'){
settingarg.imagearray.sort(function(a,b){ return a[0].substring(ary[0][0].lastIndexOf('/')+1)-b[0].substring(ary[0][0].lastIndexOf('/')+1); })
}


it wouldnt display any images so i took it out

rkk
03-07-2013, 04:58 PM
well i just noticed something strange and that is on my mac adobe bridge had the names of my files correct but the finder window had different names for the same files??? anyway i copied files to new folder, dragged them back and adobe bridge and finder were correctly updating the file names, so probably wasnt a code problem but an os x or adobe bug?

thanks for your help

jscheuer1
03-07-2013, 08:22 PM
You fixed it then?

rkk
03-09-2013, 10:59 PM
spoke too soon....looks like all my image galleries are out of order
http://www.engagephotography.biz/index.html

not sure if i update to latest version if that will fix my problem but i dont recall if i had to add PHP code to fadeslideshow so dont want to update and then not have my PHP option.

if i add sort:'numeric' to each gallery and paste the other code into fadeslideshow the images will not be displayed.....other galleries i didnt stick sort:'numeric' into will display the image gallery but still out of order

CODE ON EACH GALLERY PAGE
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true, randomize:false, sort:'numeric'},

CODE ADDED TO FADESLIDESHOW
if (settingarg.displaymode.sort=='numeric'){
settingarg.imagearray.sort(function(a,b){ return a[0].substring(ary[0][0].lastIndexOf('/')+1).split('.')[0]-b[0].substring(ary[0][0].lastIndexOf('/')+1).split('.')[0]; })
}
if (settingarg.displaymode.sort=='alpha'){
settingarg.imagearray.sort(function(a,b){ return a[0].substring(ary[0][0].lastIndexOf('/')+1)-b[0].substring(ary[0][0].lastIndexOf('/')+1); })
}

vwphillips
03-10-2013, 12:05 PM
var mygallery=new fadeSlideShow({
wrapperid: "headshotsshow1", //ID of blank DIV on page to house Slideshow
dimensions: [952, 355], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray:galleryarray.sort(function(a,b){ return a[0].replace(/\D/g,'')-b[0].replace(/\D/g,'') }),
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true, randomize:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "headshot1toggler"
})


will result in


var galleryarray=new Array();
galleryarray[0]=["http://www.engagephotography.biz/./images/headshots/001_corporate_business_executive_headshots_headshot_actor_actors_portraits_photographer_photography_new_york_city_nyc_ny_manhattan.jpg"];
galleryarray[1]=["http://www.engagephotography.biz/./images/headshots/002_corporate_business_executive_headshots_headshot_actor_actors_portraits_photographer_photography_new_york_city_nyc_ny_manhattan.jpg"];
galleryarray[3]=["http://www.engagephotography.biz/./images/headshots/003_corporate_business_executive_headshots_headshot_actor_actors_portraits_photographer_photography_new_york_city_nyc_ny_manhattan.jpg"];
galleryarray[4]=["http://www.engagephotography.biz/./images/headshots/004_corporate_business_executive_headshots_headshot_actor_actors_portraits_photographer_photography_new_york_city_nyc_ny_manhattan.jpg"];
galleryarray[5]=["http://www.engagephotography.biz/./images/headshots/005_corporate_business_executive_headshots_headshot_actor_actors_portraits_photographer_photography_new_york_city_nyc_ny_manhattan.jpg"];
galleryarray[6]=["http://www.engagephotography.biz/./images/headshots/006_corporate_business_executive_headshots_headshot_actor_actors_portraits_photographer_photography_new_york_city_nyc_ny_manhattan.jpg"];
galleryarray[7]=["http://www.engagephotography.biz/./images/headshots/007_corporate_business_executive_headshots_headshot_actor_actors_portraits_photographer_photography_new_york_city_nyc_ny_manhattan.jpg"];
galleryarray[8]=["http://www.engagephotography.biz/./images/headshots/008_corporate_business_executive_headshots_headshot_actor_actors_portraits_photographer_photography_new_york_city_nyc_ny_manhattan.jpg"];
galleryarray[9]=["http://www.engagephotography.biz/./images/headshots/009_corporate_business_executive_headshots_headshot_actor_actors_portraits_photographer_photography_new_york_city_nyc_ny_manhattan.jpg"];

rkk
03-10-2013, 12:49 PM
that worked! thanks, but still wonder why it stopped ignoring my file name order to begin with :(

jscheuer1
03-10-2013, 05:44 PM
The PHP returnimages function you are using simply reads the folder for files with the extensions jpg|jpeg|png|gif|bmp. It doesn't sort them. It takes them in the order in which the server gives them, which is usually the order in which they were uploaded. If you change that order by replacing one or more of them, or if the server is updated and that somehow changes the order or changes what the server looks for to establish the order, that will result in something like you've been experiencing. What Vic has done is have javascript sort them numerically. Now it no longer matters what the the order is on the server, as long as a numeric sort gets you the order you're looking for, which apparently it does. Makes sense since the image filenames have an obvious numeric order to them.