Image rotator help

[grahamy84]

Originally Posted by venegal

Unlike the code you posted, the onload of the body tag does not contain a call to photoShufflerLaunch();, so the script is never invoked.

Furthermore the image files you are referring to in gblImg (e.g. http://www.fiorenzato.co.uk/assets/images/slide1.jpg) do not exist.

The images have been uploaded to the directory...do I have to have the images somewhere live on the site and link them to the rotator?

[venegal]

You do not need to link anything, putting the URLs of the images into the config array in the .js, like you already did, is enough.

They are still not where they are supposed to be though. What do mean by "The images have been uploaded to the directory"? They (slide1.jpg, slide2.jpg, ...) are supposed to go into the subdirectory "assets/images/" of the web directory of your live server. If clicking on http://www.fiorenzato.co.uk/assets/images/slide1.jpg shows the image, you did it right.

And the call to photoShufflerLaunch(); in the body onload is still missing.

[grahamy84]

Here are the images. I have uploaded them to the site:



I'll add the missing code.

[venegal]

Well something's way off here. It looks like you uploaded to "Images" instead of "images" (directory names are case sensitive), but to the outside world, "Images" does not even exist. Furthermore the "images" folder here http://www.fiorenzato.co.uk/assets/images/ does not reflect the file structure in your screenshot at all.

I'm afraid short of you giving me FTP access there is not much I can do except guessing: Are you sure you're uploading to the right server/directory? Did you give your images the right permissions (CHMOD 644)?

[grahamy84]

Originally Posted by venegal

Well something's way off here. It looks like you uploaded to "Images" instead of "images" (directory names are case sensitive), but to the outside world, "Images" does not even exist. Furthermore the "images" folder here http://www.fiorenzato.co.uk/assets/images/ does not reflect the file structure in your screenshot at all.

I'm afraid short of you giving me FTP access there is not much I can do except guessing: Are you sure you're uploading to the right server/directory? Did you give your images the right permissions (CHMOD 644)?

I've just changed the filne name in Mozilla but the assets and images file in my directory on dreamweaver have been saved using lowercase letters. I can't understand why it's uppercase. I have changed it anyway but it hasn't made any difference to the site.

What's CHMOD 644? Ah ok...I've just checked the permissions and they have the same boxes ticked as all the others. And the Numeric value is: 664

All my other images work on the site so I can't see why these ones should be any different.

[venegal]

I'm sorry, but unless you manage to make your images show in http://www.fiorenzato.co.uk/assets/images/ (or in any other directory for that matter) there is not much I can do.

You could try uploading the images to a new directory, or to the root directory and check if the images show up there.

[grahamy84]

Originally Posted by venegal

I'm sorry, but unless you manage to make your images show in http://www.fiorenzato.co.uk/assets/images/ (or in any other directory for that matter) there is not much I can do.

You could try uploading the images to a new directory, or to the root directory and check if the images show up there.

I'll have a tinker around. Thanks for being so patient with me...you're a Saint...a virtual one.

[grahamy84]

What about here:

http://www.fiorenzato.co.uk/assets/images/

If you click on the slides...they pop up.

So that can't be the problem can it?

[venegal]

Alright, we're almost there now. The images are showing up where they should. As far as I can tell, the only thing preventing it from working is a small error you have in your photoshuffler.js: You have a comma after your last array entry:

var gblImg = new Array(
    "assets/images/slide1.jpg",
    "assets/images/slide2.jpg",
    "assets/images/slide3.jpg",
	"assets/images/slide4.jpg",
    );

Change that to

var gblImg = new Array(
    "assets/images/slide1.jpg",
    "assets/images/slide2.jpg",
    "assets/images/slide3.jpg",
	"assets/images/slide4.jpg"
    );

reupload and hope for the best.

[grahamy84]

Originally Posted by venegal

Alright, we're almost there now. The images are showing up where they should. As far as I can tell, the only thing preventing it from working is a small error you have in your photoshuffler.js: You have a comma after your last array entry:

var gblImg = new Array(
    "assets/images/slide1.jpg",
    "assets/images/slide2.jpg",
    "assets/images/slide3.jpg",
	"assets/images/slide4.jpg",
    );

Change that to

var gblImg = new Array(
    "assets/images/slide1.jpg",
    "assets/images/slide2.jpg",
    "assets/images/slide3.jpg",
	"assets/images/slide4.jpg"
    );

reupload and hope for the best.

Thankyou my friend. It's worked!!

You have helped me so much. I really appreciate it...top man!

One last thing though...how do I make the slideshow continue for as long as the page is open?

[venegal]

No problem.

Remember that variable in the configuration part of the .js that was set to 1? It holds the number of rotations, so just setting it to some ridiculously high number like 10000 should do the trick.

Alternatively you can change the line
if (--gblImageRotations < 1)
to
if (gblImageRotations < 1)
which will make it run forever.

[venegal]

I just had a look at your site, and the rotator doesn't quite work like it's supposed to. It is fading out the image and then abruptly showing the new one instead of fading the new one in simultaneously. Do the following:

In your html, change

<a id="photodiv" href="piazza_san_marco_espresso.html"><img id="photoimg" height="300" width="400" src="assets/images/piazza_san_marco_4g.jpg" alt="Piazza San Marco 4 Group Lever Espresso Machine" class="imageright"/></a>

to

<a id="photodiv" class="imageright" href="piazza_san_marco_espresso.html"><img id="photoimg" height="300" width="400" src="assets/images/piazza_san_marco_4g.jpg" alt="Piazza San Marco 4 Group Lever Espresso Machine"/></a>,

i.e. put the "imageright" class out of the <img> and into the <a>

In your css, add

#photodiv{
    background-position: 1px 1px;
    background-repeat: no-repeat;
}
#photodiv img{
    border:none;
}

That should make it work properly.

[grahamy84]

Hey Venegal.

I just changed the code to the one you suggested and I now get the following:



The fading in the rotator looks a lot better but there is another image in the background to the right of the image.

[venegal]

Did you add the css I gave you correctly?

The fade-over works by putting the new image in the background, while the foreground image is fading out.

The first part of the css makes sure that those two images are aligned correctly, so you don't see the new one behind the old one like on your screenshot.

The second part should kill the blue border around the image in your screenshot.

So, all in all, your screenshot suggests that either the css I gave you is missing, or you put it in the wrong place. I can't tell you what exactly the problem is though unless you put it somewhere on a live server for me to have a look.

[grahamy84]

Originally Posted by venegal

Did you add the css I gave you correctly?

The fade-over works by putting the new image in the background, while the foreground image is fading out.

The first part of the css makes sure that those two images are aligned correctly, so you don't see the new one behind the old one like on your screenshot.

The second part should kill the blue border around the image in your screenshot.

So, all in all, your screenshot suggests that either the css I gave you is missing, or you put it in the wrong place. I can't tell you what exactly the problem is though unless you put it somewhere on a live server for me to have a look.

You're spot on. I had forgot to include the css! You're bloody good!

Thanks again mate. You've made my day.