2 jquery in una pagina

[forte78]

sto provando questo js e funzia

<style type="text/css">
ul.ppt {
position: relative;
}

.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}

.ppt img {

background-color: #FFFFFF;
}
</style>






<div id="1">
<ul class="ppt">
<table border="0" cellspacing="0" cellpadding="0">
<tr>

<td width="495" valign="top">



[*][img]test1.jpg[/img]</img>[*][img]test2.jpg[/img]</img>





</td></tr></table>[/list]</td>






<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');

function animate() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}


$(function() {
setInterval( "animate()", 5000 );
} );
</script>


</div>







La mia domanda è la seguente :


A fianco devo inserire un altra galleria immagini (quindi nella stessa pagina)


come mi devo comportare copiando lo stesso codice di cui sopra cosa devo aggiungere o modificare ....(devo copiare alterando quali variabili ?)



Vi prego ho bisogno di una mano.

[forte78]

amici qualche news ......

[forte78]

vi posto i test che sto facendo e il malfunzionamento del 2 spazio foto che nn si muove


<style type="text/css">
ul.ppt {
position: relative;
}

.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}

.ppt img {

background-color: #FFFFFF;
}
</style>


<style type="text/css">
ul.pippo {
position: relative;
}

.pippo li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}

.pippo img {

background-color: #FFFFFF;
}
</style>










<div id="1">
<ul class="ppt">
<table border="0" cellspacing="0" cellpadding="0">
<tr>

<td width="495" valign="top">



[*][img]test1.jpg[/img]</img>[*][img]test2.jpg[/img]</img>





</td></tr></table>[/list]</td>






<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');

function animate() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}


$(function() {
setInterval( "animate()", 5000 );
} );
</script>


</div>


















<div id="2">
<ul class="pippo">
<table border="0" cellspacing="0" cellpadding="0">
<tr>

<td width="495" valign="top">



[*][img]test1.jpg[/img]</img>[*][img]test2.jpg[/img]</img>





</td></tr></table>[/list]</td>






<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">
$('.pippo li:gt(0)').hide();
$('.pippo li:last').addClass('last');
var cur = $('.pippo li:first');

function animate() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.pippo li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}


$(function() {
setInterval( "animate()", 5000 );
} );
</script>
</div>











la 1 nn si muove la 2 si muove mai perfavore aiutatemi a far divenire le 2 animazioni funzionanti correttamente.


Grazie

[cavicchiandrea]

Ma hai provato ad inserire un'altra "galleria" identica (cambiando solo le foto) cosi:
<div id="uno">
<ul class="ppt">
<table border="0" cellspacing="0" cellpadding="0">
<tr>

<td width="495" valign="top">



[*][img]test1.jpg[/img]</img>[*][img]test2.jpg[/img]</img>





</td></tr></table>[/list]</td>
</div>
<div id="due">
<ul class="ppt">
<table border="0" cellspacing="0" cellpadding="0">
<tr>

<td width="495" valign="top">



[*][img]test3.jpg[/img]</img>[*][img]test4.jpg[/img]</img>





</td></tr></table>[/list]</td>
</div>
A) Non usare numeri per gli id
B) io cambierei nome alla funzione animate() visto che è un azione di jquery stesso, per scrupolo non si sa mai che possa creare "incomprensioni" nel browser

[cavicchiandrea]

Non può funzionare hai cambiato le classi da ppt a pippo, prova come t'ho detto io.

[forte78]

la prima galleria ora funziona male cioe parte la prima immagine poi la seconda si vede mezzosecondo e torna la prima

la 2 galleria nn si vede per niente

ho fatto come hai detto tu

guarda..........................

<style type="text/css">
ul.ppt {
position: relative;
}

.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}

.ppt img {

background-color: #FFFFFF;
}
</style>





<div id="primo">
<ul class="ppt">
<table border="0" cellspacing="0" cellpadding="0">
<tr>

<td width="495" valign="top">



[*][img]test1.jpg[/img]</img>[*][img]test2.jpg[/img]</img>





</td></tr></table>[/list]</td>






<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');

function test1() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}


$(function() {
setInterval( "test1()", 5000 );
} );
</script>


</div>



<div id="secondo">
<ul class="ppt">
<table border="0" cellspacing="0" cellpadding="0">
<tr>

<td width="495" valign="top">



[*][img]test3.jpg[/img]</img>[*][img]test4.jpg[/img]</img>





</td></tr></table>[/list]</td>





<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');

function test2() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}


$(function() {
setInterval( "test2()", 5000 );
} );
</script>

</div>















fammi sapere

[cavicchiandrea]

Devi "raddoppiare" solo i div contenitori uno e due non gli script e le funzioni la libreria e metti tutto lo script attuale e la libreria jquery dentro i tag <head>...</head>