Autor |
Nachricht |
Vektorpate
Threadersteller
Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst Fr 06.05.2011 10:49
Titel Suche jQuery Content Switcher |
|
|
Moin,
kennt jemand von euch zufällig ein jQuery Plugin in dieser Art:
http://www.nba.com/playoffs/2011/index.html
Es sollte eine Sekundenanzahl für das automatische switchen der Bereiche einstellbar sein,
und ansonsten einfach nur per Mouseover der jeweilige Div eingebelndet werden
(und auch bleiben, selbst wenn die Maus vom Thumbnail entfernt wird)
Über Antworten wäre ich sehr dankbar.
Zuletzt bearbeitet von Vektorpate am Fr 06.05.2011 10:49, insgesamt 1-mal bearbeitet
|
|
|
|
|
Eistee
Administrator
Dabei seit: 31.10.2001
Ort: Grimma
Alter: 45
Geschlecht:
|
Verfasst Fr 06.05.2011 12:51
Titel
|
|
|
Schau dir mal die "Tabs" Demos an, als Basis dürfte das letzte (mit Slideshow)was für dich sein. Das gewünschte Verhalten mit den Thumbs muss man halt noch einbauen:
http://flowplayer.org/tools/demos/index.html
|
|
|
|
|
Anzeige
|
|
|
Vektorpate
Threadersteller
Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst Fr 06.05.2011 20:09
Titel
|
|
|
Genau das habe ich gesucht, danke!
|
|
|
|
|
Vektorpate
Threadersteller
Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst Mo 09.05.2011 09:28
Titel
|
|
|
Habe ein neues Problem.
Ich lade externe htm Dateien per ajax und klick auf den jeweiligen tab in den Content.
Funktioniert auch alles wunderbar.
Nun bräuchte ich nur noch das hinzufügen der klasse "current" bei Klick,
so dass das jeweilige Bild der Navigation den :hover Zustand beibehält wenn der Tab aktiviert ist.
Jedes img der ul.nav ist per id mit background images eingebunden.
Gibt es evtl eine einfachere Lösung und ich denke zu kompliziert?
Über Rat wäre ich sehr dankbar.
Code:
Code: | <script>
$(function() {
$("ul.nav").tabs("div.ajax > div", {effect: 'ajax', history: true});
});
</script |
Code: | <div class="content">
<h1>Headline</h1>
<ul class="nav">
<li><a href="ajax1.htm"><img id="eins" /></a></li>
<li><a href="ajax2.htm"><img id="zwei" /></a></li>
<li><a href="ajax1.htm"><img id="drei" /></a></li>
<li><a href="ajax2.htm"><img id="vier" /></a></li>
</ul>
<div class="ajax">
<div style="display:block"></div>
</div> |
Code: |
#eins {
background:url(../img/eins.jpg) top left no-repeat;
}
#eins:hover {
background:url(../img/eins_hover.jpg) top left no-repeat;
}
usw..
|
Zuletzt bearbeitet von Vektorpate am Mo 09.05.2011 09:29, insgesamt 1-mal bearbeitet
|
|
|
|
|
trashmaster
Dabei seit: 20.01.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 09.05.2011 15:04
Titel
|
|
|
Bin mir aber nicht sicher ob ich dich richtig verstehe
Bei Click auf die Nav-LIs wird dem Child-IMG die Klasse current hinzugefügt:
Code: | $('ul.nav li').click(function() {
$(this).find("img").addClass("current");
}); |
Code: |
#eins:hover,
#eins.current {
background:url(../img/eins_hover.jpg) top left no-repeat;
}
|
|
|
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Mo 09.05.2011 15:25
Titel
|
|
|
Zitat: | Ich lade externe htm Dateien per ajax | Sicher? Das ist jedenfalls kein Ajax:
Zitat: | <a href="ajax1.htm"> | Und dann nützt Dir auch kein JS-basiertes Styling etwas, wenn die Seite neu geladen wird.
|
|
|
|
|
Vektorpate
Threadersteller
Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst Mo 09.05.2011 16:59
Titel
|
|
|
Danke für den Lösungsansatz, trashmaster. Habs mittlerweile hinbekommen!!
@pantonine
Es wird die ajax1.htm in die Seite geladen, nicht die komplette Seite.
Weiß zufällig jemand mit welchem jQuery Befehl ich einzelnen li's wechseln lassen kann?
Also zB alle 5 Sekunden wechsel zum nächsten?
Eventuell auch mit Einbelndung?
.rotate und .fade?
|
|
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Mo 09.05.2011 17:45
Titel
|
|
|
Also wenn über den Link nicht nochmal JS drüberläuft, oder Iframes und <base target> benutzt werden, stimmt das einfach nicht. Aber das macht vermutlich der .tabs() Aufruf. Guck doch mal, ob das Modul solche Auto-Läufe schon mitbringt.
Zuletzt bearbeitet von pantonine am Mo 09.05.2011 17:46, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
SUCHE jquery switcher
jquery - hide content in jquery object
Switch Content & Smarty (JQuery)
Content-Scoller als jQuery-Plugin gesucht
JQuery Slide: Button und Content unabhängig?
[?] Links deaktiviert bei geladenen Content via jQuery/Ajax
|
|