WebsiteBaker Community Forum
WebsiteBaker Support (2.13.x) => Modules => Topic started by: xandi on March 15, 2025, 05:26:34 PM
-
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
-
HI, dein colorbox script wird nicht geladen bzw. falsch.
In der console ist zu sehen: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.cssDas wird nicht gefunden.
Eine Erklärung habe ich aber noch nicht warum das vermurkst wird.
-
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
-
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.
-
X_X
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
$topmenu = str_replace('</ul>X_X',$topmenu_extra.'</ul>', $topmenu.'X_X' );
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
<script src="<?php echo TEMPLATE_DIR; ?>/colorbox/jquery.colorbox.js" type="text/javascript"></script>
weiter gehts unten
dieser Code muß vor den schließenden </body>-Tag - das war es dann auch schon
<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>
Der Aufruf eines Bildes dann im Quelltext so
<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>
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.
-
Ich habe in meinen, auch betrieblichen WB Seiten, die "alte" Colorbox eingebunden. Ich habe Angst was passiert, wenn ich das mal ändern muss.
ich meine, mich zu erinnern, das damals der rel-Tag als HTML-Element abgeschafft werden sollte, weiß aber nicht mehr, ob das colorbox-intern passiert oder ob das von oben, von W3C kam.
Der Code mit der Definition der group1-group4 wandelt dann sowohl bestehende rel-Tags um und funktioniert auch als Schalter für dieses, damals neue, colorbox-Javascript
Inwieweit da andere Scripte noch funktionieren, weiß ich nicht, hab mich nie mit beschäftigt. Es gibt wohl im Addons eine Snippet-Version 1.6 und Luisehahne hatte 2024 noch eine Version 1.9 im Angebot, hab ich aber nie probiert
-
Bis jetzt funktioniert es noch, hoffentlich noch lange.
Meine erste "Geschäftsseite" ist doch sehr umfangreich, die andere sind nur ein paar Seiten. Wenn ich die neu machen müsste ....
Bzgl. dem Code.
zur Colorbox
notwendig sind diese Links zur colorbox, der Aufruf beider Dateien muß zwingend nach den Aufruf von jquery erfolgen
Heißt das dass ich den Code in der Index.php des jeweiligen Templates einfügen muss? Oder kommt das wo anders rein?
Und funktioniert der Aufruf dann wie gehabt über die Bildeigenschaften/Link - Klasse Colorbox ?
Ich habe im Code auch was von Slideshow o.ä. gelesen. Sind damit auch noch andere Darstellungen möglich?
-
Also - diese Lösung ist nichts, was ich mir ausgedacht habe, es entspricht dem, was der Colorbox-Entwickler hier in seinen Beispielen empfiehlt -> https://github.com/jackmoore/colorbox
oder alös funktionierendes Beispiel hier ->
https://www.jacklmoore.com/colorbox/example1/
https://www.jacklmoore.com/colorbox/example2/
https://www.jacklmoore.com/colorbox/example3/
https://www.jacklmoore.com/colorbox/example4/
https://www.jacklmoore.com/colorbox/example5/
Den Code oben mußte ich noch einmal korrigieren, er beinhaltet ebenfalls das headerslider-Bild, das du nicht benötigst. Orientiere dich beim Code an den Beispielen von Github des Entwicklers. Auf deiner Webseite ist das bereits korrigiert
Heißt das dass ich den Code in der Index.php des jeweiligen Templates einfügen muss?
kurze Antwort: JA
Und funktioniert der Aufruf dann wie gehabt über die Bildeigenschaften/Link - Klasse Colorbox ?
Nein, wie gesagt, über die Klassen group1 - group4 (für Bilder)
Sind damit auch noch andere Darstellungen möglich?
verwendest du die CSS-Klasse group4, werden alle Bilder in einer Slideshow zusammengefaßt, die ebenfalls die Klasse "group4" haben
Möglich wären aber auch andere Inhalte wie Ajax-Content, Videos, Iframes usw. das sieht man alles in den Beispielen
-
noch zur Info: ich hab aus Dietmars Entwicklungen noch Versionen als Snippet, bekomme aber keine davon zum Laufen. Allerdings hab ich die Colorbox in Snippet-Version nie selbst benutzt, gut möglich, das ich da erst eine Anleitung benötige. Es werden zwar alle Dateien geladen, aber ein Colorbox-Effekt sehe ich da nicht.
Analog passiert es bei der Version im Addons -> https://addon.WebsiteBaker.org/en/browse-add-ons/?filter=Colorbox&id=0A392132
die ja schon getestet ist, aber eben nicht von mir. Vielleicht hat jemand die Muße, sich damit zu beschäftigen und ggf eine Readme anzufügen, die als Anleitung laufen könnte.
P.S.: Insgesamt sind die colorbox-Scripte schon recht alt, wie man auf der Github-Seite sehen kann. Wenn sich über die Jahre etwas verändert hat, ist es aber lediglich die Einbindung der notwendigen Dateien
-
Im Anhang mal eine neue Version des Colorbox-Snippets
Dieses funktioniert in altgewohnter Weise, d.h. die CSS-Klasse im Link zum vergrößertem Bild. Eine Bearbeitung der Template-index.php ist nicht notwendig, sofern register_modfiles(js) dort aktiviert ist (war immer schon Bedingung)
Eingebaut hab ich auch die vom Entwickler empfohlene Methode, die ich oben beschrieben habe und die über die CSS-Klassen group1 - group4 funktioniert, so das niemand deswegen nun alles nachrüsten muß
Sind auf einer Seite mehrere Bilder mit den CSS-Klassen "colorbox" oder auch "group4", werden diese in einer automatisch startenden Slideshow zusammengefaßt. Bilderlinks der CSS-Klassen group1 - group3 werden in der Lightbox gruppiert, es erfolgt aber kein Autostart der Slideshow.
Ansonsten funktioniert alles wie gewohnt, fünf mögliche Design's, die in der frontend.css eingestellt werden können (default == 1)
Einstellungen zu den Bildern oder Slideshow in der Datei /js/box.js
Weitere Infos in der Readme.md des Moduls
P.S.: das rel-Attribut ist im Modul nicht notwendig, muß also für diesen Zweck nicht angegeben werden
-
Danke (Y)
-
Danke auch von mir.
Bin erst jetzt dazu gekommen mal reinzuschauen.