Help with Ultimate Fade-in slideshow (v2.4)

**myav** · 08-19-2010, 01:51 PM

1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

3) Describe problem: Hi everyone. I need some help. Please excuse me for being a complete noob, but this is the first time I have tried to use js before on a website. I'm building an online store and trying to put the rolling slideshow in of products so that each image can be clicked on and link to a product special etc. Hope its OK to post but the address is www.myav.com.au, the thing is on the front home page. I've spent a few hours on it now, and I worked out to put a part in the head tag, a part in the page where the image goes, to upload the fadeslideshow.js and 'as far as i can tell' link all the parts together with the right full addresses.

To complicate it, the website is made using one of those backend systems, rather than me building it from scratch. But I think I've got it together roughly right... for a noob. The best I can get is a black box to come up the right size I specified but no image and no scrolling... Also I note if you right click on the black box then open image in new tab, the right image shows up! but only the first one, as far as I can tell...

It says you have to have the doctype set: <!DOCTYPE HTML> and mine isn't... not sure I can change that due to the way the website builds its self unless I ask the people who made it for help. Do you think that could be the problem?

Other than that, I'm probably missing something very obvious to you seasoned professionals

Thanks for the help in advance, this website is fantastic!

**azoomer** · 08-19-2010, 02:37 PM

hi. the doctype you have should be okay to use. I think the problem is a conflict between some of the scripts on the page. It seems like the slideshow will work if you remove these

Code:

<!-- BEGIN INCLUDE /opt/epages5/eproot/Cartridges/ECORNER/LightBox/Templates/SF/SF-Script.LightBox.html 0.002 seconds -->
	<script type="text/javascript" src="/WebRoot/ntdb2/LightBox/js/prototype.js"></script>
	<script type="text/javascript" src="/WebRoot/ntdb2/LightBox/js/scriptaculous.js?load=effects"></script>

    <script type="text/javascript" src="/WebRoot/ntdb2/LightBox/js/lightbox.js"></script>
	<link rel="stylesheet" 		 href="/WebRoot/ntdb2/LightBox/css/lightbox.css" type="text/css" media="screen" />

But I don't know if you need the light box. It may be possible to find another version of lightbox that is not in conflict with the fadeinslideshow. Make a search on dynamic drive i think there are other posts about this issue.
edit: no need to search. John is coming to the rescue

**jscheuer1** · 08-19-2010, 02:53 PM

The DOCTYPE on that page is fine for this script. You basically have two main problems:

There is a conflict with the Lightbox scripts that are also on the page.
All the external script code appears to get associated with each page, regardless of whether it is used on that page or not.

The first can be resolved by updating Lightbox to the most recent 2.04 release:

http://www.lokeshdhakar.com/projects/lightbox2/

However, since you are not using Lightbox on that page, if you could prevent its scripts and styles from being associated with the page, that would be better.

Which is sort of part of the second problem. I'm imagining that, for "simplicity's sake", every page has all of the same header includes, essentially they all have the same head. Even if you update Lightbox to a version that will 'play nice' with the slide show, the slide show won't be happy on pages where there is no slide show markup.

You can fix that by using a modified version of the slide show code, replace:

Code:

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [766, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["/WebRoot/ntdb2/Shops/didi6439/MediaGallery/2.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg"],
["/WebRoot/ntdb2/Shops/didi6439/MediaGallery/2.jpg", "", "", "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},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

with:

Code:

jQuery(function($){
var mygallery = {
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [766, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["/WebRoot/ntdb2/Shops/didi6439/MediaGallery/2.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg"],
["/WebRoot/ntdb2/Shops/didi6439/MediaGallery/2.jpg", "", "", "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},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
};
if($('#' + mygallery.wrapperid).size() === 1){
new fadeSlideShow(mygallery);
}
});

That should take care of the two main problems. Now there is a minor issue, here:

Code:

imagearray: [
["/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["/WebRoot/ntdb2/Shops/didi6439/MediaGallery/2.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg"],
["/WebRoot/ntdb2/Shops/didi6439/MediaGallery/2.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],

See the highlighted parts? You should either get rid of them, or customize them for your purposes. As it is now, they are still set to the values in the demo. Read the demo page's documentation to find out what these fields do. But, as I've indicated, if you aren't using them, you can get rid of them.

**myav** · 08-19-2010, 11:21 PM

Hi John,

Thank you so much for your fast reply. I've swaped that part of the code out exactly how you said to swap it, and the black box remains

Maybe there is something else I was meant to do or did I need to customise something? - sorry I'm such a noob!

Due to the way that the site builds its self from the back end system I have, I only have the option to add things to the HEAD tag of EVERY PAGE.... so I hope that isn't a problem

I know the part you said to change from the demo, the highlighted parts, I left them like that because I figured step a is make it work, then step b was make it pretty / customise it for my site

**jscheuer1** · 08-20-2010, 12:19 AM

The main thing you have missed is that you haven't updated Lightbox. It's really your choice though. You may either eliminate (if you are not using it):

Code:

<!-- BEGIN INCLUDE /opt/epages5/eproot/Cartridges/ECORNER/LightBox/Templates/SF/SF-Script.LightBox.html 0.002 seconds -->
	<script type="text/javascript" src="/WebRoot/ntdb2/LightBox/js/prototype.js"></script>
	<script type="text/javascript" src="/WebRoot/ntdb2/LightBox/js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="/WebRoot/ntdb2/LightBox/js/lightbox.js"></script>
	<link rel="stylesheet" 		 href="/WebRoot/ntdb2/LightBox/css/lightbox.css" type="text/css" media="screen" />


<!-- END INCLUDE /opt/epages5/eproot/Cartridges/ECORNER/LightBox/Templates/SF/SF-Script.LightBox.html -->

Or update it to version 2.04 (if some of your pages use it):

http://www.lokeshdhakar.com/projects/lightbox2/

There still could be other problems, but this much must be dealt with first.

**myav** · 08-20-2010, 01:29 AM

Sorry I didn't realise I had to do that part because I didn't put in lightbox let alone know what it was. I spoke to the company that sells the store back end... Apparently it's provided as part of the package and they dont know if they can remove or update it as they say that it's common for all users of the platform

Soooo.... They are emailing the company who makes the back end overseas to see if there is any way they can remove or update it, but not looking good at this stage! I guess all I can do is wait for an answer, they said 24 hours but that will be a weekend so may have to wait until Monday sadly.

Thanks again for all your help, been fantastic.

**myav** · 08-20-2010, 05:18 AM

Hi Guys, bad news, I just got this reply from the developers:

The developers of StoreXpress have advised that the issue simply seems to be a conflict with the third party script (jQuery) you are using the other JavaScript elements in the page.

They've advise the only option here is to either make adjustments to your script or use a better slideshow script which is more CSS based, such as http://www.leigeber.com/2008/1 2/javascript-slideshow/

So looks like there is no way I can use your script?

**jscheuer1** · 08-20-2010, 06:07 AM

If you cannot get rid of the outdated Lightbox code, no. Oh, and it's not my script.

I see nothing wrong with using the slide show they recommend - if it works with their package.

They are right in a way. As long as that code remains, jQuery will conflict with it. It will run perfectly happily alongside the updated Lightbox code or with the Lightbox code removed.

Their response does tend to indicate either ignorance and/or unwillingness on their part surrounding the availability and/or the efficacy of the updated Lightbox code.

However, the issue isn't completely as black and white as that. There are issues with the updated Lightbox code*. But there are also issues with the version they are using - aside from its incompatibility with jQuery. I just add this last so as to be fair about it, though I doubt that they are even aware of these subtleties.

But in the end, it is the outdated Lightbox script's support libarary that is incompatible. The jQuery library is unique among script libraries in that it can be made compatible with almost any other javascript.

*These have been addressed in a mod I authored, but that mod isn't widely available. It can be had here:

http://www.dynamicdrive.com/forums/s...470#post163470

**myav** · 08-20-2010, 09:23 AM

Yeah looks like I'm going to have to scratch the hours of work and start again on their one. I agree with you about the ignorance on their part. I complained and this was their response:

There is more than one version of lightbox, its not as simple as upgrade from version 1 to version 2 as there are different versions with different modifications and different reasons for using different versions. When dealing with developers of two different software that are experiencing conflict, you will generally experience both parties trying to blame each other for the reason why something doesn't work.

Frustrating given I already spent some hours on this one and now I have to start afresh ~sigh~ Hope I can work out the other one now!

**jscheuer1** · 08-20-2010, 01:58 PM

That's a good answer and shows that they may be aware of the subtle issues I was mentioning. It at least shows that they are unwilling to keep current. I doubt that they are aware of my update to Lightbox 2.04a though, or if they are, they might consider it improper, as it isn't an official Lightbox release and their package is in wide use. However, the license:

http://creativecommons.org/licenses/by/2.5/

states that we are free to share and remix the work as long as the original attribution and license remain. My modifications meet these criteria.

If they could use my 2.04a, then there probably would be no issue unless they have other code that is incompatible with the update. As far as I can tell though, they do not.

This still feels to me a like a case of they just can't be bothered to keep current. We all know how that goes.