Drupal 7, jQuery, Javascripte ich brauche mal einen Tipp
Eingetragen von kajot (4)am 20.04.2012 - 11:03 Uhr in
Hallo Community,
um es vorweg zu nehmen, ich bin ein Absoluter Anfänger beim Thema Drupal, Javascripte und jQuery.
Ich brauche deshalb mal einen Tipp zum Einbinden und starten eines Javascripts bzw. eines jQuery-Moduls in Drupal.
Es handelt sich um folgendes jQuery Modul Coin-Slider
Ich nutze das Garland Theme und habe folgende Zeilen in die garland.info eingebunden:
scripts[] = coin-slider.js
scripts[] = coin-slider.min.js
scripts[] = coinstart.jsin der coinstart.js steht folgendes drinn:
(funktion($) {
$("#coin-slider").coinslider({ width: 900, navigation: false, delay: 5000 });
});die js-Dateien liegen im /themes/garland/ Ordner.
Die CSS-Daten habe ich in die style.css ganz unten angefügt.
Ich habe einen neuen Block erzeugt welcher alleine im Block "Hervorgehoben" ist.
In diesem Block steht folgender HTML-Code drin:
<div align="center">
<div id='coin-slider'>
<a href="http://url.de/katalog" target="_self">
<img src='/images/001.jpg' >
</a>
<a href="http://url.de/katalog" target="_self">
<img src='/images/002.jpg' >
</a>
<a href="http://url.de/katalog" target="_self">
<img src='/images/003.jpg' >
</a>
</div>
</div>Textformat "Full HTML"
Es werden alle 3 Bilder auf der Seite untereinander angezeigt aber leider wird der Coin-slider nicht "ausgeführt".
Kann mir hierbei jemand helfen?
- Anmelden oder Registrieren um Kommentare zu schreiben
Warum lädst du beide js
am 20.04.2012 - 11:21 Uhr
Warum lädst du beide js Dateien
scripts[] = coin-slider.js
scripts[] = coin-slider.min.js
Wenn ich mir die Namen so anschauen, dann wird eine davon ausreichen, die min-Datei ist sicherlich die, ohne Leerzeilen ?
Hast du auch die JQuery mit geladen, so wie ich das auf der Seite vom con-Slider gesehen habe, soll die JQuery mindestens in der Version 1.4.2 geladen werden ?
Gibt es auf der Seite auch tatsächlich den Selektor con-silder ? Da mußt du mal im Quelltext nachschauen ?
Gibt es JavaScript-Fehler auf der Fehlerkonsole ?
Ich denke mal, mit den oberen Fragen kommst du etwas weiter.
Der con-silder scheint eine ganz interessante Alternative zum cycle Bibliothek zu sein.
Da muß ich auch mal ein paar Experimente damit machen.
lieben Gruß
Berthold Lausch
Vielen Dank für die schnelle
am 20.04.2012 - 12:22 Uhr
Vielen Dank für die schnelle Antwort.
Es sind beide drinn, da ich nicht weiß ob eine reicht. Aber ich nehme gerne die "coin-slider.js" raus.
jquery wird mitgeladen siehe:
<script type="text/javascript" src="http://jd-tools.de/themes/garland/jquery-1.7.2.min.js?m2qd9h"></script><script type="text/javascript" src="http://jd-tools.de/themes/garland/coin-slider.js?m2qd9h"></script>
<script type="text/javascript" src="http://jd-tools.de/themes/garland/coin-slider.min.js?m2qd9h"></script>
<script type="text/javascript" src="http://jd-tools.de/themes/garland/coinstart.js?m2qd9h"></script>
Was ist ein Selektor? Ist das
einer?
<div id="highlighted"> <div class="region region-highlighted">Ich nutzte Firefox + Firebug und dort wird mir folgendes in der "Konsole angezeigt:
missing ) in parenthetical
[Bei diesem Fehler anhalten]
(funktion($) {
coinst...?m2qd9h (Zeile 1, Spalte 13)
wenn ich da drauf klicke erscheint folgendes:
(funktion($) {$("#coin-slider").coinslider({ width: 900, navigation: false, delay: 5000 });
});
Zitat: Was ist ein Selektor
am 20.04.2012 - 13:18 Uhr
Was ist ein Selektor ?
in deinem Beispiel ist hightlighted z.B. ein Selektor mit einer ID und region und region-hightlighted sind zwei Klassen-Selektoren.
ganz allgemein: Selektoren werden verwendet, um HTML-Elemente mit Javascript oder CSS anzusprechen.
@Fehlermeldung
es sieht so aus, als ob da irgendwo eine Klammer fehlt ..... missing ) in parenthetical
Gruß
Berthold Lausch
Ich verstehe das ganze noch
am 20.04.2012 - 13:52 Uhr
Ich verstehe das ganze noch nicht vollständig...
Ich habe mal ein wenig die "coinslinder.js" bearbeitet und nun kommt diese Fehlermeldung:
diesen Fehler :
missing ) in parenthetical Zeile 2, Spalte 13dieser verweist auf die erste "{"
(funktion($) {
$(document).ready(funtion(){
(funktion coinslider() {
$('#block-block-1 coin-slider').coinslider({ width: 900, navigation: true, delay: 5000 });
}
});
)(jQuery);
Ich habe folgenden html-Code ausgelesen
<div class="region region-highlighted">
<div id="block-block-1" class="block block-block contextual-links-region clearfix">
<div class="contextual-links-wrapper contextual-links-processed"><a class="contextual-links-trigger" href="#">Konfigurieren</a><ul class="contextual-links"><li class="block-configure first last"><a href="/de/admin/structure/block/manage/block/1/configure?destination=node">Konfigurieren</a></li>
</ul></div>
<div class="content">
<div align="center">
<div id="coin-slider">
<a href="http://url.de/katalog" target="_self">
<img src="/images/001.jpg">
</a>
<a href="http://url.de/katalog" target="_self">
<img src="/images/002.jpg">
</a>
<a href="http://url.de/katalog" target="_self">
<img src="/images/003.jpg">
</a>
</div>
</div> </div>
</div>
</div>
Welchen Selektor muss ich denn da in meinen Codeschnipsel einbauen?
Ich habe es selbst
am 20.04.2012 - 15:07 Uhr
Ich habe es selbst hinbekommen...
in der coinslider.js steht:
$(document).ready(function() {$('#coin-slider').coinslider();
});
nicht mehr und nicht weniger...