Pages: [1]   Go Down

Author Topic: Anleitung Lightbox  (Read 1372 times)

Offline isd

  • Posts: 82
Anleitung Lightbox
« on: March 04, 2020, 03:07:55 PM »
Gibt es irgendwo eine Anleitung, wie man eine Lightbox in sein Template einbindet?
Ich bekomme das unter WB 2.12.x nicht zum laufen.
Plugins die ich finde sind auch alle uralt. Das funktioniert auch nicht.
Logged

Offline hgs

  • Betatester
  • **
  • Posts: 1778
    • EFG MG
Re: Anleitung Lightbox
« Reply #1 on: March 04, 2020, 03:14:47 PM »
Hi isd

Was verstehst du unter Lightbox?
Ist das z.B. die "colorbox" und ähnliches?

Wenn es sich darum handelt, habe ich dieses Modul im BE installiert und vergebe Bilder dann "colorbox" in den Eigenschaften.
Im Template selber mussste ich noch nie was ändern.
Nach "Klick" auf das Bild im FE wird dieses vergrößert über der eigendliche Homepage angezeigt.

Wenn ich da auf dem Holzweg bin, vergiss alles was ich hier schreibe.
Logged
LG Harald

"Fange nie an, aufzuhören - höre nie auf, anzufangen." Marcus Tullius Cicero (106-43 v.Chr.)

"Never begin to stop - never stop beginning." Marcus Tullius Cicero (106-43 BC)

Offline isd

  • Posts: 82
Re: Anleitung Lightbox
« Reply #2 on: March 04, 2020, 05:16:53 PM »
Von mir aus auch gerne die Colorbox. Die habe ich auch installiert. Ich habe auch die Stylesheet Klasse vergeben. Es passiert aber rein gar nichts. Kein Overlay, nix.
Logged

Offline dbs

  • Betatester
  • **
  • Posts: 8819
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Anleitung Lightbox
« Reply #3 on: March 04, 2020, 05:58:44 PM »
Vielleicht hast du etwas falsch gemacht.
Gibt es einen lInk zu einer Testseite?
Oder beschreib was du wie getan hast.
Logged

Offline isd

  • Posts: 82
Re: Anleitung Lightbox
« Reply #4 on: March 04, 2020, 08:05:57 PM »
Die Seite läuft derzeit noch lokal.

Ich habe das Modul installiert. Dann unter Bildeigenschaften "colorbox" setzen, so wie im Anhang. Ist doch richtig, oder?
Logged

Offline dbs

  • Betatester
  • **
  • Posts: 8819
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Anleitung Lightbox
« Reply #5 on: March 04, 2020, 09:44:43 PM »
Ist genau falsch.  :)
Die Klasse "colorbox" muss immer dem Link zugeordnet werden.
Tab "Link" (neben Tab "Erweitert") und dort Stylesheet Klasse.

Im Moment hast du es dem Bild zugeordnet, weil "Erweitert" zum Bild gehört.
Logged

Offline hgs

  • Betatester
  • **
  • Posts: 1778
    • EFG MG
Re: Anleitung Lightbox
« Reply #6 on: March 06, 2020, 07:44:21 AM »
Quote from: isd on March 04, 2020, 08:05:57 PM
Die Seite läuft derzeit noch lokal.

Ich habe das Modul installiert. Dann unter Bildeigenschaften "colorbox" setzen, so wie im Anhang. Ist doch richtig, oder?
Guten Morgen isd
Im laufe des 05.03.20 ist der Server für das Forum in einen Crash gelaufen, dadurch sind in deinem Fall einige Beiträge leider nicht mehr sichtbar.
Du hattest schon einen Link gepostete, dbs hatte schon einen Hinweis gegeben und ich hatte schon eine Seite gepostet wo es ohne Eingriff ins Template funktioniert.

Den Link gbe ich hier noch mal an und die Anleitung, wie ich es im BE eingestellt habe kommt im Nachgang
https://patch.umojasingers.de/

Nachgang, Anleitung angehängt:
Das hatte dbs auch genau so in seinem Post schon beschrieben.
Logged
LG Harald

"Fange nie an, aufzuhören - höre nie auf, anzufangen." Marcus Tullius Cicero (106-43 v.Chr.)

"Never begin to stop - never stop beginning." Marcus Tullius Cicero (106-43 BC)

Offline dbs

  • Betatester
  • **
  • Posts: 8819
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Anleitung Lightbox
« Reply #7 on: March 06, 2020, 08:18:43 AM »
Quote from: isd am 1583394420 (restored)
Ja hab ich auch mit dem "colorbox" in der Klasse des Links versucht, geht dann aber auch nicht.
Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php page_title(); ?></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<link href="<?php echo TEMPLATE_DIR; ?>/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?php echo TEMPLATE_DIR; ?>/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="<?php echo TEMPLATE_DIR; ?>/responsive-nav.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?php echo TEMPLATE_DIR; ?>/css/lightbox.min.css" rel="stylesheet" />
<script src="<?php echo TEMPLATE_DIR; ?>/responsive-nav.js"></script>

<script src="<?php echo WB_URL; ?>/include/jquery/dist/3.3.1/jquery-min.js"></script>
<script src="<?php echo WB_URL; ?>/include/jquery/dist/3.3.1/jquery-migrate-min.js"></script>
<script src="<?php echo WB_URL; ?>/include/jquery/jquery-insert.js"></script>
<script src="<?php echo WB_URL; ?>/include/jquery/jquery-include.js"></script>
<script src="<?php echo WB_URL; ?>/modules/colorbox/frontend.js"></script>

[...]
</head>
Der Aufruf im Body sieht dann so aus:

Code: [Select]
<a class="colorbox" href="http://localhost/owk-ernsthofen.de/media/Allgemein/Ernsthofen.jpg">
<img alt="Blick auf Ernsthofen" src="http://www.owk-ernsthofen.de/media/Allgemein/Ernsthofen.jpg" style="height:435px; width:580px" /></a>
WB Version: 2.12.2 r379
PHP Version 7.3.12
Auch Moin.
(restore end)

Ich hatte seine verlinkte Seite schon besucht, dann fiel das Forum aus.

Auf der verlinkten Seite wurde die colorbox.js nicht geladen und deshalb ging es nicht.
Im Quelltext sah das so aus:
Code: [Select]
<?php // nur für die Farbigkeit

<script type="text/javascript" src="function URL() {[native code]}/modules/colorbox/js/jquery.colorbox-min.js">
</script><script src="http://www.owk-ernsthofen.de/modules/colorbox/frontend.js">
</script><link rel="stylesheet" type="text/css" href="function URL() {[native code]}/modules/colorbox/1/colorbox.css">
Poste uns mal wie du das in deiner index.php gerade drinstehen hast.
« Last Edit: March 06, 2020, 08:51:47 AM by DarkViper »
Logged

Offline isd

  • Posts: 82
Re: Anleitung Lightbox
« Reply #8 on: March 06, 2020, 02:00:45 PM »
Danke, jetzt funktioniert es!

Ich habe die drei Dateien eingebunden in mein Template und jetzt geht es:
  • /modules/colorbox/js/jquery.colorbox-min.js
  • /modules/colorbox/frontend.js
  • /modules/colorbox/1/colorbox.css

Die Aussage von hgs:
Quote
Im Template selber mussste ich noch nie was ändern.

Hatte ich so verstanden, dass man das eben icht ins Template einbauen muss.
Logged

Offline isd

  • Posts: 82
Re: Anleitung Lightbox
« Reply #9 on: March 06, 2020, 02:06:38 PM »
Einen Teil meiner Frage gestern at das Forum anscheinend verschkuckt, deswegen nochmal:

Gibt es so ein Tool wie früher Image Tweak noch?
Damit wurden hochgeladene Bilder automatisch in die passende Größe gebracht. Also ein Huptbild und ein Vorschaubild automatisch erzeugt.
Gibt es ein vergleichbares Plugin für WB?
Logged

Offline dbs

  • Betatester
  • **
  • Posts: 8819
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Anleitung Lightbox
« Reply #10 on: March 06, 2020, 03:38:00 PM »
Kannst du das auch in der verlinkten Domain so machen, da geht es noch nicht.
Wegen ImageTweak, such mal im Forum nach imageresizer.
Logged
Pages: [1]   Go Up