CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)
-   -   Editing Javascript Image Gallery (http://www.codingforums.com/showthread.php?t=285175)

Cryon 01-03-2013 01:04 AM
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?

Old Pedant 01-03-2013 04:47 AM
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.

Cryon 01-03-2013 11:49 AM
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


All times are GMT +1. The time now is 05:39 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.