nordi
Erfahrenes Mitglied
Hallo, ich habe ein Problem mit einem vertikalen Slider. Ich habe das Grundgerüst von diesem hier genommen und ein wenig an mein Layout eingepasst. (http://valums.com/files/2009/menu/final.htm)
Ich würde nun gerne mehrere Laufbänder via onclick ein und ausblenden lassen. Man hat oben quasi die Navigation mit "Galerie 1", "Galerie 2", "Galerie X" welche hinterlegt sind mit dem onlick-Attribut.
Die Funktion für das onlick ist wie folgt:
Die Galerien sind wie folgt in die Seite eingebettet:
Soweit so gut. Das erste Fotolaufband funktioniert auch super mit dem gewünschten Effekt. Wenn ich jetzt auf "Galerie 2" klicke, zeigt er die Fotos an, aber ohne Effekt - also die Bilder bewegen sich nicht mit der Maus. Woran kann das liegen? Kann mir jemand nen Tipp geben?
Ich würde nun gerne mehrere Laufbänder via onclick ein und ausblenden lassen. Man hat oben quasi die Navigation mit "Galerie 1", "Galerie 2", "Galerie X" welche hinterlegt sind mit dem onlick-Attribut.
Die Funktion für das onlick ist wie folgt:
Code:
$().ready(function() {
for(i=1;i<=3;i++) {document.getElementById('content'+i).style.display='block';}
function anzeigen(das) {
for(i=1;i<=3;i++) {
document.getElementById('content'+i).style.display='none';}
document.getElementById('content'+das).style.display='block';}
// Funktion für den Laufbandeffekt:
$(function(){
//Get our elements for faster access and set overlay width
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
ulPadding = 15;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
Die Galerien sind wie folgt in die Seite eingebettet:
HTML:
<div id="content1" style="display:block;">
<div class="sc_menu">
<ul class="sc_menu">
<li>Bild1</li>
<li>Bild2</li>
</ul>
</div>
</div>
// Zweite Galerie
<div id="content2" style="display:none;">
<div class="sc_menu">
<ul class="sc_menu">
<li>Bild1</li>
<li>Bild2</li>
</ul>
</div>
</div>
Soweit so gut. Das erste Fotolaufband funktioniert auch super mit dem gewünschten Effekt. Wenn ich jetzt auf "Galerie 2" klicke, zeigt er die Fotos an, aber ohne Effekt - also die Bilder bewegen sich nicht mit der Maus. Woran kann das liegen? Kann mir jemand nen Tipp geben?