Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Naguirra84

Erro no momento de rodar slider jquery

Por , em Javascript

Recommended Posts

Naguirra84    0

Naguirra84
Postado

Pois possuo uma slider jquery Slider jquery.

 

Está funcionando tudo certinho, mas quando eu coloco ela na mesma pagina não roda a 2°.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<link href="css/portifolio.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="stylesheet.css" type="text/css"  />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style2.css" />
<script>
    jQuery.noConflict();

    // Put all your code in your document ready area
    jQuery(document).ready(function($){
      // Do jQuery stuff using $
      $("div").hide();
    });

    // Use Prototype with $(...), etc.
    $('someid').hide();
</script>

</head>

<body>

<div id="site">

<div id="menu">
<ul>
 <li><a href="index.html">Home</a></li>
<li><a href="empresa.html">Sobre</a></li>
<li><a href="galeria.html">Portifolio</a></li>
<li><a href="duvidas.html">Serviços</a></li>
<li><a href="contato.html">Contato</a></li>
 </ul></div>

 <div id="topo">
   <div id="logo_topo">Portfolio</div>
    <div id="ender">

    </div>
 </div>


 <div id="web_design">


  <h3>Web Design</h3>
  <ul id="slideshow">
	<li>
		<h3>TinySlideshow v1</h3>
		<span>photos/1.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. </p>
		<a href="#"><img src="thumbnails/t1.jpg" alt="Orange Fish" /></a>
	</li>
	<li>
		<h3>Sea Turtle</h3>
		<span>photos/2.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. </p>
		<img src="thumbnails/t2.jpg" alt="Sea Turtle" />
	</li>
	<li>
		<h3>Red Coral</h3>
		<span>photos/3.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. </p>
		<a href="#"><img src="thumbnails/t3.jpg" alt="Red Coral" /></a>
	</li>
	<li>
		<h3>Coral Reef</h3>
		<span>photos/4.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. </p>
		<a href="#"><img src="thumbnails/t4.jpg" alt="Coral Reef" /></a>
	</li>
	<li>
		<h3>Blue Fish</h3>
		<span>photos/5.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
		<img src="thumbnails/t5.jpg" alt="Blue Fish" />
	</li>
	<li>
		<h3>TinySlideshow v.2</h3>
		<span>photos/yellow-fish.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
		<a href="#"><img src="thumbnails/yellow-fish-thumb.jpg" alt="Yellow Fish" /></a>
	</li>
	<li>
		<h3>Squid</h3>
		<span>photos/squid.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
		<a href="#"><img src="thumbnails/squid-thumb.jpg" alt="Squid" /></a>
	</li>
	<li>
		<h3>Small Fish</h3>
		<span>photos/small-fish.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
		<a href="#"><img src="thumbnails/small-fish-thumb.jpg" alt="Small Fish" /></a>
	</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 id="thumbnails">
		<div id="slideleft" title="Slide Left"></div>
		<div id="slidearea">
			<div id="slider"></div>
		</div>
		<div id="slideright" title="Slide Right"></div>
	</div>
</div>
<script type="text/javascript" src="js/compressed.js"></script>
<script type="text/javascript"  src="js/script.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="slider";
	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 id="web_design_a">


  <h3>Web Design</h3>
<ul id="slideshow2">
	<li>
		<h3>TinySlideshow v1</h3>
		<span>photos/1.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. </p>
		<a href="#"><img src="thumbnails/t1.jpg" alt="Orange Fish" /></a>
	</li>
	<li>
		<h3>Sea Turtle</h3>
		<span>photos/2.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. </p>
		<img src="thumbnails/t2.jpg" alt="Sea Turtle" />
	</li>
	<li>
		<h3>Red Coral</h3>
		<span>photos/3.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. </p>
		<a href="#"><img src="thumbnails/t3.jpg" alt="Red Coral" /></a>
	</li>
	<li>
		<h3>Coral Reef</h3>
		<span>photos/4.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. </p>
		<a href="#"><img src="thumbnails/t4.jpg" alt="Coral Reef" /></a>
	</li>
	<li>
		<h3>Blue Fish</h3>
		<span>photos/5.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
		<img src="thumbnails/t5.jpg" alt="Blue Fish" />
	</li>
	<li>
		<h3>TinySlideshow v.2</h3>
		<span>photos/yellow-fish.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
		<a href="#"><img src="thumbnails/yellow-fish-thumb.jpg" alt="Yellow Fish" /></a>
	</li>
	<li>
		<h3>Squid</h3>
		<span>photos/squid.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
		<a href="#"><img src="thumbnails/squid-thumb.jpg" alt="Squid" /></a>
	</li>
	<li>
		<h3>Small Fish</h3>
		<span>photos/small-fish.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
		<a href="#"><img src="thumbnails/small-fish-thumb.jpg" alt="Small Fish" /></a>
	</li>
</ul>
<div id="wrapper2">
	<div id="fullsize2">
		<div id="imgprev2" class="imgnav2" title="Previous Image"></div>
		<div id="imglink2"></div>
		<div id="imgnext2" class="imgnav2" title="Next Image"></div>
		<div id="image2"></div>
		<div id="information2">
			<h3></h3>
			<p></p>
		</div>
	</div>
	<div id="thumbnails2">
		<div id="slideleft2" title="Slide Left"></div>
		<div id="slidearea2">
			<div id="slider2"></div>
		</div>
		<div id="slideright2" title="Slide Right2"></div>
	</div>
</div>

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

$('slideshow2').style.display='none';
$('wrapper2').style.display='block';
var slideshow2=new TINY.slideshow2("slideshow2");
window.onload=function(){
	slideshow2.auto=true;
	slideshow2.speed=5;
	slideshow2.link="linkhover2";
	slideshow2.info="information2";
	slideshow2.thumbs="slider2";
	slideshow2.left="slideleft2";
	slideshow2.right="slideright2";
	slideshow2.scrollSpeed=4;
	slideshow2.spacing=5;
	slideshow2.active="#fff";
	slideshow2.init("slideshow2","image2","imgprev2","imgnext2","imglink2");
}
</script>

</div>

</div>

 </div>

 

 

Já fiz buscas! testes e nada!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

agrupe as chamadas:

<script type="text/javascript">

$('slideshow2').style.display='none';
       $('wrapper2').style.display='block';
       var slideshow2=new TINY.slideshow2("slideshow2");


       $('slideshow').style.display='none';
       $('wrapper').style.display='block';
       var slideshow=new TINY.slideshow("slideshow");


       window.onload=function(){
               slideshow2.auto=true;
               slideshow2.speed=5;
               slideshow2.link="linkhover2";
               slideshow2.info="information2";
               slideshow2.thumbs="slider2";
               slideshow2.left="slideleft2";
               slideshow2.right="slideright2";
               slideshow2.scrollSpeed=4;
               slideshow2.spacing=5;
               slideshow2.active="#fff";
               slideshow2.init("slideshow2","image2","imgprev2","imgnext2","imglink2");

               slideshow.auto=true;
               slideshow.speed=5;
               slideshow.link="linkhover";
               slideshow.info="information";
               slideshow.thumbs="slider";
               slideshow.left="slideleft";
               slideshow.right="slideright";
               slideshow.scrollSpeed=4;
               slideshow.spacing=5;
               slideshow.active="#fff";
               slideshow.init("slideshow","image","imgprev","imgnext","imglink");
       }
</script>

entendeu ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Naguirra84    0

Naguirra84
Postado

Entendi faz apenas uma leitura!

 

 

 

Implementei mas as imagens não aparecem! O css aparece!

 

na hora que eu tiro a parte que se refere ao slideshow 01 o slideshow 02 funciona perfeitamente!

 

$('slideshow').style.display='none';
       $('wrapper').style.display='block';
       var slideshow=new TINY.slideshow("slideshow");

 

 

var $j = jQuery.noConflict();
$j('#box').css("background","red");

seletor jQuery() para evitar conflito

 

Código script2.js

 

var TINY={};

function $(i){return document.getElementById(i)}
function $$(e,p){p=p||document; return p.getElementsByTagName(e)}

TINY.slideshow2=function(n){
this.infoSpeed=this.imgSpeed=this.speed=10;
this.thumbOpacity=this.navHover=70;
this.navOpacity=25;
this.scrollSpeed=5;
this.letterbox='#000';
this.n=n;
this.c=0;
this.a=[]
};

TINY.slideshow2.prototype={
init:function(s,z,b,f,q){
	s=$(s);
	var m=$$('li',s), i=0, w=0;
	this.l=m.length;
	this.q=$(q);
	this.f=$(z);
	this.r=$(this.info);
	this.o=parseInt(TINY.style.val(z,'width'));
	if(this.thumbs){
		var u=$(this.left), r=$(this.right);
		u.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')');
		u.onmouseout=r.onmouseout=new Function('TINY.scroll.cl("'+this.thumbs+'")');
		r.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')');
		this.p=$(this.thumbs)
	}
	for(i;i<this.l;i++){
		this.a[i]={};
		var h=m[i], a=this.a[i];
		a.t=$$('h3',h)[0].innerHTML;
		a.d=$$('p',h)[0].innerHTML;
		a.l=$$('a',h)[0]?$$('a',h)[0].href:'';
		a.p=$$('span',h)[0].innerHTML;
		if(this.thumbs){
			var g=$$('img',h)[0];
			this.p.appendChild(g);
			w+=parseInt(g.offsetWidth);
			if(i!=this.l-1){
				g.style.marginRight=this.spacing+'px';
				w+=this.spacing
			}
			this.p.style.width=w+'px';
			g.style.opacity=this.thumbOpacity/100;
			g.style.filter='alpha(opacity='+this.thumbOpacity+')';
			g.onmouseover=new Function('TINY.alpha.set(this,100,5)');
			g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)');
			g.onclick=new Function(this.n+'.pr('+i+',1)')
		}
	}
	if(b&&f){
		b=$(B);
		f=$(f);
		b.style.opacity=f.style.opacity=this.navOpacity/100;
		b.style.filter=f.style.filter='alpha(opacity='+this.navOpacity+')';
		b.onmouseover=f.onmouseover=new Function('TINY.alpha.set(this,'+this.navHover+',5)');
		b.onmouseout=f.onmouseout=new Function('TINY.alpha.set(this,'+this.navOpacity+',5)');
		b.onclick=new Function(this.n+'.mv(-1,1)');
		f.onclick=new Function(this.n+'.mv(1,1)')
	}
	this.auto?this.is(0,0):this.is(0,1)
},
mv:function(d,c){
	var t=this.c+d;
	this.c=t=t<0?this.l-1:t>this.l-1?0:t;
	this.pr(t,c)
},
pr:function(t,c){
	clearTimeout(this.lt);
	if(c){
		clearTimeout(this.at)
	}
	this.c=t;
	this.is(t,c)
},
is:function(s,c){
	if(this.info){
		TINY.height.set(this.r,1,this.infoSpeed/2,-1)
	}
	var i=new Image();
	i.style.opacity=0;
	i.style.filter='alpha(opacity=0)';
	this.i=i;
	i.onload=new Function(this.n+'.le('+s+','+c+')');
	i.src=this.a[s].p;
	if(this.thumbs){
		var a=$$('img',this.p), l=a.length, x=0;
		for(x;x<l;x++){
			a[x].style.borderColor=x!=s?'':this.active
		}
	}
},
le:function(s,c){
	this.f.appendChild(this.i);
	var w=this.o-parseInt(this.i.offsetWidth);
	if(w>0){
		var l=Math.floor(w/2);
		this.i.style.borderLeft=l+'px solid '+this.letterbox;
		this.i.style.borderRight=(w-l)+'px solid '+this.letterbox
	}
	TINY.alpha.set(this.i,100,this.imgSpeed);
	var n=new Function(this.n+'.nf('+s+')');
	this.lt=setTimeout(n,this.imgSpeed*100);
	if(!c){
		this.at=setTimeout(new Function(this.n+'.mv(1,0)'),this.speed*1000)
	}
	if(this.a[s].l!=''){
		this.q.onclick=new Function('window.location="'+this.a[s].l+'"');
		this.q.onmouseover=new Function('this.className="'+this.link+'"');
		this.q.onmouseout=new Function('this.className=""');
		this.q.style.cursor='pointer'
	}else{
		this.q.onclick=this.q.onmouseover=null;
		this.q.style.cursor='default'
	}
	var m=$$('img',this.f);
	if(m.length>2){
		this.f.removeChild(m[0])
	}
},
nf:function(s){
	if(this.info){
		s=this.a[s];
		$$('h3',this.r)[0].innerHTML=s.t;
		$$('p',this.r)[0].innerHTML=s.d;
		this.r.style.height='auto';
		var h=parseInt(this.r.offsetHeight);
		this.r.style.height=0;
		TINY.height.set(this.r,h,this.infoSpeed,0)
	}
}
};

TINY.scroll=function(){
return{
	init:function(e,d,s){
		e=typeof e=='object'?e:$(e); var p=e.style.left||TINY.style.val(e,'left'); e.style.left=p;
		var l=d==1?parseInt(e.offsetWidth)-parseInt(e.parentNode.offsetWidth):0; e.si=setInterval(function(){TINY.scroll.mv(e,l,d,s)},20)
	},
	mv:function(e,l,d,s){
		var c=parseInt(e.style.left); if(c==l){TINY.scroll.cl(e)}else{var i=Math.abs(l+c); i=i<s?i:s; var n=c-i*d; e.style.left=n+'px'}
	},
	cl:function(e){e=typeof e=='object'?e:$(e); clearInterval(e.si)}
}
}();

TINY.height=function(){
return{
	set:function(e,h,s,d){
		e=typeof e=='object'?e:$(e); var oh=e.offsetHeight, ho=e.style.height||TINY.style.val(e,'height');
		ho=oh-parseInt(ho); var hd=oh-ho>h?-1:1; clearInterval(e.si); e.si=setInterval(function(){TINY.height.tw(e,h,ho,hd,s)},20)
	},
	tw:function(e,h,ho,hd,s){
		var oh=e.offsetHeight-ho;
		if(oh==h){clearInterval(e.si)}else{if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}}
	}
}
}();

TINY.alpha=function(){
return{
	set:function(e,a,s){
		e=typeof e=='object'?e:$(e); var o=e.style.opacity||TINY.style.val(e,'opacity'),
		d=a>o*100?1:-1; e.style.opacity=o; clearInterval(e.ai); e.ai=setInterval(function(){TINY.alpha.tw(e,a,d,s)},20)
	},
	tw:function(e,a,d,s){
		var o=Math.round(e.style.opacity*100);
		if(o==a){clearInterval(e.ai)}else{var n=o+Math.ceil(Math.abs(a-o)/s)*d; e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'}
	}
}
}();

TINY.style=function(){return{val:function(e,p){e=typeof e=='object'?e:$(e); return e.currentStyle?e.currentStyle[p]:document.defaultView.getComputedStyle(e,null).getPropertyValue(p)}}}();

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito