jQuery-Slider in Drupal einbinden
Eingetragen von fryswe (63)am 02.03.2009 - 23:29 Uhr in
hallo leute,
ich versuche gerade einen glider (benutzt ne glider.js, effects.js und prototype.js) auf einer drupal installation zum laufen zu kriegen. allerdings scheine ich konflikte mit jquery zu haben.
der fehler lautet
Fehler: element.dispatchEvent is not a function
Quelldatei: prototype.js
Zeile: 3972nun wollte ich die jquery.js im noconflict-mode betreiben und habe in die jquery.js folgendes an den anfang gesetzt
var J = jQuery.noConflict();soweit so richtig, hoffe ich.
mein glider funktioniert danach auch einwandfrei. allerdings ergebn sich laut fehlerkonsole neue fehler. und zwar:
Fehler: jQuery is not defined
Quelldatei: jquery.js
Zeile: 1und
Fehler: $(document.documentElement).addClass is not a function
Quelldatei: drupal.js
Zeile: 205sowie
Fehler: jQuery is not defined
Quelldatei: sites/all/modules/jquery_update/compat.js
Zeile: 6und
Fehler: $(document).ready is not a function
Quelldatei: textarea.js
Zeile: 35wo liegt das problem? verwenden hier einige scripte/plugins per se einfach das $ und die muss ich jetzt per hand nachtragen? (das wurde mir in einem anderen forum empfohlen). wenn ja, wie sieht das dann aus? was muss durch was genau ersetzt werden?
oder was könnte des rätsels lösung sein, um die 4 zuletzt genannten fehler noch auszumerzen und meinen glider dabei funktionsfähig zu erhalten?
danke im voraus,
sebastian
- Anmelden oder Registrieren um Kommentare zu schreiben
willst du nicht einfach auf
am 02.03.2009 - 23:56 Uhr
willst du nicht einfach auf prototype verzichten?
Denn es ist einfach nicht sinnvoll 2 Javascriptbibliotheken zu laden, aber nur eine zu benutzen
und für jquery gibts eine unmenge an Plugins...
--------------
Blog www.freeblogger.org: Deutscher IRC-Channel: irc.freenode.net #drupal.de ... Jabber-me: dwehner@im.calug.deXING
auf die idee, einen slider
am 03.03.2009 - 00:03 Uhr
auf die idee, einen slider auf jquery-basis zu verwenden, bin ich noch gar nicht gekommen. das werde ich selbstverständlich gleich mal tun. sicher dienlicher, als mich mit dem prototype-jquery-konflikt rumzuschlagen.
besten dank für den anstoß!
ich versuche jetzt einen
am 03.03.2009 - 13:50 Uhr
ich versuche jetzt einen jquery slider zu benutzen. der nutzt die "slider.js" und die "jquery.js", die beide im selben verzeichnis liegen.
der slider wird aufgerufen per:
<script type="text/javascript">$(document).ready(function(){
$("#slider").eSlider();
});
</script>
allerdings erhalte ich wieder
Fehler: jQuery is not definedQuelldatei: localhost/slider.js
Zeile: 94
Zeile 94 ist die letzte zeile des scripts und lautet
})(jQuery);Ich habe nun auch schon probiert das $ durch ein jQuery zu ersetzen und die function in der slider.js von $ auch in jQuery geändert. bringt aber den gleichen fehler.
was mache ich hier denn noch falsch?
hat keiner eine idee, wieso
am 05.03.2009 - 09:27 Uhr
hat keiner eine idee, wieso ich trotz jquery den genannten fehler habe?
wenn ich das script alleinstehen ausführe, funktioniert es. eben nur nicht, sobald ich es in drupal einbinden!
nachdem ich jetzt hier ein
am 05.03.2009 - 10:23 Uhr
nachdem ich jetzt hier ein paar threads durchforstet habe, habe ich meinen slider wiefolgt eingebunden:
<?php
drupal_add_js('/xxx/sites/all/modules/slideshow/easySlider.packed.js');
$slideshow = " $(document).ready(function(){ $('#slider').easySlider();}); ";
drupal_add_js($slideshow, 'inline');
drupal_add_css('/xxx/sites/all/modules/slideshow/slider.css');
?>
dadurch packt er jetzt folgendes in den footer:
<script type="text/javascript" src="/xxx/sites/all/modules/slideshow/easySlider.packed.js"></script><script type="text/javascript"> $(document).ready(function(){ $('#slider').easySlider();}); </script>
funktioniert :D
drupal_add_js
am 05.03.2009 - 10:36 Uhr
Moin!
:-) Und jetzt wollte ich gerade nachfragen, ob die jquery.js überhaupt geladen wird.
Aber Du hast es ja schon hinbekommen.
Noch ein Tipp: drupal_get_path() verwenden.
<?phpdrupal_add_js(drupal_get_path('module', 'slideshow') .'/easySlider.packed.js');
$slideshow = "$(document).ready(function() { $('#slider').easySlider(); });";
drupal_add_js($slideshow, 'inline');
drupal_add_css(drupal_get_path('module', 'slideshow') .'/slider.css');
?>
Stefan
Hey! Danke :) habe ich noch
am 05.03.2009 - 11:03 Uhr
Hey! Danke :) habe ich noch eingebaut.
Ich weiß nicht, ob Du mir weiterführend hier noch helfen kannst.
Der Slider funktioniert mit zwei Textbuttons, die automatisch durch das Script eingefügt werden. Ich möchte jedoch gerne zwei Pfeile (Grafiken) einbinden. Laut der Seite vom Autor des Scriptes (http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider) kann man dies mit
<span id="prevId"><a href="javascript:void(0);">Grafik oder Text</a></span><span id="nextBtn"><a href="javascript:void(0);">Grafik oder Text</a></span>
tun. Funktioniert aber leider nicht. Bei Klick auf meine Grafik hier passiert rein gar nichts.
Beispiel
am 05.03.2009 - 11:37 Uhr
Moin!
Hast Du Dir mal http://templatica.com/ angeschaut? Dort hat er da ja auch mit Bildern als "prev"/"next" gelöst.
Möglicherweise siehst Du im Firebug auch irgendwelche Javascript-Fehler?
Stefan
jo gute idee, thx. habs
am 05.03.2009 - 13:56 Uhr
jo gute idee, thx. habs jetzt auch hinbekommen :)
Danke, Seb
@ Stefan, bist du in JS
am 05.03.2009 - 16:27 Uhr
@ Stefan, bist du in JS etwas fit? Ich versuche gerade einen dritten Button hinzufügen (neben dem Next und Prev Button), mit dem die Tour gestartet werden kann. Dupliziere ich den Next Button einfach, dann geht einer der beiden nicht mehr. Darum würde ich gerne noch einen dritten button hinzufügen.
Das ist das Sctipt
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: '<img src="/xxx/files/slider/benutzertour-links.gif" alt="Zurück">',
nextId: 'nextBtn',
nextText: '<img src="/xxx/files/slider/benutzertour-rechts.gif" alt="Vorwärts">',
orientation: '', // 'vertical' is optional;
speed: 800
};
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
var s = $("li", obj).length;
var w = obj.width();
var h = obj.height();
var ts = s-1;
var t = 0;
var vertical = (options.orientation == 'vertical');
$("ul", obj).css('width',s*w);
if(!vertical) $("li", obj).css('float','left');
//$(obj).after('<span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span> <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>');
$("a","#"+options.prevId).hide();
$("a","#"+options.nextId).hide();
$("a","#"+options.nextId).click(function(){
animate("next");
if (t>=ts) $(this).fadeOut();
$("a","#"+options.prevId).fadeIn();
});
$("a","#"+options.prevId).click(function(){
animate("prev");
if (t<=0) $(this).fadeOut();
$("a","#"+options.nextId).fadeIn();
});
function animate(dir){
if(dir == "next"){
t = (t>=ts) ? ts : t+1;
} else {
t = (t<=0) ? 0 : t-1;
};
if(!vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
options.speed
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
options.speed
);
}
};
if(s>1) $("a","#"+options.nextId).fadeIn();
});
};
})(jQuery);
js
am 05.03.2009 - 20:47 Uhr
Was genau meinst Du mit "Tour starten"? Das automatisch alle x Sekunden auf das nächste Bild gesprungen wird?
So wie der Code aussieht, ist das dort gar nicht vorgesehen.
Du könntest allerdings einen Timeout setzen, der dann die
next()Funktion aufruft.var hTimer;
$(function() {
startTour();
});
function startTour() {
hTimer = window.setTimeout(function() {
if ($('#next').attr('display') == 'none') { // ID evtl. anpassen.
// Timeout entfernen, wenn das letzte Element angezeigt wird.
window.clearTimeout(hTimer);
hTimer = null;
return;
}
$.fn.easySlider.animate('next');
}, 2000); // alle 2 Sekunden
}
Das kann so funktionieren, muss aber nicht (ist auch ungetestet).
hth,
Stefan
danke schon mal für deine
am 05.03.2009 - 22:15 Uhr
danke schon mal für deine antwort, hier erst noch mal übersichtshalber der eingerückte code
<?php
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: '<img src="/xxx/files/slider/benutzertour-links.gif" alt="Züricl">',
nextId: 'nextBtn',
nextText: '<img src="/xxx/files/slider/benutzertour-rechts.gif" alt="Vorwärts">',
orientation: '', // 'vertical' is optional;
speed: 800
};
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
var s = $("li", obj).length;
var w = obj.width();
var h = obj.height();
var ts = s-1;
var t = 0;
var vertical = (options.orientation == 'vertical');
$("ul", obj).css('width',s*w);
if(!vertical) $("li", obj).css('float','left');
//$(obj).after('<span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span> <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>');
$("a","#"+options.prevId).hide();
$("a","#"+options.nextId).hide();
$("a","#"+options.nextId).click(function(){
animate("next");
if (t>=ts) $(this).fadeOut();
$("a","#"+options.prevId).fadeIn();
});
$("a","#"+options.prevId).click(function(){
animate("prev");
if (t<=0) $(this).fadeOut();
$("a","#"+options.nextId).fadeIn();
});
function animate(dir){
if(dir == "next"){
t = (t>=ts) ? ts : t+1;
} else {
t = (t<=0) ? 0 : t-1;
};
if(!vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
options.speed
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
options.speed
);
}
};
if(s>1) $("a","#"+options.nextId).fadeIn();
});
};
})(jQuery);
?>
Ich meine eigentl. etwas anderes: Im Script werden ja zwei Buttons initialisiert, prev und next. und ich möchte aber einen weiteren button in die slideshow einbinden und zwar parallel zum next button einen "start slideshow" button, der nur im ersten frame zu sehen ist. den next button dafür einfach zu duplizieren ging wie gesagt nicht.
Keiner eine Idee?
am 07.03.2009 - 10:37 Uhr
Keiner eine Idee?