Ultimate Fade-in slideshow - Feature Request

**spook_man** · 10-08-2008, 08:28 PM

1) Script Title:
Ultimate Fade-in slideshow

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:
We use your JS and have had high-praise for what it does for the website. But as the season's change in the North East US, so does the request for the pictures to change according to the seasons.

So instead of having to go through every webpage which uses this and change the name and location of the JS for the season, my feature request is this; the pictures used for the rotate is dependant on the date. So if it's after October 15th, the fall pictures are used. After April 20th, the spring pictures are used, etc.

Thank you for your time and attention.. -Jeff

**jscheuer1** · 10-08-2008, 09:24 PM

October 15th is a little late in the season to begin Fall (official date of Fall is around September 20, some go for Labor Day as the the unofficial start of the Fall season).

So, I'm unclear as to what dates you really want to use for the other seasons, seeing as how you appear to have a rather unique view of when Fall begins.

But I'll let you worry about that, you can configure the months and dates as you see fit. This will just be an example of the code to use (place before your image array(s) in the same script):

Code:

;(function(){
var d = new Date(),
m = d.getMonth(),
dy = d.getDate();
if (m < 3 || m == 3 && dy < 20)
fadeshow.quarter = 'winter';
else if (m < 6 || m == 6 && dy < 21)
fadeshow.quarter = 'spring';
else if (m < 9 || m == 9 && dy < 15)
fadeshow.quarter = 'summer';
else if (m < 11 || m == 11 && dy < 21)
fadeshow.quarter = 'fall';
else fadeshow.quarter = 'winter';
})();

Remember, in javascript January is 0, not 1, so 3 would be April, 6 July, and so on.

OK, once you have that there are various things you can do. You could use folders, or just the filenames to rotate the image pools. For example:

Code:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=[fadeshow.quarter+"photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=[fadeshow.quarter+"photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=[fadeshow.quarter+"photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

Will show (at this writing - 10/8):

summerphoto1.jpg
summerphoto2.jpg
summerphoto3.jpg

On the 15th of this month (October), they would change to:

fallphoto1.jpg
fallphoto2.jpg
fallphoto3.jpg

So to put it all together, you would have:

Code:

;(function(){
var d = new Date(),
m = d.getMonth(),
dy = d.getDate();
if (m < 3 || m == 3 && dy < 20)
fadeshow.quarter = 'winter';
else if (m < 6 || m == 6 && dy < 21)
fadeshow.quarter = 'spring';
else if (m < 9 || m == 9 && dy < 15)
fadeshow.quarter = 'summer';
else if (m < 11 || m == 11 && dy < 21)
fadeshow.quarter = 'fall';
else fadeshow.quarter = 'winter';
})();

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=[fadeshow.quarter+"photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=[fadeshow.quarter+"photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=[fadeshow.quarter+"photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

**spook_man** · 10-09-2008, 12:48 PM

Hello,
I added the code to the image_rotate.js file as below, but now I'm not getting any images rotating. Below is a snipette of the code which I've added to our image_rotate.js file so you can see what I'm trying to do. Obviously, I'm not going to list all of the pictures which we'd like to rotate; there's A LOT!
Also, say I want to rotate fireworks pictures during the week of July 4th (July 1st through July 7th); I'd add a line like this to the code; correct? (JS is on the list of things to learn so I'm not too proficient at it).
Thanks.. -Jeff

else if (m < 6 || m == 6 && dy => 1 && dy =< 7)
fadeshow.quarter = 'july4th';
else if (m < 6 || m == 6 && dy < 21)
fadeshow.quarter = 'spring';

Original Code____________________________________________________
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

;(function(){
var d = new Date(),
m = d.getMonth(),
dy = d.getDate();
if (m < 3 || m == 3 && dy < 20)
fadeshow.quarter = 'winter';
else if (m < 6 || m == 6 && dy < 21)
fadeshow.quarter = 'spring';
else if (m < 9 || m == 9 && dy < 15)
fadeshow.quarter = 'summer';
else if (m < 11 || m == 11 && dy < 21)
fadeshow.quarter = 'fall';
else fadeshow.quarter = 'winter';
})();

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
// Default Pictures - For Image Rotation
fadeimages[0]=[fadeshow.quarter+"resources/rotate_images/default/Cave.jpg", "", ""] //plain image syntax
...........LISTING OF DEFAULT PICTURES...........
// Fall Pictures - For Image Rotation
fadeimages[30]=[fadeshow.quarter+"resources/rotate_images/fall/fall1.jpg", "", ""] //plain
...........LISTING OF FALL PICTURES...........
// Winter Pictures - For Image Rotation
fadeimages[53]=[fadeshow.quarter+"resources/rotate_images/winter/winter1.jpg", "", ""] //plain image syntax
...........LISTING OF WINTER PICTURES...........
...........REST OF image_rotate.js CODE...........

**jscheuer1** · 10-09-2008, 01:08 PM

This syntax:

Code:

fadeshow.quarter+"resources/rotate_images/default/Cave.jpg"

Would, at this writing (10/9), point to an image:

fallresources/rotate_images/default/Cave.jpg

If there is no image there, there will be no show, at least not for that image. Do you even have a folder:

fallresources

?

**spook_man** · 10-09-2008, 01:34 PM

Ok, I got it working by changing the code as below, but I did notice something.

Code:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
// Default Pictures - For Image Rotation
fadeimages[0]=["resources/rotate_images/"+fadeshow.quarter+"/Cave.jpg", "", ""] //plain image syntax
...........LISTING OF DEFAULT PICTURES...........
// Fall Pictures - For Image Rotation
fadeimages[30]=["resources/rotate_images/"+fadeshow.quarter+"/fall1.jpg", "", ""] //plain image syntax
...........LISTING OF FALL PICTURES...........
// Winter Pictures - For Image Rotation
fadeimages[53]=["resources/rotate_images/"+fadeshow.quarter+"/winter1.jpg", "", ""] //plain image syntax
...........LISTING OF WINTER PICTURES...........
...........REST OF image_rotate.js CODE...........

Sometimes, it'll try to use an image from a different directory. E.g. The link to the picture will be "resources/rotate_images/fall/winter1.jpg". So instead of just using the "fall" directory, it's trying to use the "fall", "summer", and "winter" directories looking for pictures like summer1.jpg, fall1.jpg and winter1.jpg in the different directories.

Since there aren't any "fall" pictures in the "summer" folder, no image is displayed.

I think it's because of the var fadeimages=new Array() adding every picture into the array. I think it needs code which states if fadeshow.quarter is "fall" then create a new array with these pictures, if it's "winter", then use these pictures. etc.

Thank you for all your help.. -Jeff

**spook_man** · 10-09-2008, 01:52 PM

OK, I was playing around and tried this following code. I tried adding the if...then...else type logic, but it's not displaying anything. IE explains this as the error: "Microsoft JScript runtime error: 'fadeshow' is undefined" when viewing the ASPX page. Removing the "if (fadeshow.quarter =" code and it's fine.

This is the ASPX web page code:

Code:

<asp:Content ID="Content1" ContentPlaceHolderID="RotateImg" Runat="Server">
	<div>
        <div id="imagerotate" style="width: 200px; height: 214px">
		<script type="text/javascript" src="/resources/rotate_images/image_rotate.js"></script>
		<script type="text/javascript">
			//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
			new fadeshow(fadeimages, 200, 214, 0, 5000, 1, "R")
		</script>
		</div>
	</div>
</asp:Content>

I think I'm not closing the if...then...else statement properly.

Thanks again..

Code:

if (fadeshow.quarter = 'summer');
	// Summer Pictures - For Image Rotation
	var fadeimages=new Array()
	fadeimages[0]=["resources/rotate_images/"+fadeshow.quarter+"/Cave.jpg", "", ""] //plain image syntax
...........LISTING OF SUMMER PICTURES...........

else if (fadeshow.quarter = 'fall');
	// Fall Pictures - For Image Rotation
	var fadeimages=new Array()
	fadeimages[30]=["resources/rotate_images/"+fadeshow.quarter+"/fall1.jpg", "", ""] //plain image syntax
...........LISTING OF FALL PICTURES...........

else if (fadeshow.quarter = 'winter');
	// Winter Pictures - For Image Rotation
	var fadeimages=new Array()
	fadeimages[53]=["resources/rotate_images/"+fadeshow.quarter+"/winter1.jpg", "", ""] //plain image syntax
...........LISTING OF WINTER PICTURES...........
();

...........REST OF image_rotate.js CODE...........

**jscheuer1** · 10-09-2008, 03:09 PM

Yes, looks very confused. But I think you are over complicating things. Simplify everything. Make 4 folders:

winter

spring

summer

fall

Put winter images in winter, spring images in spring, etc. Name all your image files:

image1.jpg

image2.jpg

etc.

each folder should contain images numbered from 1 to however many you like, but each folder should have the same number of images. Then you can just do:

Code:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=[fadeshow.quarter+"/image1.jpg", "", ""] //plain image syntax
fadeimages[1]=[fadeshow.quarter+"/image2.jpg", "", ""] //plain image syntax
fadeimages[2]=[fadeshow.quarter+"/image3.jpg", "", ""] //plain image syntax

Nice and easy.

**spook_man** · 10-09-2008, 03:34 PM

Thanks for the reply..

I tried this and got it to work properly by using code such-as this:

Code:

var fadeimages=new Array()
// Summer Pictures - For Image Rotation
fadeimages[0]=["resources/rotate_images/"+fadeshow.quarter+"/Cave.jpg", "", ""] //plain image syntax
// Fall Pictures - For Image Rotation
fadeimages[30]=["resources/rotate_images/"+fadeshow.quarter+"/fall1.jpg", "", ""] //plain image syntax

But the issue was that it was looking for "summer" pictures in the "fall" folder, etc. The image URL would state "resources/rotate_images/fall/Cave.jpg". Since there is no "Cave.jpg" picture in the "Fall" folder, no picture was being displayed. I believe this was caused by the var fadeimages=new Array() line which was adding every picture to the array and since fadeshow.quarter is setup for "fall", it was looking for the "Cave.jpg" in the "fall" folder; which obviously isn't there.

And, we obviously don't want winter pictures to be displayed during the spring/summer months. Our winters are bad enough as is it and any sign winter during these time periods can drive people crazy. Ha-ha

This is why I suggested the if (fadeshow.quarter = 'summer'); line which would only create the array for the summer pictures, etc. But when I tried this, I got the Microsoft JScript runtime error: 'fadeshow' is undefined error when viewed in IE.

**spook_man** · 10-09-2008, 04:08 PM

Thank you John for all your assistance! I was able to get the code working just as I wanted.

I had to move the var fadeimages=new Array() outside the If statement.

Then I created the needed season sub-folders
resources/rotate_images/summer
resources/rotate_images/fall
resources/rotate_images/winter
And moved the pictures into them accordingly.

Tested and it works perfectly. Thank you for excellent code and an excellent product. -Jeff

Code:

;(function(){
var d = new Date(),
m = d.getMonth(),
dy = d.getDate();
if (m < 2 || m == 2 && dy < 20)
	fadeshow.quarter = 'winter';
else if (m < 5 || m == 5 && dy < 21)
	fadeshow.quarter = 'spring';
else if (m < 8 || m == 8 && dy < 22)
	fadeshow.quarter = 'summer';
else if (m < 11 || m == 11 && dy < 21)
	fadeshow.quarter = 'fall';
else fadeshow.quarter = 'winter';
})();

var fadeimages=new Array()

if (fadeshow.quarter == 'fall'){
	fadeimages[0]=["resources/rotate_images/"+fadeshow.quarter+"/fall1.jpg", "", ""] //plain image syntax
	fadeimages[1]=["resources/rotate_images/"+fadeshow.quarter+"/fall2.jpg", "", ""] //plain image syntax
	fadeimages[2]=["resources/rotate_images/"+fadeshow.quarter+"/fall3.jpg", "", ""] //plain image syntax
}
else if (fadeshow.quarter == 'summer'){
	fadeimages[0]=["resources/rotate_images/"+fadeshow.quarter+"/Cave.jpg", "", ""] //plain image syntax
	fadeimages[1]=["resources/rotate_images/"+fadeshow.quarter+"/bridge1.jpg", "", ""] //plain image syntax
	fadeimages[2]=["resources/rotate_images/"+fadeshow.quarter+"/ch1.jpg", "", ""] //plain image syntax
}