WebsiteBaker Support (2.13.x) > Modules
colorbox macht nicht was sie soll
xandi:
Hallo.
Ich baue gerade für meinen Verein eine neue Internetseite auf.
Bei anderen Installationen verwende ich gerne das Modul "colorbox" um kleine Bilder als Vergrößerung in einer Lightbox per klick anzuzeigen.
Hab das gemacht wie immer. Zwei verschieden große Bilder im Media Ordner, und das große über Eigenschaften/link ausgewählt. Als Klasse dann "colorbox".
Leider wird das große Bild nur als neue Seite angezeigt. Ich vermute nun dass noch irgendwas fehlt.
Es ist die neueste Version 2.13.6 mit PHP 8.3.
Woran könnte das liegen. Bei anderen Installationen funktioniert das immer.
Adresse: www.kollenburg-main.de
dbs:
HI, dein colorbox script wird nicht geladen bzw. falsch.
In der console ist zu sehen:
--- Code: ---https://www.kollenburg-main.de/function URL() { [native code]}/modules/colorbox/js/jquery.colorbox-min.js
https://www.kollenburg-main.de/function URL() { [native code]}/modules/colorbox/1/colorbox.css
--- End code ---
Das wird nicht gefunden.
Eine Erklärung habe ich aber noch nicht warum das vermurkst wird.
sternchen8875:
Hab dir das mal repariert ;-)
(warum gibst du mir die Zugangsdaten, wenn du dann nicht fragst?)
Deine Colorbox war von 2012. Sie basierte auf einer alten Lösung, mittels einer head.js Dateien nachzuladen. Da funktioniert der Code nicht mehr und die head.js gibt es ja auch nicht mehr.
Integriert hab ich auf die Schnelle mal eine Lösung von einer meiner Seiten. Die Colorboxscripte liegen dafür im benutzten Frontendtemplate und sind in der index.php des Templates eingebunden. Das CSS dazu dann im der benutzten template.css, damit nicht unnötig viel Dateien geladen werden.
Angesprochen werden die Links zu den Bilders über 4 mögliche Klassen, (group1, group2, group3 und group4). group4 wäre dabei dann der Standard-Wert, mit dem, wenn mehrere Bilder mit der Linkklasse group4 vorhanden sind, auch eine Slideshow gestartet wird mit allen Bildern dieser aktuellen Seite, die die Link-Klasse "group4" haben
Hatte das vor Jahren mal hier ausgeführt
https://forum.WebsiteBaker.org/index.php/topic,30588.msg213371.html#msg213371
xandi:
Danke dir. Daran habe ich nicht gedacht.
Ich habe heute morgen das template geändert, da in der Navigation Desktop oder responsive (Handy) unterhalb zwei merkwürdige "X_X" zu sehen sind. (Hier wäre eine Lösungsidee auch nicht schlecht, da ich das template ganz gut finde).
Dann funktioniert aber auch deine Colorbox Lösung nicht mehr. Es liegt daran dass, wie du schreibst, die Fehlerkorrektur ins Template geschrieben hast. Jetzt habe ich das "Fruesteg" template geladen und die Colorbox funktioniert. Allerdings tauchen auch die x'e wieder auf.
Gibt es denn auch eine allgemein funktionierende Lösung?
Ich habe in meinen, auch betrieblichen WB Seiten, die "alte" Colorbox eingebunden. Ich habe Angst was passiert, wenn ich das mal ändern muss.
sternchen8875:
--- Quote ---X_X
--- End quote ---
der typische Chio ;-)
Der Code stammt aus dieser Zeile 49 der index.php des fruesteg-Templates und soll die Stelle Zeigen, an der später das Suchen-Icon auftaucht, Hab die X-X entfernt
--- Code: ---$topmenu = str_replace('</ul>X_X',$topmenu_extra.'</ul>', $topmenu.'X_X' );
--- End code ---
zur Colorbox
notwendig ist dieser Link zur colorbox im <head>-Bereich des benutzten Frontend-Templates, der Aufruf muß zwingend nach dem Aufruf von jquery erfolgen
--- Code: ---<script src="<?php echo TEMPLATE_DIR; ?>/colorbox/jquery.colorbox.js" type="text/javascript"></script>
--- End code ---
weiter gehts unten
dieser Code muß vor den schließenden </body>-Tag - das war es dann auch schon
--- Code: ---<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true,loop:true,
slideshowSpeed:6000,
slideshowAuto:true,
transition:"elastic",
opacity: "0.7",
maxWidth:"90%",
maxHeight:"90%",
previous:"zurück",
next:"vor",
close:"schließen",
current: "Bild {current} von {total}",
slideshowStart: "Diashow starten",
slideshowStop: "Diashow anhalten"});
});
</script>
--- End code ---
Der Aufruf eines Bildes dann im Quelltext so
--- Code: ---<a class="group4" href="http://deineURL/media/high-bay-408222_1920.jpg">
<img alt="" class="img-responsive" height="100" src="http://deineURL/media/high-bay-408222_1920.jpg" style="" width="150"></a>
--- End code ---
P.S.: Admin-Kommentar: Beispiel-Code geändert, er zeigte vorher ein weiteres Script, das für das Beispiel nicht relevant ist und ggf verwirren könnte.
Navigation
[0] Message Index
[#] Next page
Go to full version