[Resolvido] Usar slider jquery duas vezes na mesma pagina

[joaogoku613 0]

Olá pessoal preciso de uma ajuda muito urgente não sei mais o que fazer.

 

Pois possuo uma slider jquery Slider jquery.

 

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

 

Como posso arrumar isso, sendo que ja tentei com mais de 20 slides diferentes.

 

Obrigado.

[William Bruno 1501]

Mostre como você tentou fazer.

 

 

você não pode duplicar IDs num documento, logo, terá q instanciar o slider 2 vezes.

[joaogoku613 0]

Olá eu só copiei as divs duas vezes só isso.

 

Porem gostaria de saber o que é preciso fazer para rodar o slid mais que uma vez.

 

obrigado

[William Bruno 1501]

Basta fazer exatamente oque eu disse:

 

Definir IDs únicos(um para cada slide), e instanciar o objeto do plugin 2 vezes.

[joaogoku613 0]

Este é o que eu uso:

 

Se caso não for encomodar poderia me ajudar, pois não entendo muito de javascript.

 

desculpe o encomodo.

 

 

------------------------------------

 

#### html ####

 

<div id="slideShowContainer">

   <div id="slideShow">

   	<ul>
       	<li><img src="img/photos/1.jpg" width="100%" alt="Fish" /></li>
           <li><img src="img/photos/2.jpg" width="100%" alt="Ancient" /></li>
           <li><img src="img/photos/3.jpg" width="100%" alt="Industry" /></li>
           <li><img src="img/photos/4.jpg" width="100%" alt="Rain" /></li>
       </ul>

   </div>

   <a id="previousLink" href="#">»</a>
   <a id="nextLink" href="#">«</a>

</div>

----------------------------------------------------------------------------------------

 

 

#### css ####

 

*{
margin:0;
padding:0;
}

html{
background:url('../img/page_bg_tile.jpg') #202027;
}

body{
color:#999;

background-image:url('../img/contour.png'),url('../img/page_bg.jpg');
background-repeat:no-repeat,no-repeat;
background-position: center 117px, center -200px;

font:15px Calibri,Arial,sans-serif;
border:1px solid transparent;
}

/* Styling the slideshow */

#slideShowContainer{
width:510px;
height:510px;
position:relative;
margin:120px auto 50px;
}

#slideShow{
position:absolute;
height:490px;
width:490px;
background-color:#fff;
margin:10px 0 0 10px;
z-index:100;

-moz-box-shadow:0 0 10px #111;
-webkit-box-shadow:0 0 10px #111;
box-shadow:0 0 10px #111;
}

#slideShow ul{
position:absolute;
top:15px;
right:15px;
bottom:15px;
left:15px;
list-style:none;
overflow:hidden;
}

#slideShow li{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

#slideShowContainer > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('../img/arrows.png') no-repeat;
position:absolute;
top:50%;
margin-top:-21px;
}

#previousLink{
left:-38px;
}

#previousLink:hover{
background-position:bottom left;
}

a#nextLink{
right:-38px;
background-position:top right;
}

#nextLink:hover{
background-position:bottom right;
}

/* General styles */

.note{
margin-bottom:40px;
text-align:center;
}

.credit{
font-size:12px;
}

.credit a{
color:#bbb !important;
}


a, a:visited {
text-decoration:underline;
outline:none;
color:#97CAE6;
}

a:hover{
text-decoration:none;
}

-----------------------------------------------------------------------------------------

 

#### jquery.rotate.js ####

/*
* rotate: A jQuery cssHooks adding a cross browser 'rotate' property to $.fn.css() and $.fn.animate()
*
* Copyright (c) 2010 Louis-Rémi Babé
* Licensed under the MIT license.
* 
* This saved you an hour of work? 
* Send me music http://www.amazon.fr/wishlist/HNTU0468LQON
*
*/
(function($) {

var div = document.createElement('div'),
 divStyle = div.style,
 support = $.support;

support.transform = 
 divStyle.MozTransform === ''? 'MozTransform' :
 (divStyle.MsTransform === ''? 'MsTransform' :
 (divStyle.WebkitTransform === ''? 'WebkitTransform' : 
 (divStyle.OTransform === ''? 'OTransform' :
 false)));
support.matrixFilter = !support.transform && divStyle.filter === '';
div = null;

$.cssNumber.rotate = true;
$.cssHooks.rotate = {
 set: function( elem, value ) {
   var _support = support,
     supportTransform = _support.transform,
     cos, sin,
     centerOrigin;

   if (typeof value === 'string') {
     value = toRadian(value);
   }

   $.data( elem, 'transform', {
     rotate: value
   });

   if (supportTransform) {
     elem.style[supportTransform] = 'rotate('+ value +'rad)';

   } else if (_support.matrixFilter) {
     cos = Math.cos(value);
     sin = Math.sin(value);
     elem.style.filter = [
       "progid:DXImageTransform.Microsoft.Matrix(",
         "M11="+cos+",",
         "M12="+(-sin)+",",
         "M21="+sin+",",
         "M22="+cos+",",
         "SizingMethod='auto expand'",
       ")"
     ].join('');

     // From pbakaus's Transformie http://github.com/pbakaus/transformie
     if(centerOrigin = $.rotate.centerOrigin) {
       elem.style[centerOrigin == 'margin' ? 'marginLeft' : 'left'] = -(elem.offsetWidth/2) + (elem.clientWidth/2) + "px";
       elem.style[centerOrigin == 'margin' ? 'marginTop' : 'top'] = -(elem.offsetHeight/2) + (elem.clientHeight/2) + "px";
     }
   }
 },
 get: function( elem, computed ) {
   var transform = $.data( elem, 'transform' );
   return transform && transform.rotate? transform.rotate : 0;
 }
};
$.fx.step.rotate = function( fx ) {
 $.cssHooks.rotate.set( fx.elem, fx.now+fx.unit );
};

function radToDeg( rad ) {
 return rad * 180 / Math.PI;
}
function toRadian(value) {
 if(value.indexOf("deg") != -1) {
   return parseInt(value,10) * (Math.PI * 2 / 360);
 } else if (value.indexOf("grad") != -1) {
   return parseInt(value,10) * (Math.PI/200);
 }
 return parseFloat(value);
}

$.rotate = {
 centerOrigin: 'margin',
 radToDeg: radToDeg
};

})(jQuery);

-------------------------------------------------------------------------

### script.js ###


$(document).ready(function(){

var slideShow = $('#slideShow'),
	ul = slideShow.find('ul'),
	li = ul.find('li'),
	cnt = li.length;

// As the images are positioned absolutely, the last image will be shown on top.
// This is why we force them in the correct order by assigning z-indexes:

updateZindex();

if($.support.transform){

	// Modern browsers with support for css3 transformations

	li.find('img').css('rotate',function(i){
		// Rotating the images counterclockwise
		return (-90*i) + 'deg';
	});

	// Binding a custom event. the direction and degrees parameters
	// are passed when the event is triggered later on in the code.

	slideShow.bind('rotateContainer',function(e,direction,degrees){

		// Enlarging the slideshow and photo:

		slideShow.animate({
			width		: 510,
			height		: 510,
			marginTop	: 0,
			marginLeft	: 0
		},'fast',function(){

			if(direction == 'next'){

				// Moving the topmost image containing Li at
				// the bottom after a fadeOut animation

				$('li:first').fadeOut('slow',function(){
					$(this).remove().appendTo(ul).show();
					updateZindex();
				});
			}
			else {

				// Showing the bottomost Li element on top 
				// with a fade in animation. Notice that we are
				// updating the z-indexes.

				var liLast = $('li:last').hide().remove().prependTo(ul);
				updateZindex();
				liLast.fadeIn('slow');
			}

			// Rotating the slideShow. css('rotate') gives us the
			// current rotation in radians. We are converting it to
			// degress so we can add 90 or -90 to rotate it to its new value.

			slideShow.animate({				
				rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'
			},'slow').animate({
				width		: 490,
				height		: 490,
				marginTop	: 10,
				marginLeft	: 10
			},'fast');
		});
	});

	// By triggering the custom events below, we can 
	// show the previous / next images in the slideshow.

	slideShow.bind('showNext',function(){
		slideShow.trigger('rotateContainer',['next',90]);
	});

	slideShow.bind('showPrevious',function(){
		slideShow.trigger('rotateContainer',['previous',-90]);
	});
}

else{

	// Fallback for Internet Explorer and older browsers

	slideShow.bind('showNext',function(){
		$('li:first').fadeOut('slow',function(){
			$(this).remove().appendTo(ul).show();
			updateZindex();
		});
	});

	slideShow.bind('showPrevious',function(){
		var liLast = $('li:last').hide().remove().prependTo(ul);
		updateZindex();
		liLast.fadeIn('slow');
	});
}

// Listening for clicks on the arrows, and
// triggering the appropriate event.

$('#previousLink').click(function(){
	if(slideShow.is(':animated')){
		return false;
	}

	slideShow.trigger('showPrevious');
	return false;
});

$('#nextLink').click(function(){
	if(slideShow.is(':animated')){
		return false;
	}

	slideShow.trigger('showNext');
	return false;
});

// This function updates the z-index properties.
function updateZindex(){

	// The CSS method can take a function as its second argument.
	// i is the zero-based index of the element.

	ul.find('li').css('z-index',function(i){
		return cnt-i;
	});
}

});

[William Bruno 1501]

Imagina assim, aqui você tem um:

<div id="slideShowContainer">

   <div id="slideShow">

       <ul>
               <li><img src="img/photos/1.jpg" width="100%" alt="Fish" /></li>
           <li><img src="img/photos/2.jpg" width="100%" alt="Ancient" /></li>
           <li><img src="img/photos/3.jpg" width="100%" alt="Industry" /></li>
           <li><img src="img/photos/4.jpg" width="100%" alt="Rain" /></li>
       </ul>

   </div>

   <a id="previousLink" href="#">»</a>
   <a id="nextLink" href="#">«</a>

</div>

e agora você precisa de outro, então você deve mudar o ID:

<div id="outro_slideShowContainer">

   <div id="outro_slideShow">

       <ul>
               <li><img src="img/photos/1.jpg" width="100%" alt="Fish" /></li>
           <li><img src="img/photos/2.jpg" width="100%" alt="Ancient" /></li>
           <li><img src="img/photos/3.jpg" width="100%" alt="Industry" /></li>
           <li><img src="img/photos/4.jpg" width="100%" alt="Rain" /></li>
       </ul>

   </div>

   <a id="outro_previousLink" href="#">»</a>
   <a id="outro_nextLink" href="#">«</a>

</div>

entendeu ?

e então no js, você deve instanciar novamente:

        var slideShow = $('#slideShow'),

e para o outro:

 

        var slideShow = $('#outro_slideShow'),

entendeu ?

 

corrigindo o css necessário, e o restante do codigo js.

[joaogoku613 0]

Olá amigo, tentei trocar tudo isso, porem o css e as divs ficam fácil para mim, porem já o script não deu certo.

 

Mas agradeço muito pela ajuda sua e desculpe tomar seu tempo.

 

Obrigado

[joaogoku613 0]

Olá pessoal, conseguir resolver, fiz +- como o amigo "William Bruno" me sugeriu:

 

Adicionei novas ID, Dupliquei os objeto e renomeie, tbm no meu caso precisei colocar um script para cada um dos sliders adicionados na mesma pagina.

 

 

Logo poderão ver o resultado no meu novo portfólio; www.joaodesouza.com.br

 

Obrigado.