PDA

View Full Version : Ultimate Fade-in slideshow



remoteone
09-21-2010, 09:40 AM
1) Script Title: Ultimate Fade-in slideshow
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
3) Describe problem:

I have script running a small side banner in my cs-cart store:
www.remoteone.com.au (http://www.remoteone.com.au)
The script itself (unique name) runs fine, but it generates errors that stop other script on products pages from working.
I have put the <head> sections within the banner script itself.

If I disable the banner, (Ultimate Fade-in slideshow) the cart works ok again.

Any ideas? I can post some firebug error logs if that helps?
Cheers

remoteone
09-21-2010, 10:15 AM
Heres the FireBug Errors when loading Product page:
jQuery.runCart is not a function
http://www.remoteone.com.au/ps3-ir-to-bluetooth-adaptors/re-bl-xtended-ps32bt-ir-repeater-kit.html
Line 98

jQuery.loadAjaxLinks is not a function
http://www.remoteone.com.au/js/ajax.js
Line 332

expanded:
*
jQuery.runCart is not a function
(?)()re-bl-...it.html (line 98)
(?)()1 (line 1)
(?)()1 (line 1)
(?)(Object { name="d"}, Object { name="a"}, Object { name="c"})1 (line 1)
(?)()1 (line 1)
jQuery.runCart('C');
re-bl-...it.html (line 98)

jQuery.loadAjaxLinks is not a function
(?)()ajax.js (line 332)
(?)(Object { name="b"})1 (line 1)
(?)()1 (line 1)
jQuery.loadAjaxLinks($('a.cm-ajax-update'));

jscheuer1
09-21-2010, 11:41 AM
You end up with jQuery twice on the page, and it's two different versions:



<link href="/lib/autocomplete/autocomplete.css" rel="stylesheet" type="text/css" />
<link href="/skins/remoteone/customer/addons/tags/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/core.js"></script>
<script type="text/javascript" src="/js/ajax.js"></script>
<script type="text/javascript">
//<![CDATA[
var index_script = 'index.ph . . .

And (from what I assume is the banner include):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="/js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery_rti1=new fadeSlideShow({
wrapperid: "fadeshow_r . . .


The fadeslideshow.js script puts jQuery into noConflict mode. This removes access to the $ variable from any other jQuery code that uses it if that code isn't written to work in noConflict mode, which some key parts at least of the other jQuery code on the page there are not.


To fix the first issue, remove the second highlighted tag (the one from the include), and replace the first one with it.

To fix the second issue, rather than pick through the code to get it all working in noConflict mode, simply take jQuery out of noConflict mode by redeclaring the $ variable as jQuery.

So you will end up with:



<link href="/lib/autocomplete/autocomplete.css" rel="stylesheet" type="text/css" />
<link href="/skins/remoteone/customer/addons/tags/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/core.js"></script>
<script type="text/javascript" src="/js/ajax.js"></script>
<script type="text/javascript">
//<![CDATA[
var index_script = 'index.ph . . .

And in the include (removing the script here that we just replaced into the above, plus adding the highlighted):




<script type="text/javascript" src="/js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var $ = jQuery, mygallery_rti1=new fadeSlideShow({
wrapperid: "fadeshow_r . . .

remoteone
02-03-2011, 02:12 AM
Thanks for your help John.
I am just revisiting this problem today.
Your advice to use only one instance of jQuery solved this issue. However I actually needed to do the opposite, and remove
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> because
<script type="text/javascript" src=""></script> seems to be fundamental to the operation of the website and I did not want to change the script.tpl file in csCart as I fear that other aspects of the cart may be affected.

For now it seems to work using CS-Cart supplied "/lib/jquery/jquery.js" instead of the "...ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

Are there any concerns regarding this method?

remoteone
02-03-2011, 08:39 AM
Had a problem that the my dropdown menu would be a few layers behind the images being displayed for this JS .

replaced:

<div id="fadeshow_1"></div>
with:

<div style="position: absolute; z-index: 2;" align="left" id="fadeshow_1"></div>
Any z-index setting below 6 seemed to work.
Ill eventually set this in styles.css