jQuery Thumbnail-Sscroller in NetObjects Fusion (Variante 1)

 

 

 

Code zum Einfügen in ein Textfeld (bei Verwendung des Scrollers auf der Startseite)

<div id="tS2" class="jThumbnailScroller">
    <div class="jTscrollerContainer">
        <div class="jTscroller">
            <a href="#"><img src="./assets/images/bild1.jpg" /></a>
            <a href="#"><img src="./assets/images/bild2.jpg" /></a>
            <a href="#"><img src="./assets/images/bild3.jpg" /></a>
            <a href="#"><img src="./assets/images/bild4.jpg" /></a>
            <a href="#"><img src="./assets/images/bild5.jpg" /></a>
            <a href="#"><img src="./assets/images/bild6.jpg" /></a>
            <a href="#"><img src="./assets/images/bild7.jpg" /></a>
            <a href="#"><img src="./assets/images/bild8.jpg" /></a>
            <a href="#"><img src="./assets/images/bild9.jpg" /></a>
            <a href="#"><img src="./assets/images/bild10.jpg" /></a>
            <a href="#"><img src="./assets/images/bild11.jpg" /></a>
            <a href="#"><img src="./assets/images/bild12.jpg" /></a>
        </div>
    </div>
</div>

 

Code zum Einfügen in ein Textfeld (bei Verwendung des Scrollers auf Unterseiten)

<div id="tS2" class="jThumbnailScroller">
    <div class="jTscrollerContainer">
        <div class="jTscroller">
            <a href="#"><img src="../assets/images/bild1.jpg" /></a>
            <a href="#"><img src="../assets/images/bild2.jpg" /></a>
            <a href="#"><img src="../assets/images/bild3.jpg" /></a>
            <a href="#"><img src="../assets/images/bild4.jpg" /></a>
            <a href="#"><img src="../assets/images/bild5.jpg" /></a>
            <a href="#"><img src="../assets/images/bild6.jpg" /></a>
            <a href="#"><img src="../assets/images/bild7.jpg" /></a>
            <a href="#"><img src="../assets/images/bild8.jpg" /></a>
            <a href="#"><img src="../assets/images/bild9.jpg" /></a>
            <a href="#"><img src="../assets/images/bild10.jpg" /></a>
            <a href="#"><img src="../assets/images/bild11.jpg" /></a>
            <a href="#"><img src="../assets/images/bild12.jpg" /></a>
        </div>
    </div>
</div>

 

Code zum Einfügen am Body-Ende (bei Verwendung des Scrollers auf der Startseite)

<script>
jQuery.noConflict();
(function($){
window.onload=function(){
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
}
})(jQuery);
</script>
<script src="./assets/jquery.thumbnailScroller.js"></script>

 

Code zum Einfügen am Body-Ende (bei Verwendung des Scrollers auf Unterseiten)

<script>
jQuery.noConflict();
(function($){
window.onload=function(){
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
}
})(jQuery);
</script>
<script src="../assets/jquery.thumbnailScroller.js"></script>

 

 

=> zum Tutorial - jQuery Thumbnail-Scroller in NetObjects Fusion einbinden

 

 

 

 

Website_Design_NetObjects_Fusion

    Besuche uns doch auch mal auf...