Hallo Leute,
habe mal wieder eine Sorge mehr. Habe in den letzten tagen so nebenbei einen Slider in meinen Shop integriert. Es funktioniert auch alles bis auf:
aktiviere ich den slider funktioniert die Lightbox bei den Produkten nicht mehr. Deaktiviere ich den Slider funktioniert alles wie gewohnt. Was könnte ich falsch machen oder wie könnte man den Code anpassen?
<link rel="stylesheet" href=".../modules/lightbox/css/lightbox.css" type="text/CSS" media="screen" />
<script type="text/javascript" src=".../modules/lightbox/js/prototype.js"></script>
<script type="text/javascript" src=".../modules/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src=".../modules/lightbox/js/lightbox-web.js"></script>
<script src=".../modules/nivo-slider/scripts/jquery.js" type="text/javascript"></script>
<script src=".../modules/nivo-slider/scripts/nivo.slider.js" type="text/javascript"></script>
<script src=".../modules/nivo-slider/scripts/myinits.js" type="text/javascript"></script>
<link rel="stylesheet" href=".../modules/nivo-slider/nivo-slider.css" type="text/CSS" media="screen" />
Hola,
ich tippe mal darauf, dass ich der Nivo Slider mit der Prototype Bibliothek beißt. Verwende doch eine Lightbox, die für JQuery geeignet ist. Momentan lädst Du zwei komplette JS Bibliotheken nach. Das sorgt für unnötige HTTP Requests, sorgt somit für Overhead und Inkompatibilitäten. Bleib doch bei einer einzigen Library.
Allerbeste Grüße vom Chris
Hallo mittlerweile weis ich was du meinst hab mal bisschen google benutzt.
ABER:
jetzt versuche ich verzweifelt eine jquery basierte lightbox einzubauen nach Anleitung wie hier: http://www.oxid-esales.com/forum/showthread.php?t=2100
das ganze sieht im Footer so aus:
<link rel="stylesheet" href=".../css/jquery.lightbox-0.5.css" type="text/CSS" media="screen" />
<script type="text/javascript" src=".../js/jquery.js"></script>
<script type="text/javascript" src=".../js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src=".../js/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript" src=".../js/jquery.lightbox-0.5.pack.js"></script>
in der details.tpl so:
[{if $aZoomPics|@count > 1}]
[{foreach from=$aZoomPics item=_zoomPic}]
<a title="[{$product->oxarticles__oxtitle->value}] [{$product->oxarticles__oxvarselect->value}]" href="[{$_zoomPic.file}]" rel="lightbox[group]" [{$sClass}]><b>Bilder zoomen</b></a>
[{assign var="iImgNr" value=$iImgNr+1}]
[{if $iImgNr > 1}][{assign var="sClass" value="style=display:none;" }][{/if}]
[{/foreach}]
[{else}]
<a title="[{$product->oxarticles__oxtitle->value}] [{$product->oxarticles__oxvarselect->value}]" href="[{$aZoomPics[$iZoomPic].file}]" rel="lightbox"><b>Bilder zoomen</b></a>
[{/if}]
dennoch funktioniert nichts… das die Dateien so beschrieben sind wie im Pfad angegeben ist ja selbstverständlich. ich vermute das es am “rel” liegt. Kann mir jemand auf die Sprünge helfen? 
Du inkludierst die neue Lightbox auch in allen 3 Varianten. Nimm doch einfach nur diese:
<script type="text/javascript" src=".../js/jquery.lightbox-0.5.min.js"></script>
Ansonsten nimm doch noch FireBug zur Hilfe und guck mal nach, welcher Fehler denn geschmissen wird, kontrolliere die Pfade und den tatsächlich gerenderten HTML Output über Firebug.
Guck doch mal bei mir nach, ich hab die Lightbox auch verwendet, ist wohl dieselbe…
Alternativ empfiehlt sich noch die Fancybox.
habe jetzt mal nur den einen code ausprobiert.
Leider ohne Erfolg.
leider kenne ich mich auch mit firebug nicht so wirklich aus zwecks fehlermeldungen die hilfreich sein könnten. Kann mir jemand sagen wo ich da genau schauen muss?
Du öffnest Firebug und wählst dort den Konsolenreiter. Hier werden dann Fehler ausgegeben.
Prinzipiell funktioniert ne Lightbox nur dann, wenn das Bild mit einer bestimmten CSS Klasse versehen wurde, auf die das Script dann zugreift. Diese muss natürlich korrekt gesetzt sein.
Coarsy danke für die ganzen guten Tips aber habe mich jetzt für die Alternative (Fancybox) entschieden. Wenn ich das richtig sehe ist sie ebenfalls auf jquery Basis.
Jetzt kommt der Hammer!
Ich habe beide Features eingebunden in den Footer
Nivo Slider
Fancybox
Es funktioniert nur der Nivo Slider
Beide mal um die Position gebracht
Fancybox
Nivo Slider
funktioniert nur die Fancybox. Jetzt ist die Frage was nun hier wieder los ist? Ist doch beides Jquery?! Wie könnte ich die Scripte direkt in die Templates bauen? Habe keine Ahnung aber vielleicht funktioniert das ja danach schon wenn ich die Fancybox in die details und den nivo in die start rein mache?!
Hast Du hier mal nen Link? Nein, nicht in die Templates direkt einbauen. Die Einbindung im Footer vor dem schließenden Body Tag ist schon richtig. Wie sieht denn Deine Initialisierungsfunktion aus?
habe leider lokal installiert.
Initalisierungsfunktion? Was heißt das genau?
<script src="nivo-slider/scripts/jquery.js" type="text/javascript"></script>
<script src="nivo-slider/scripts/nivo.slider.js" type="text/javascript"></script>
<script src="nivo-slider/scripts/myinits.js" type="text/javascript"></script>
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/CSS" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="fancybox/jquery-1.4.3.min.js"><\/script>');</script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="fancybox/my.js"></script>
</body>
Das CSS hat in diesem Block schon mal überhaupt nichts zu suchen. Das gehört in den <head> Bereich. Ich meinte die myinits.js, dort initialisiert Du doch die Fancybox und den Nivoslider, richtig?
in der myinits habe ich nur den slider drin. Sorry mein JS ist leider nicht so gut.
Außerdem bindest Du JQuery 2 mal ein! Einmal genügt hier…
PHP Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="nivo-slider/scripts/nivo.slider.js" type="text/javascript"></script>
<script src="nivo-slider/scripts/myinits.js" type="text/javascript"></script>
<script type="text/javascript" src="fancybox/my.js"></script>
</body>
myinits.js und my.js kannst Du doch in ein einziges JS packen…
Pack doch am besten den Shop mal auf nen von außen zugänglichen Server, so Hilfestellung zu leisten ist schon sehr mühselig, da man immer nur ins Blaue schießen kann.
Hallo Coarsy,
vielen Dank für deine Tips. Letzteres hat geholfen! 
Ich hoffe das das jetzt erstmal so funktionieren wird.