Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 11

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

  1. #1
    Join Date
    Sep 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade In Slideshow v2.0 doesnt display jpgs in order of file name anymore?

    1) Script Title:
    Ultimate Fade In Slideshow v2.0
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...nslideshow.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},

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,672
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,706
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    Ultimate Fade In Slideshow does not have a sort capability

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

    Code:
    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: ""
    })
    Code:
    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
    		})
    	})
    }
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Sep 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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();
    ?>

  5. #5
    Join Date
    Sep 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Sep 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,672
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    You fixed it then?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Sep 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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); })
    }

  9. #9
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,706
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    Code:
    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

    Code:
    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"];
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  10. #10
    Join Date
    Sep 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    that worked! thanks, but still wonder why it stopped ignoring my file name order to begin with

Similar Threads

  1. Ultimate Fade-in slideshownot working anymore in IE8
    By sasole777 in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 12-16-2013, 09:31 PM
  2. Ultimate Fade-In Slideshow (v1.51): doesnt show up on the page
    By datalova in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-04-2009, 12:49 PM
  3. Resolved Ultimate Fade-In Slideshow: No display
    By whunter52 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-15-2008, 03:07 PM
  4. Multiple Ultimate Fade-in slideshow (v1.5) on page doesnt work...
    By @rtwork in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 07-17-2006, 08:24 PM
  5. Ultimate Fade-in slideshow doesnt show in Mac IE5
    By kreven in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 06-28-2006, 02:49 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •