Conflicting script with Ultimate Fade Show slider

**chadlexmorgan** · 08-18-2013, 05:24 AM

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

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

3) Describe problem: Something is conflicting when I add this script to my site. Some of the other scripts stop working. When I took out this script everything went back to normal. Here is a link to my site http://www.rezzurrectiontaxidermy.com.

Here is my code:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rezzurrection Taxedermy</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/media-queries.css" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.delay.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>



<script>
	$(document).ready(function() {	
		$("#menu, #white_line, #logo").css("opacity","0");
		$("#menu").stop().animate({
				opacity: 0.9,
				marginLeft: '50px' 
		}, 2400, 'easeInSine');
		$("#white_line, #logo").stop().animate(
			{opacity: 0.7},
			{duration:2400,easing: 'easeInSine'
		})
	
		$('#menu span').mouseenter(function(element) {
			$("#menu ul li").css("opacity","1");
			$('#white_line').stop().animate(
				{top: 40, height:300},
				{duration:500,easing: 'easeOutBack'}
			)
			$("#menu ul li").eachDelay(function(){ 
				$(this).stop().animate({
				opacity: 1,
				marginLeft: '0px',
				backgroundPosition: "150px 0px"
				}, 600, 'easeOutBack');			
			}, 30);			
		});
		
		$('#menu').mouseleave(function(element) {
			$("#menu ul li").eachDelay(function(index){ 
				$(this).stop().animate({
				opacity: 0,
				marginLeft: '-200px',
				backgroundPosition: "150px 0px"
				}, 600, 'linear');	
				if(index == $("#menu ul li").size() -1){
					$('#white_line').stop().animate(
						{top: 79, height:1},
						{duration:600,easing: 'easeInBack'
					})
				}
			}, 30);
			
			
		});
		
		
		
		
		$('#menu ul li').mouseenter(function(element) {			
			$('#menu ul li').not(this).stop().animate({
				backgroundPosition: "150px 0px",
				opacity: '0.5' 
			}, 500, 'linear');
			$(this).stop().animate({
				backgroundPosition: "300px 0px",
				opacity: '1' 
			}, 600, 'easeOutBounce');	
			$(this).find('a').css("color","#916153");
		});
		
		$('#menu ul li').mouseleave(function(element) {			
			$(this).stop().animate({
				backgroundPosition: "150px 0px",
				opacity: '1' 
			}, 200, 'linear');	
			$(this).find('a').css("color","#000");
		});
		
	});
</script>

<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=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [1000, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["./Rez_Pics/slide1.png"],
		["./Rez_Pics/slide2.png"],
		["./Rez_Pics/slide3.png"],
		["./Rez_Pics/slide4.png"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "none",
	togglerid: "slideshowtoggler"
})

</script>
<!--[if lt IE 9]>
<style type="text/css">
#bg {
	background-image: none !important;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Logo2.jpg', sizingMethod='scale');
}
</style>
<![endif]-->
</head>
<body >

	<div id="pagewrap">
		
			<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;"></div>
		

	<div id="content1">		
		<div id="filter"></div>		
		<div id="white_line"></div>
		<div id="menu">
			<span></span>
			<ul>
				<li class="item1"><a href="javascript:zxcSlidePage.item1('pages',1)">Gallery</a></li>
				<li class="item2"><a href="javascript:zxcSlidePage.item2('pages',1)">Field Care</a></li>
				<li class="item3"><a href="javascript:zxcSlidePage.item3('pages',1)">Braggin' Rights</a></li>
				<li class="item4"><a href="javascript:zxcSlidePage.item4('pages',1)">Contact</a></li>
				
			</ul>
			
		</div>
	</div>
		<div id="logo"><a href="./index.html"><img src="./Rez_Pics/RezzTax-Black2.png"></a></div>
	</div>
	<div id="pages" >
   		 <div id="1" class="page">Coming Soon!!</div>
    		 <div id="2" class="page">
			<div id="fadeshow1"></div>
			<div id="slideshowtoggler">
				<a href="#" class="prev">		
					<img src="./Rez_Pics/left.png" style="border-width:0" /></a> 
						<span class="status" style="margin:0 50px; font-weight:bold"></span> 
				<a href="#" class="next">
					<img src="./Rez_Pics/right.png" style="border-width:0" /></a>
			</div>
		 </div>
   		 <div id="3" class="page">Coming Soon!!</div>
    		 <div id="4" class="page">Coming Soon!!</div>
  	</div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcSlidePage={

 Open:function(id,n){
  var o=this['zxc'+id],a;
  if (o){
   a=o.lst;
   a[0][0].style.zIndex='1';
   this.animate(o,a[0],a[0][4],a[0][2],new Date(),o.ms,'c',Math.PI/(2*o.ms));
   this.animate(o,a[1],a[1][4],a[1][2],new Date(),o.ms,'c',Math.PI/(2*o.ms));
   a=o.lst=o.ary[n];
   a[0][0].style.zIndex='2';
   this.animate(o,a[0],a[0][4],a[0][3],new Date(),o.ms,'s',Math.PI/(2*o.ms));
   this.animate(o,a[1],a[1][4],a[1][3],new Date(),o.ms,'s',Math.PI/(2*o.ms));
  }
  return false;
 },

 init:function(o){
  var id=o.MenuID,pgs=document.getElementById(o.PagesID),f=o.From,t=o.To,ms=o.Animate,f=typeof(f)=='number'?f:0,t=typeof(t)=='number'?t:0,clds=pgs.childNodes,m=document.getElementById(id),as=m.getElementsByTagName('A'),a,ary=[],z0=0;
  for (;z0<clds.length;z0++){
   a=as[ary.length];
   if (a&&clds[z0].nodeType==1){
    this.addevt(a,'click','Open',id,ary.length);
    ary.push([[clds[z0],'left',f,t,f],[clds[z0],'',0,100,0]]);
    clds[z0].style.left=f+'px';
   }
  }
  o.ary=ary;
  o.ms=typeof(ms)=='number'?ms:1000;
  o.lst=o.ary[0];
  this['zxc'+id]=o;
 },

 animate:function(o,a,f,t,srt,mS,s,i){
  clearTimeout(a[5]);
  var oop=this,ms=new Date()-srt,n=s=='s'?(t-f)*Math.sin(i*ms)+f:s=='c'?t-(t-f)*Math.cos(i*ms):(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[4]=Math.max(f<0||t<0?n:0,n);
   a[1]?a[0].style[a[1]]=a[4]+'px':oop.opc(a[0],a[4]);
  }
  if (ms<mS){
   a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,s,i); },10);
  }
  else {
   a[4]=t;
   a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
   t==a[2]?a[0].style.zIndex='0':null;
  }
 },

 opc:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }



}


zxcSlidePage.init({
 MenuID:'menu',
 PagesID:'pages',
 From:-1020,
 To:100,
 Animate:1000
});

/*]]>*/
</script>

</body>
</html>

**jscheuer1** · 08-18-2013, 07:29 AM

The slideshow isn't going to work unless there are images for it. Currently three of the ones set up for it are 404 Not Found:

slide1.png
slide2.png
slide3.png

There are images:

Slide1.png
Slide2.png
Slide3.png

And there are two versions of jQuery on the page. And the slideshow by default is in noConflict mode which is also a problem.

Once I got it working, there's not really enough room for it. So I positioned as far down the page as I could, just to see if the other stuff worked, it seemed to.

Here's a copy of what I did:

slide-h.zip

**chadlexmorgan** · 08-18-2013, 01:19 PM

That is basically where I want it position, and centered. But I put the slideshow inside "div id 2" so that it would be hidden until the menu item "Field care" was clicked. Will that not work with particular script? Also fixed the spelling error with the images.

Code:

<div id="menu">
			<span></span>
			<ul>
				<li class="item1"><a href="javascript:zxcSlidePage.item1('pages',1)">Gallery</a></li>
				<li class="item2"><a href="javascript:zxcSlidePage.item2('pages',1)">Field Care</a></li>
				<li class="item3"><a href="javascript:zxcSlidePage.item3('pages',1)">Braggin' Rights</a></li>
				<li class="item4"><a href="javascript:zxcSlidePage.item4('pages',1)">Contact</a></li>
				
			</ul>
			
		</div>
	</div>
		<div id="logo"><a href="./index.html"><img src="./Rez_Pics/RezzTax-Black2.png"></a></div>
	</div>
<div id="pages" >
   		 <div id="1" class="page">Coming Soon!!</div>
    		 <div id="2" class="page">
			<div id="fadeshow1"></div>
			<div id="slideshowtoggler">
				<a href="#" class="prev">		
					<img src="./Rez_Pics/left.png" style="border-width:0" /></a> 
						<span class="status" style="margin:0 50px; font-weight:bold"></span> 
				<a href="#" class="next">
					<img src="./Rez_Pics/right.png" style="border-width:0" /></a>
			</div>
		 </div>
   		 <div id="3" class="page">Coming Soon!!</div>
    		 <div id="4" class="page">Coming Soon!!</div>
  	</div>

**Beverleyh** · 08-18-2013, 02:38 PM

Just a note on the naming convention for classes and ids. From the w3c docs; http://www.w3.org/TR/CSS21/syndata.html#characters

In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.

It might be the case that a class/id starting with a number works in some browsers (IE?) and not others, so depending on where you're testing, it could be that things appear to work OK, while in other browsers, problems may present themselves.

A simple fix could be to prefix your number class/id with an underscore, but remember to update both your markup and stylesheet.

**jscheuer1** · 08-18-2013, 04:39 PM

Right Beverley, and also be sure to change them in any javascript that uses them, where of course they now have to be quoted as strings. However, it's been my experience that it's a much rarer problem. Mostly it occurs in scripts where sometimes the id or class gets treated like a number instead of as a string, leading to unexpected results. Best to make the change now though, than be scratching your head later as to why something won't work.

I also notice that there's a mishmash of scripts on the page, with jQuery - which can do all sorts of animations, and a separate animation script (looks like Vic's (vwphillips) work). I'd be inclined, since you're already using jQuery, to let it handle all of the animations. But that's a separate issue. For now I've tried to make something up like what I think you're asking for in your last post:

slide-h-2.zip

**chadlexmorgan** · 08-18-2013, 05:15 PM

Ok, I see what you've done. Instead of trying to use another script using jQuery to animate things, just use the one script to do it all. What you made is what I was looking for. So basically I can get rid of the (Vic"s work).. right? Thank you guys for all your work and comments.