jQuery Tools scrollable Problem

[lightdream]

Moin,

ich hab da ein kleines Problem mit der scrollable Funktion der Tools für jQuery. Egal wie viele Bilder ich aneinander hänge am Ende eines jeden Durchlaufes bleibt ein oder zwei leere Felder bis die Schleife wieder von vorn beginnt.

Hat jemand Erfahrung und evtl. einen Tipp für mich?

Hier mal der Code für die Funktion wie ich ihn verwendet habe:

#("div.scrollable").scrollable({mousewheel: true, circular: true});

Danke schon mal für Eure Tipps.

 

[CPoly]

Du solltest uns noch etwas von deinem Markup zur Verfügung stellen, denn der Fehler liegt vermutlich nicht in der einen Zeile Javascript.

 

[lightdream]

Okay, kein Problem.

CSS:

.scrollable{
	position:relative;
	overflow:hidden;
	width: 773px;
	height:100px;
	text-align:center; 
	height:120px; 
	background:url('/images/catering/spezialCatering/sliderBackground.png') repeat-x;
}

.artikel{
	height:100px; 
	padding:0 10px 0 10px; 
	padding-top:10px;
}

HTML:

<div class="scrollable">
      <div class="items">
        <div class="artikel"><h5><img src="images/kesselhaus/kesselhaus_1.jpg" title="Kesselhaus Impressionen"/></h5></div>
        <div class="artikel"><h5><img src="images/kesselhaus/kesselhaus_2.jpg" title="Kesselhaus Impressionen"/></h5></div>
...
      </div>
 </div>

Im Div "items sind 25 DIVs "artikel" welche dann scrollen. Ich hffe das genügt an Code

 

[lightdream]

Keiner eine Idee?
Das ist irgendwie nervig mit dem Leerfeld am Ende. Hab leider auch nirgends eine Antwort auf das Problem finden können.

 

[G470]

ok, das liegt an dem Klonband. es werden ja jeweils zwei Klone deiner Ihalte erzeugt, damit du kontinuierlich scrollen kannst.

Das ist glaube ich die Funktion die du brauchst...

/*
 * call this function on a scrollable node to add some more clones on the right side of the carousel
 * as the jQuery Tools Scrollable plugin is build to just show one item on screen at once (not
 * multiple small elements). This function fills up the empty space right to the carousel with dummy
 * nodes
 */
jQuery.fn.scrollableAddClones = function() {
  // grab scrollable plugin
  var scrollable;
  if (!(scrollable = $(this).data('scrollable')) || !scrollable.getConf().circular)
    return;
  // grab scrollable elements and remember it's count
  var nodes = scrollable.getItems();
  var length = nodes.length;
  // grab class for the nodes
  var clonedClass = scrollable.getConf().clonedClass;
  // get wrap object to append the clones to
  var wrap = scrollable.getItemWrap();
  // add 8 clone objects - start at 1 as element[0] was already cloned by scrollable()
  for (var i = 1; i <= 8; i++) {
    nodes.eq(i % length).clone().addClass(clonedClass).appendTo(wrap);
  }
}

natürlich musst du die Funktion dann auch aufrufen

$('#meinstuff').scrollableAddClones();

die id meinstuff kannst du mit deiner id austauschen.