Scrollbar Tutorial

Scrollbar von DynamicDrive

Zunächst benötigt Ihr die Skripte, die Ihr Euch auf der Seite von DynamicDrive downloaden könnt oder auch unten mit der rechten Maustaste:

• facescroll.js
• jquery.ui.touch-punch.min.js
• general.css

... sowie das Bild für den Scrollbalken

• custom-scroll-bar.png

Nun fügt Ihr die unten stehenden Verlinkungen zu den jQuery-Dateien und den Skripten in die HTML des Layouts Eurer Seite ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen.

... achtet dabei auf die relative Pfadangabe zu den Skripten, hier von einer Unterseite von NOF, die sich normalerweise im Ordner “html” befindet, also mit 2 Punkten ../ von der “Home” (Startseite) nur mit einem Punkt ./

Ich habe hier alle 3 Dateien und das Bild vom Scrollbalken in einen Ordner “scrollbar” gepackt, den ich in mein Stammverzeichnis dieses Projektes gelegt habe, also dort wo sich auch die “index.html” befindet.

<link href="../scrollbar/general.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="../scrollbar/jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="../scrollbar/facescroll.js">
/***********************************************
* FaceScroll custom scrollbar (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>

<script type="text/javascript">
        jQuery(function(){ // on page DOM load
                $('#demo1').alternateScroll();
                $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });
                $('#demo3').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });
        })
</script>

... nun zieht Ihr Euch z.B. ein Textfeld auf und tragt den zu scrollenden Inhalt inklusive des DIV-Containers, der sich auf die ID (hier demo1 ) dieser Scroll-Funktion bezieht, in den HTML-Code Editor des Textfeldes ein.

<div id="demo1" style="width:300px; height:250px; padding:20px; background:#FFFFFF; border:1px solid gray; resize:both; overflow:scroll">

     Das ist der scrollbare Inhalt, der hier im DIV-Container steht

</div>

... oder auch auf die ID demo2 (unten). Jedes Objekt muss seine eigene ID erhalten.

<div id="demo2" style="width:400px; height:130px; padding:20px; padding-right:8px; background:lightyellow; border:1px solid gray; overflow:scroll; resize:both;">

     Das ist der scrollbare Inhalt, der hier im DIV-Container steht

</div>

Ebenso habe ich es mit dem DIV-Container für das PHP-Include gemacht...

<div id="demo3" style="width:600px; height:300px; padding:5px; padding-right:8px; background:#E4E4E4; border:1px solid gray; overflow:scroll; resize:both;">

     <?php include ("../html/multimedia.inc"); ?>

<div>

... oder auch bei der “Visual Lightbox”, wobei Ihr die “Head-Section” der “Visual Lightbox” unter den Skripten der Scrollbar einbringen müsst, was ich hier im <>Code Editor dieser Seite in dem “Custom4 Bereich” getan habe und Ihr müsst die jQuery-Datei (jquery.min.js) in der
“Head-Section” der “Visual Lightbox” entfernen, da eine neuere jQuery-Datei bereits in den Skripten der Scrollbar eingetragen ist.

... unten eine Ansicht der “Body-Section” meiner “Visual Lightbox”, die dann wieder in die HTML eines Textfeldes kommt und im
DIV-Container der Scrollbar eingebettet ist.

<div id="demo2" style="width:250px; height:350px; padding:20px; background:#EEEEEE; border:1px solid gray; resize:both; overflow:scroll">
   <!-- Start VisualLightBox.com BODY section id=1 -->
   <div id="vlightbox1">
      <a class="vlightbox1" href="../data/images1/eichhrnchen.jpg" title="Eichhörnchen"><img src="../data/thumbnails1/eichhrnchen.jpg" alt="Eichhörnchen"/></a>
      <a class="vlightbox1" href="../data/images1/hibiskusgelb.jpg" title="Hibiskus gelb"><img src="../data/thumbnails1/hibiskusgelb.jpg" alt="Hibiskus gelb"/></a>
      <a class="vlightbox1" href="../data/images1/hibiskusrot.jpg" title="Hibiskus Rot"><img src="../data/thumbnails1/hibiskusrot.jpg" alt="Hibiskus Rot"/></a>
      <a class="vlightbox1" href="../data/images1/klatschmohn.jpg" title="Klatschmohn"><img src="../data/thumbnails1/klatschmohn.jpg" alt="Klatschmohn"/></a>
      <a class="vlightbox1" href="../data/images1/margerite.jpg" title="Margerite"><img src="../data/thumbnails1/margerite.jpg" alt="Margerite"/></a>
      <a class="vlightbox1" href="../data/images1/peonie.jpg" title="Peonie"><img src="../data/thumbnails1/peonie.jpg" alt="Peonie"/></a>
      <a class="vlightbox1" href="../data/images1/sonnenhut.jpg" title="Sonnenhut"><img src="../data/thumbnails1/sonnenhut.jpg" alt="Sonnenhut"/></a>
      <a class="vlightbox1" href="../data/images1/tulpe.jpg" title="Tulpe"><img src="../data/thumbnails1/tulpe.jpg" alt="Tulpe"/></a>
      <a class="vlb" style="display:none" href="http://visuallightbox.com">Lightbox2 by VisualLightBox.com v5.0</a>
   </div>
   <!-- End VisualLightBox.com BODY section -->
</div>

nach oben

Viel Erfolg !