[gelöst] Headerbild-Wechsel mit jQuery cycle() funktioniert nicht.
Eingetragen von albert39 (384)am 28.10.2012 - 22:42 Uhr in
Ich habe in einer DP6.x-Webseite (mit Eurer Hilfe) einen Bilderwechsel in Form einer Slideshow mit jQuery cycle() problemlos realisieren können. Nun wollte ich auf gleiche Weise in einer DP7.x-Webseite das Headerbild in gleicher Form zirkulieren lassen. Dieses Headerbild ist in einem Block definiert, der an passender Position am Kopf der Webseite positioniert ist.
Entsprechend einer Dokumentation ( http://drupal.org/node/1043478 ) habe ich also jquery.cycle.lite.js in sites/all/themes/theme-name/js gespeichert, im /theme-name/theme-name.info das script definiert ( scripts[] = js/jquery.cycle.lite.js ), im Header-Block an erster Stelle
<script type="text/javascript">
(function ($){
$(document).ready(function(){
$('#slides-header').cycle({
fx: 'fade',
speed: 500
});
});
})(jQuery);
</script>eingefügt und dann in einer div-Box mit id="slides-header"
4 Bilder (mit passenden Größenangaben) eingefügt.
Das Ergebnis ist, dass die Bilder untereinander aufgereiht werden und keine Animation erfolgt. Auch im FireBug sieht man zwar den js-Code, aber kein Spur einer js-Aktion. Im HEAD-Bereich ist das cycle-script eingefügt <script src="http://www.childrens-voice.at/sites/all/themes/theme-name/js/jquery.cycle.lite.js?mcmb2t" type="text/javascript">.
Was habe ich da noch übersehen?
Danke für Eure Hilfe.
Albert
- Anmelden oder Registrieren um Kommentare zu schreiben
Was sagt den die
am 29.10.2012 - 00:05 Uhr
Was sagt den die Fehlerconsole des Browsers?
Da müßte ja auf jeden Fall etwas drinstehen.
Gruß
Berthold Lausch
Fehlerkonsole zeigt keinen Fehler
am 29.10.2012 - 12:30 Uhr
Danke Berthold, die Fehlerkonsole (des FF) zeigt zwar ein paar Warnungen betr. css im anderen Zusammenhang, aber nichts im Rahmen des konkreten Problemes. Ich habe als Test in dem oben angezeigten js-Schnippsel einen Fehler eingebaut (eine Klammer weggelassen), was in der Fehlerkonsole sofort angeführt wurde. Ich habe auch mit einem zusätzlichen Alert-Befehl gesehen, dass der js-Code bearbeitet wird.
Das cycle-Plugin habe ich von der erwähnten DP6.x-Webseite herüber kopiert.
Also bitte ich um weitere Hilfe.
Herzliche Grüße
Albert
Einfach mal so ein Schuss in
am 29.10.2012 - 12:38 Uhr
Einfach mal so ein Schuss in die Luft:
Was passiert, wenn Du statt der $-Zeichen das Wort jQuery einfügst?
Ehrlich gesagt habe ich noch nicht herausgefunden, wann genau es der $ ist, und wann jQuery...
Es ändert sich nichts
am 29.10.2012 - 13:06 Uhr
function ($) ist ja eine definierte Funktion, die habe ich so belassen. die beiden $ habe ich durch "jQuery" ersetzt, aber es hat sich nichts geändert. Die $ funktionieren auch in der DP6.x-Webseite.
Es ist nur ein Gefühl, aber in der funktionierenden DP6.x-Version sind die Bilder im Content-Bereich einer Page, jetzt (inder DP7.x-Version) sind sie in einem Block. Das HTML in diesem Bereich siehst Du im Anhang.
Albert
Markup
am 29.10.2012 - 13:34 Uhr
der <p>-Tag sieht schon etwas störend aus...
ich würde oteno zustimmen,
am 29.10.2012 - 13:37 Uhr
ich würde oteno zustimmen, der p-tag vor den img-Tag führt vielleicht dazu, dass das Script die Bilder nicht finden kann.
Gruß
Berthold Lausch
p-Tag gehört weg
am 30.10.2012 - 00:01 Uhr
Danke an alle!
Das war es! Ich habe das p-Tag entfernt (es stammte aus der Zeit, als es nur ein einziges Headerbild gab) und nun funktioniert alles tadellos.
Für die Community: Die div-Box für die Bilder darf nur die img-Tags enthalten. Siehe auch http://malsup.com/jquery/cycle/begin.html
Herzliche Grüße
Albert
Das ist nicht ganz korrekt,
am 30.10.2012 - 12:33 Uhr
Das ist nicht ganz korrekt, man kann einen Parameter "slideExpr" im cycle setzen, dann gibts auch keine Probleme mit den Bildern, hier die Demo dazu: http://jquery.malsup.com/cycle/slideExpr.html
Innerhalb des Containers kann sich dann alles möglich befinden, also auch Absätze.