Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Editing Javascript Image Gallery

    Hi

    I've been using this gallery/slideshow for a while:
    Dynamic Drive DHTML Scripts- Simple Controls Gallery

    This uses Jquery and an simplegallery.js that contains the code. I've also put the variables (image locations) in an externally referenced file called variables.js

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="simplegallery.js">
    <script type="text/javascript" src="variables-spring.js">
    Code:
    var mygallery=new simpleGallery({
    	wrapperid: "simplegallery1", //ID of main gallery container,
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new", "There's nothing like a nice swim in the Summer."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "", ""],
    		["http://i30.tinypic.com/531q3n.jpg", "", "", "Eat your fruits, it's good for you!"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", ""]
    	]
    I have four variable files 'variables-spring.js', 'variables-summer.js', 'variables-fall.js', 'variables-winter.js'. Currently I change the <script type="text/javascript" src="variables-spring.js"> manually depending on the time of year.

    What I would like to have is this done automatically. I guess this is more involved than a small bit of editing to the current code. Can anyone help?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Is the code you show there, that starts with var mygallery=new simpleGallery(, an example of one of your "seasonal" files?

    If so, I'd just combine the 4 seasonal files into 1.

    Something like this:
    Code:
    var spring = [
        ... images for spring...
    ];
    var summer = [ ... ];
    var fall = [ ... ];
    var winter = [ ... ];
    
    var season = null;
    var month = ( new Date() ).getMonth(); // remember: January is 0, December is 11
    var day = ( new Date() ).getDate();
    
    // simplistic way to calculate the season:
    if ( ( month == 11 && day >= 21 ) || month == 0 || month == 1 || ( month == 2 && day < 21 ) 
    {
        season = winter;
    } 
    else if ( ( month == 2 && day >= 21 ) || month == 3 || month == 4 || ( month == 5 && day < 20 ) 
    {
        season = spring;
    }
    else if ( ( month == 5 && day >= 20 ) || month == 6 || month == 7 || ( month == 9 && day < 20 ) 
    {
        season = summer;
    }
    else
    {
        season = fall;
    }
    var mygallery=new simpleGallery({
    	wrapperid: "simplegallery1", //ID of main gallery container,
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    	imagearray: season
      });
    If you want something more sophisticated to calculate the season, you can slip it in there, of course.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Cryon (01-03-2013)

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your response.

    This is the final working code. The only real change I made to your code was adding a ')' to the if statements as I was getting a syntax error. As far as I can see this is the only gallery/slideshow that can now change the contents of the slideshow depending on the time of year.


    Code:
    var winter = [["http://www.mydomain.com/images/Slideshow/winter/Slideshow1.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow2.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow3.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow4.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow5.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow6.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow7.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow8.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow9.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow10.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow11.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow12.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow13.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow14.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/winter/Slideshow15.jpg","","",""]];
    		
    var spring = [["http://www.mydomain.com/images/Slideshow/spring/Slideshow1.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow2.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow3.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow4.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow5.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow6.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow7.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow8.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow9.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow10.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow11.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow12.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow13.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow14.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/spring/Slideshow15.jpg","","",""]];
    		
    var summer = [["http://www.mydomain.com/images/Slideshow/summer/Slideshow1.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow2.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow3.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow4.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow5.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow6.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow7.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow8.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow9.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow10.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow11.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow12.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow13.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow14.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/summer/Slideshow15.jpg","","",""]];
    		
    var fall =  [["http://www.mydomain.com/images/Slideshow/fall/Slideshow1.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow2.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow3.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow4.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow5.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow6.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow7.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow8.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow9.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow10.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow11.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow12.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow13.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow14.jpg","","",""],
    		["http://www.mydomain.com/images/Slideshow/fall/Slideshow15.jpg","","",""]];
    
    // the season variables
    var season = null;
    var month = ( new Date() ).getMonth(); // remember: January is 0, December is 11
    var day = ( new Date() ).getDate();
    
    // simplistic way to calculate the season:
    if (( month == 11 && day >= 21 ) || month == 0 || month == 1 || ( month == 2 && day < 21 )) 
    {
    season = winter;
    } 
    else if ( ( month == 2 && day >= 21 ) || month == 3 || month == 4 || ( month == 5 && day < 20 )) 
    {
        season = spring;
    }
    else if ( ( month == 5 && day >= 20 ) || month == 6 || month == 7 || ( month == 9 && day < 20 )) 
    {
        season = summer;
    }
    else
    {
        season = fall;
    }
    
    
    var mygallery=new simpleGallery({
    	wrapperid: "simplegallery1", //ID of main gallery container,
    	dimensions: [568, 375], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    	imagearray: season, //variable that contains the image links
     	autoplay: [true, 8500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    	persist: false,
     	preloadfirst:true, //v1.4 option on whether slideshow should only start after all images have preloaded
     	fadeduration: 500, //transition duration (milliseconds)
     	oninit:function(){ //event that fires when gallery has initialized/ ready to run
     	//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause")
     	},
     	onslide:function(curslide, i){ //event that fires after each slide is shown
       	//Keyword "this": references current gallery instance
       	//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
       	//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
     	}
    })
    You can view the code working here
    Last edited by Cryon; 01-04-2013 at 12:07 PM.


  •  

    Posting Permissions

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