Galerie zum Scrollen

Ein nettes Feature ist eine Galerie die bei Mouseover nach rechts oder links scrollen kann. Dafür brauchen wir die jquery.js und von der Seite von Kelvin Luck aus dem Downloadbereich die jquery.jscrollpane.min.js, und die jquery.jscrollpane.css

Diese Dateien werden im Header der Html Datei eingebunden, zusammen mit zwei eigenen Dateien die hier zu finden sind:
scrl-functions.js
scrollcustom.css


<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="js/scrl-functions.js"></script>
<link type="text/css" href="css/scrollcustom.css" rel="stylesheet" media="all" />

Am rechten und linken Rand der Galerie fangen bei mouseover die Bilder an zu scrollen


So werden die divs eingesetzt:


<div class="scrlcontainer">
  <!-- mouseover Scrollbereich links -->
  <div class="leftscroll"></div>
  <div class="objlistwidth hidden">1608</div>
  <div class="scroll-pane horizontal-only">
    <div class="objlist">
      <div class="objitem">
        <img src ="sonnenuntergang1,jpg"
                width="400" height="300">
      </div>
      <div class="objitem">
        ....
      </div>
    </div>
  </div>
  <div class="rightscroll"></div>
</div>

Da üblicherweise die Galerie dynamisch zusammengestellt wird, z.B. aus einer WordPressgalerie muss entsprechend die class=”objlistwidth” ebenfalls per php gesetzt werden. Der Wert ist die Breite aller Bilder plus dem Zwischenabstand. Ist der Wert zu klein, dann bricht der Fluss in eine zweite Zeile (in den unsichtbaren Bereich) um.