Meerdere slideshows per pagina

[jjaschij]

Hallo,

Op mijn website heb ik een slideshow staan gemaakt met javascript (ik wil namelijk af van Flash). Echter nu ben ik erachter gekomen dat ik maar 1 slide per javascript kan plaatsen althans ik weet niet hoe ik er 2 of zelfs 3 wat ik uiteindelijk wil moet plaatsen. de url is www.toernooimennus.nl/2012.php Ik wil uiteindelijk een slide show in het blokje foto's het blokje sponsors en en grote blok waar nu een foto van de band MmooZz in staat. Ik heb veel gezocht op internet maar ben gewoon niet echt goed in javascript en kom er niet uit hopelijk kan iemand mij helpen.

CSS code:

#slideshow {
position:relative;
height:110px;
width:277px;
}

#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}

-->
</style>

Javascript code:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});

</script>

Html code: (nu heb ik deze code twee keer gebruikt ook in het blokje sponsors wat dus niet lukt)

<div id="slideshow">
<img src="images/foto1.jpg" alt="Slideshow Image 1" class="active" />
<img src="images/foto2.jpg" alt="Slideshow Image 2" />
<img src="images/foto3.jpg" alt="Slideshow Image 3" /></div>


Hopelijk kan iemand mij helpen, alvast bedankt.

Gr John

 

[csshunter]

Hoi John,
Op dit moment hebben de slideshow-kandidaten "Foto's" en "Sponsors" alle twee dezelfde id: <div id="slideshow">.
Maar een id is een unieke identificatie, en mag maar 1 keer op een pagina gebruikt worden. Daarom zal "Foto's" het wel doen, en "Sponsors" niet.

• Klopt: als ik in Firebug even online de eerste <div id="slideshow"> verander in <div id="niks">, dan begint spontaan de slideshow van Sponsors te draaien.

Als je ze parallel wilt laten draaien, zal er een <div id="slideshow1"> en een <div id="slideshow2"> gemaakt moeten worden, met aangepaste script-functies:

function slideSwitch() { ... }
zal moeten worden function slideSwitch1() {...}, met telkens #slideshow1 waar nu staat #slideshow.

Op dezelfde manier kan een function slideSwitch2() {...} aangemaakt worden, met telkens #slideshow2 waar nu staat #slideshow.

De functie $(function() { setInterval( "slideSwitch()", 5000 ); }); zal moeten worden:
[JS]$(function() {
setInterval( "slideSwitch1()", 5000 );
setInterval( "slideSwitch2()", 5000 );
});[/JS]
Geen 100% garantie, maar ik denk dat het zo zou moeten werken.

Met vriendelijke groet,
CSShunter
__________
O ja, ook de css van de betreffende div'jes even aanpassen.

 

[jjaschij]

Hoi Css Hunter

Bedankt voor je reactie ik dacht namelijk dat het opgelost was echter loop ik nu tegen het volgende probleem aan. Ik heb nu twee scripts slideSwitch1 en slideSwitch2 ook twee divs aangemaakt slideshow1 en slideshow2, vervolgens zoals jij zei alles vervangen.
Nu leek het erop dat hij het eindelijk deed, niet dus. Nu loopt het blokje sponsors goed alleen het blokje foto's begint wel maar stopt op het einde, deze gaat niet door. Daarnaast als ik het tempo (interval) verander wat eigenlijk niet echt nodig is dan slaan ze een beetje op hol zelfs mijn twitterbalk loopt dan niet meer helemaal soepel.

Weet iemand hoe ik dit op moet lossen?

Alvast bedankt

Gr John (www.toernooimennus.nl/2012.php)

 

[csshunter]

Hoi John,
In regel 405 van je broncode staat (in de slideSwitch1-functie):
[JS]: $('#slideshow IMG:first');[/JS]
Dat moet nog worden:
[JS]: $('#slideshow1 IMG:first');[/JS]
want intussen bestaat #slideshow niet meer, dus kan de eerste slide van de Foto's niet gevonden worden voor het herhalen.

De interval-tijd is nu 5000 (in millisec.), dus 5 sec.; met 4000 of 3000 zouden ze niet op hol mogen slaan, lijkt me.

Met vriendelijke groet,
CSShunter

 

[jjaschij]

Super bedankt hij werkt nu perfect!!

Gr John