serialScroll mit jQuery - Erstellung eines Scrolls von div's

elamela · 25.03.2011

Hallo,

ich habe folgenden Quellcode:

HTML:

<!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>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#related {
    margin:10px 0;
    height:185px;
    width:1200px;
}

#related div {
    overflow:hidden;
}    

.arrow {
    width:20px;
    height:190px;
    vertical-align:middle;
    background-color:#CCCCCC;
    position:absolute;
    top:0;
}
#arrowRight {
    left:790px;
}

.arrow + div {
    width:760px;
    position:absolute;
    left:30px;
    top:0;
}

.related_prods {
    height:190px;
    width:100%;
    background-color:#F06;
    min-width: 1200px;
    overflow: hidden;
}

.related_prods div div:first-child {
    height:125px;
    width:136px;
}

.related_prods > div {
    height:168px;
    width:136px;
    margin:5px 4px;
    padding:3px;
}

.productImage a {
    font-size:12px;
    padding-top:5px;
    line-height:13px;
}

.productImage {
    border: 1px solid #FFF;
    float:left;
}

.productImage img {
    width: 126px;
    height: 136px;
}

-->
</style>
<script type="application/javascript" src="js/scroll/jquery.js"></script>
<script type="application/javascript" src="js/scroll/jquery_cycle_plugin.js"></script>
<script type="application/javascript" src="js/scroll/jquery.serialScroll-min.js"></script>
<script type="application/javascript" src="js/scroll/jquery.scrollTo-min.js"></script>
<script type="application/javascript">
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}; 

jQuery(function( $ ){
    $('#related_prods').serialScroll({
        items: 'div',
        prev: '#related a.prev',
        next: '#related a.next',
        offset: -230,
        start: 1,
        duration: 1200,
        force: true,
        stop: true,
        lock: false,
        cycle: false,
        easing: 'easeOutQuart',
        jump: true
    });
});
</script>
</head>

<body>

<div id="related">          
    <div class="arrow" id="arrowLeft" align="center"><a href="#" class="prev">«</a></div>
    <div>
        <div class="related_prods">
            <div class="productImage">
                <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-44.jpg" />
            </div>
            <div class="productImage">
                <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-47.jpg" />
            </div>
            <div class="productImage">
                <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-48.jpg" />
            </div>
            <div class="productImage">
                <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-42.jpg" />
            </div>
            <div class="productImage">
                <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-43.jpg" />
            </div>
            <div class="productImage">
                <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-suede-42.jpg" />
            </div>
            <div class="productImage">
                <img src="http://www.psd-tutorials.de/forum/images/productimage-picture-fydelity-doppler-stereo-case-suede-44.jpg" />
            </div>
        </div>
    </div>
    <div class="arrow" id="arrowRight" align="center"><a href="#" class="next">»</a></div>
</div>

</body>
</html>

Die Anzahl der Produkte kann variieren und sollte mit den Pfeilen links und rechts per MouseOver zum nächsten Bild animiert werden. Bzw. im Moment per Klick auf den Pfeil. Leider funktioniert mein JS überhaupt nicht! Ich habe dafür folgende Demo (bzw Tutorial) verwendet:
http://demos.flesler.com/jquery/serialScroll/
(siehe die Slideshow)
Hier wurde eine Liste statt div's benutzt, ich denke aber nicht, dass es daran liegt. Oder? (die div's in eine Liste zu konvertieren ist schliesslich kein Problem)
fällt jemanden ein Fehler auf? Weiss er woran es liegen kann, dass mein Skript nicht funktioniert?
Danke im Voraus, und bitte nur konstruktive Beiträge!

Solla · 25.03.2011

AW: serialScroll mit jQuery - Erstellung eines Scrolls von div's

Was genau ist nun Deine Frage? Meine Wahrsagekugel hat noch keinen Frühjahrsputz hinter sich, daher kann ich nicht sehen, was Du fragen willst!

Edit: Ah OK, die Frage kam fast zeitgleich zu meinem Post. Cebito hat Dir ja schon gesagt, wo der Fehler ist

B.G.
Solla

cebito · 25.03.2011

AW: serialScroll mit jQuery - Erstellung eines Scrolls von div's

Du sprichst hier eine ID an

HTML:

$('#related_prods').serialScroll

benutzt aber eine Klasse

HTML:

<div class="related_prods">

elamela · 25.03.2011

AW: serialScroll mit jQuery - Erstellung eines Scrolls von div's

uy danke

bescheuerter Fehler, aber leider funktioniert es immer noch nicht :-/

@solla
sorry ich hatte vorher den text mit in den HTML Code eingebunden

EDIT:
ich habe die div's durch Listen ersetzt und nun funktioniert es!!
jetzt hätte ich aber noch eine Frage:
weiss jemand, ob ich anstelle des klicken auch ein "MouseOver" machen kann? Das muss man glaube ich in der API umstellen (weiss nicht ob in der Cycle oder ScrollTo/SerialScroll)... könnte mir jemand helfen?!