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

Printable View

08-19-2010, 01:51 PM
myav

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

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!
08-19-2010, 02:37 PM
azoomer

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:

 <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 :)
08-19-2010, 02:53 PM
jscheuer1
The DOCTYPE on that page is fine for this script. You basically have two main problems:
1. There is a conflict with the Lightbox scripts that are also on the page.
2. 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.
08-19-2010, 11:21 PM
myav

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 :)
08-20-2010, 12:19 AM
jscheuer1

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:

 <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" /> 

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.
08-20-2010, 01:29 AM
myav

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 :mad:

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. :)
08-20-2010, 05:18 AM
myav

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? :(
08-20-2010, 06:07 AM
jscheuer1

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
08-20-2010, 09:23 AM
myav

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! :)
08-20-2010, 01:58 PM
jscheuer1

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.
08-31-2010, 12:42 PM
myav

Hi John,

Not sure if you can help, but I am still having trouble with this automated scrolling image. The one that my ISP suggested has virtually no support I can find and is more complecated and since I'm a complete rookie i'm totally lost. To be honest I'm amazed how hard this can be on a simple e-commerce package considering almost every online store in the world uses one of these type things!

They suggest this:
http://www.leigeber.com/2008/12/javascript-slideshow/

And show it running here in a mock online store using the same platform:
http://shops.ecorner.com/epages/test1.sf

I've tried my best to upload all the parts in the right places and all the right files etc etc but it just doesn't work for me. I've spent so long on this it's hard to believe and it's driving me crazy! Hopeful you might be able to help out once again?
08-31-2010, 04:54 PM
jscheuer1

Instead of:

Code:

<div><p> Welcome to MyAV - The home of Australia's best deals in Audio Visual products! </p> <br /> <ul><li><h3>Pic1</h3>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg <br/> <a href="http://www.oceanicdistribution.com"></a></li><li><h3>Pic2</h3><span>http://www.myav.com.au/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg</span> <br/> <a href="http://www.oceanicdistribution.com"></a></li><li><h3>Pic3</h3><span>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg</span> <br/> <a href="http://www.oceanicdistribution.com"></a></li><li><h3>Pic4</h3>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg <br/> <a href="http://www.oceanicdistribution.com"></a></li></ul> <div id="wrapper"> <div id="fullsize"> <div id="information"> <div id="imgprev" class="imgnav" title="Previous Image"></div> <div id="imglink"></div> <div id="imgnext" class="imgnav" title="Next Image"></div> <div id="image"></div> <div id="information"> <h3></h3> <p></p> </div> </div> </div> <script type="text/javascript" src="/WebRoot/ntdb2/Shops/didi6439/MediaGallery/compressed.js"></script> <script type="text/javascript"> $('slideshow').style.display='none'; $('wrapper').style.display='block'; var slideshow=new TINY.slideshow("slideshow"); window.onload=function(){ slideshow.auto=true; slideshow.speed=4; slideshow.link="linkhover"; slideshow.info="information"; slideshow.thumbs=""; slideshow.left="slideleft"; slideshow.right="slideright"; slideshow.scrollSpeed=4; slideshow.spacing=5; slideshow.active="#fff"; slideshow.init("slideshow","image","imgprev","imgnext","imglink"); } </script></div> <div class="Separator"></div>

Do like:

Code:

<div><p> Welcome to MyAV - The home of Australia's best deals in Audio Visual products! </p> <ul id="slideshow"> <li> <h3>Kiama Beach</h3> <a href="http://www.oceanicdistribution.com"><span>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg</span></a> <p>Nice Example 1</p> </li> <li> <h3>Kiama Beach</h3> <a href="http://www.oceanicdistribution.com"><span>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg</span></a> <p>Nice Example 2</p> </li> <li> <h3>Kiama</h3> <a href="http://www.oceanicdistribution.com"><span>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg</span></a> <p>Nice Example 3</p> </li> <li> <h3>Kiama</h3> <a href="http://www.oceanicdistribution.com"><span>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg</span></a> <p>Nice Example 4</p> </li> </ul> <div id="wrapper"> <div id="fullsize"> <div id="imgprev" class="imgnav" title="Previous Image"></div> <div id="imglink"></div> <div id="imgnext" class="imgnav" title="Next Image"></div> <div id="image"></div> <div id="information"> <h3></h3> <p></p> </div> </div> </div> <script type="text/javascript" src="/WebRoot/ntdb2/Shops/didi6439/MediaGallery/compressed.js"></script> <script type="text/javascript"> $('slideshow').style.display='none'; $('wrapper').style.display='block'; var slideshow=new TINY.slideshow("slideshow"); window.onload=function(){ slideshow.auto=true; slideshow.speed=9; slideshow.link="linkhover"; slideshow.info="information"; slideshow.thumbs=""; slideshow.left="slideleft"; slideshow.right="slideright"; slideshow.scrollSpeed=4; slideshow.spacing=5; slideshow.active="#fff"; slideshow.init("slideshow","image","imgprev","imgnext","imglink"); } </script></div> <div class="Separator"></div>

That gets it sort of working. You are missing the support images:

left.gif

right.gif

scroll-left.gif

scroll-right.gif

which should be in:

/WebRoot/ntdb2/Shops/didi6439/MediaGallery/images/

Place those in that folder. You also need more than the one image for the slide show. Right now you only have:

/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg

I'm not sure why, but the descriptions aren't showing up. I think you may have edited the style. If so, that could be preventing the descriptions from being seen. But it might be something else. And there's a non-fatal script error:

Code:

Error: element is null Source File: http://www.myav.com.au/WebRoot/ntdb2/LightBox/js/prototype.js Line: 1545

which I'm not sure yet what's causing it, or if it's even related to the slide show.
09-01-2010, 10:20 AM
myav

John - you are a champion!

It looks like i've got it all working. The way the system works I cant put files where I like it they are all in the /MediaGallery folder and if I want something in the head tag it has to be on all pages. But looks good now :):):)

Now I just have to try and solve this error problem, I don't think people like that on an e-commerce site. Do you have any ideas? Other than that it's all good, I just have to fix the spacing a little and also work out how to remove that double underline under the image changer, not sure why that is there either :p

Thanks again, best help I've ever received from any forum anywhere ever.
09-01-2010, 02:33 PM
jscheuer1

It doesn't so much matter where the files are, as long as other code that needs to find them has their correct location. In this case this probably means that you were able to edit the css file to point to the correct location of these resource files. That's a perfectly fine way of dealing with it.

The non-fatal error only shows up under aggressive error checking in Firefox, perhaps others. It does not show up in IE as the dreaded status bar yellow triangle. So I wouldn't worry about it. Most users will never see it.

However, I'm now seeing another error that does show up in IE in the status bar. It doesn't happen until after the slide show runs for a little while. It does look to be related to the slide show. It's also non-fatal, but disturbing in that it shows up in the status bar. I will have to look into it.

The dotted lines are are each produced by:

HTML Code:

<div class="Separator"></div>

Code:

<script type="text/javascript" src="/WebRoot/ntdb2/Shops/didi6439/MediaGallery/compressed.js"></script> <script type="text/javascript"> $('slideshow').style.display='none'; $('wrapper').style.display='block'; var slideshow=new TINY.slideshow("slideshow"); window.onload=function(){ slideshow.auto=true; slideshow.speed=5; slideshow.link="linkhover"; slideshow.info="information"; slideshow.thumbs=""; slideshow.left="slideleft"; slideshow.right="slideright"; slideshow.scrollSpeed=4; slideshow.spacing=5; slideshow.active="#fff"; slideshow.init("slideshow","image","imgprev","imgnext","imglink"); } </script></div> <div class="Separator"></div></div> <div class="Separator"></div>

Get rid of one of those and there will be only one dotted line. Get rid of both, and there will be no dotted line.
09-01-2010, 04:05 PM
jscheuer1

1 Attachment(s)

OK, the first error I was talking about does show up in IE, but only as the page unloads. As a result, the user never sees it.

Now, I'm wondering - if you can add a script like compressed.js, why can't you change a script like prototype.js? Just asking.

On to the second error. This one is intermittent, and appears to be IE only. It definitely relates to the slide show, but doesn't show up in your host's example, only yours. It may be cause by an interaction with scripts on your page that aren't the same as on the host's example, or by a deviation in markup, perhaps something else. But since it's non-fatal, we can catch the error so that it doesn't show up in the status bar.

I'm attaching an updated version of compressed.js that takes care of that:

Attachment 3508

I'm not 100% sure this fixes it, more like 99%. As I say, it's intermittent. But logically, it should, and I've been running it for about an hour now with no problem.