jquery bildergallerie mit einen thumbs
wolfgang
- javascript
0 ChrisB
hallo zusammen,
ich komme gerade irgendwie nicht weiter.
ich würde gerne eine bildergallerie bauen mit folgenden anforderungen:
ich habe derzeit versucht das ganze mit jquery tools umzusetzen.
folgende skripte hab ich versucht zu kombinieren:
http://flowplayer.org/tools/demos/tabs/index.html
http://flowplayer.org/tools/demos/tabs/wizard.html
http://flowplayer.org/tools/demos/scrollable/vertical.html
leider funktioniert es nicht, da beim vertikalen scrollen gleichzeigt die bildgallerei angesprochen wird und nurnoch die ersten 3 bilder angesprochen werden.
anbei der code:
$(document).ready(function() {
$("ul.tabs").tabs("div.panes > div");
var api = $("ul.tabs").data("tabs");
$("a.next").click(function() {
api.next();
});
$("a.prev").click(function() {
api.prev();
});
$(".scrollable").scrollable({ vertical: true, mousewheel: true });
});
<a class="prev">prev</a>
<!-- root element for scrollable -->
<div class="scrollable vertical">
<!-- root element for the scrollable elements -->
<div class="items">
<!-- first element. contains three rows -->
<div>
<!-- first row -->
<ul class="tabs">
<li class="item"><a href="#" class="w2"><img src="images/index/test.gif" alt="..." /></a></li>
<li class="item"><a href="#" class="w2"><img src="images/index/test.gif" alt="..." /></a></li>
<li class="item"><a href="#" class="w2"><img src="images/index/test.gif" alt="..." /></a></li>
</ul>
</div>
<!-- second element with another three rows (and so on) -->
<div>
<!-- first row -->
<ul class="tabs">
<li class="item"><a href="#" class="w2"><img src="images/index/test.gif" alt="..." /></a></li>
<li class="item"><a href="#" class="w2"><img src="images/index/test.gif" alt="..." /></a></li>
<li class="item"><a href="#" class="w2"><img src="images/index/test.gif" alt="..." /></a></li>
</ul>
</div>
</div>
</div>
<a class="next">next</a>
<!-- tab "panes" -->
<div class="panes">
<div>1First tab content. Tab contents are called "panes"
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a>
</div>
<div>2Second tab content
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a></div>
<div>3Third tab content
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a></div>
<div>4Third tab content
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a></div>
<div>5Third tab content
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a></div>
<div>6Third tab content
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a></div>
</div>
so wie ich das sehe, gehe ich den absolut falschen weg.
kann mir jemand einen anderen aufweisen. allerdings muss ich sagen, dass meine js kenntnisse eher begrenzt sind und eher auf die anwenung beziehen.
ich danke euch für eure hilfe.
wolfgang
Hi,
leider funktioniert es nicht, da beim vertikalen scrollen gleichzeigt die bildgallerei angesprochen wird und nurnoch die ersten 3 bilder angesprochen werden.
Und darunter sollen wir uns jetzt etwas vorstellen können?
anbei der code:
Anbei Zitat #1632
allerdings muss ich sagen, dass meine js kenntnisse eher begrenzt sind und eher auf die anwenung beziehen.
Dann wirst du entweder deine Kenntnisse erweitern, oder dich mit der Funktionalität, die Fertigscripte bieten, zufrieden geben müssen.
MfG ChrisB
Hallo,
allerdings muss ich sagen, dass meine js kenntnisse eher begrenzt sind und eher auf die anwenung beziehen.
Dann wirst du entweder deine Kenntnisse erweitern, oder dich mit der Funktionalität, die Fertigscripte bieten, zufrieden geben müssen.
oder ein paar Euro in die Hand nehmen und jemanden beauftragen, der das in Ordnung bringt. Eventuell auch jemanden, der das als Freundschaftsdienst für lau macht.
Ciao,
Martin