Lightbox für eigene Bilder im CMS

[chef1568]

Hallo,

ich erstelle gerade eigene Linkseiten.
Möchte dort einige Bilder einbinden und diese auch mit einer Lightbox anzeigen lassen.

Habe es mit folgendem Code versucht aber leider komme ich nur auf die Bildseite direkt.

<div class="image">
<a rel="adjustX: 10, adjustY: 0, smoothMove:5, zoomWidthWrapper: '.article_details'" id="zoom1" class="fancy-gallery " href="http://morebasscarhifi.de/templates/custom/images/galerie/galerie_001/IMG_5162.jpg"><img alt="" title="KHC-1400" id="image0" src="height="112" src="width="3"src="http://morebasscarhifi.de/templates/custom/images/galerie/galerie_001/IMG_5162.jpg"></a>
</div>

Hat jemand eine Idee?

gruß feder

 

[boergy]

AW: Lightbox für eigene Bilder im CMS

Die ganzen Zoom-Funktionen im rel-Tag brauchst Du nicht. Die sind - wie der Name schon sagt - für den Zoom auf der Artikeldetailseite.

Für die Lightbox machst einfach um die Bilder einen a-Tag, dessen href-Attribut auf Dein großes in der Lightbox anzuzeigendes Bild verweist und ein beliebiges class-Attribut (z.B. fancy-gallery). Alle Bilder, die in der gleichen Gallerie angezeigt werden sollen erhalten das gleiche class-Attribut. So kann man beispielsweise auf einer Seite zwei Gallerien anlegen.

Das sind dann beispielsweise so aus:

<a href="http://www.dorrienn.de/bilder/schaufenster/wagg_0102_large.jpg" class="fancy-gallery">
<img src="http://www.dorrienn.de/bilder/schaufenster/wagg_0102.jpg">
</a>

Jetzt musst Du noch die jQuery Funktion aufrufen, damit auch die Lightbox aufpoppt. In der Zeile unter "function init () {" ersetzt du dann "fancy-gallery" durch das oben festgelegte class-Attribut.

<script type="text/javascript">
function init () {
            $("a.fancy-gallery").fancybox({          
            'titleShow': false, 
            'hideOnContentClick': true, 
            'transitionIn': 'elastic', 
            'transitionOut': 'elastic',
            'overlayShow' : true,
            'overlayColor' : '#000',
            'overlayOpacity' : 0.15,
            'autoScale' : true,
            'centerOnScroll' : true,
            'autoDimensions' : false
          });

}
   $(document).ready(function() {
      init();
   });
</script>

Dieser Code initialisiert die Lightbox. Einen Überblick über alle möglichen Attribute findest Du auf der Fancybox-Website: Fancybox - Fancy lightbox alternative| API & Options

Ein Beispiel für eine fertige Einbindung findest Du in unserem Shop: Glamour in Weiß und Grün , DORRIENN ... Tischdekorationen die Eindruck machen!

Viel Erfolg und viele Grüße
Birger

 

[chef1568]

AW: Lightbox für eigene Bilder im CMS

Hallo Boergy,

danke für die tolle Anleitung
Also größtenteils funktioniert die Lightbox.

Ich habe aber 2 kleine Probleme:

- Die Reihenfolge der Bilder ist nicht richtig. Evtl. liegt das an meinen Bildern in einer Tabelle. Habe ich eine Möglichkeit die Reihenfolge irgendwie festzulegen?

- Ich kann keine 2 Galerien erzeugen. Habe schon 2 Lösungsansätze versucht, aber irgendwie klappt das nicht:
--> 2x den Scriptcode eingefügt mit unterschiedlichen classes -> es funktioniert nur eine lightbox
--> 1x der Scriptcode, beide Galerien sie selbe Klasse, Identifizierung anhand rel="01" und rel="02" -> es entsteht nur eine Galerie.

vielleicht hat jemand eine Idee
gruß feder

 

[boergy]

AW: Lightbox für eigene Bilder im CMS

Das erste Problem liegt wohl an deinen Dateinamen. Du hast auf der Seite Galerie beispielsweise eine bunte Mischung aus IMG_XXX.jpg und Bild_XXX.jpg Dateinamen. Die Fancybox scheint die Bilder nach Dateiname zu sortieren. Ich habe leider nicht gesehen, dass man die Bilder anders sortieren könnte. Vielleicht mit dem title-Attribut? Ansonsten bleibt nur umbenennen.

Hm, laut Fancybox Beschreibung müsste für das zweite Problem eigentlich dein zweiter Lösungsansatz funktionieren. Ich schau mir das morgen mal auf unserer Seite an und melde mich noch einmal.

Viele Grüße
Birger

 

[boergy]

AW: Lightbox für eigene Bilder im CMS

So, ich habe eben mal ein bisschen js-Quellcode verglichen. Die jquery.fancybox-1.3.3.js scheint nicht ganz ohne Veränderung in den JTL- Shop übernommen worden zu sein. Die zwei entscheidenden Veränderungen sind:
1) Die Liste der Bilder wird nach Namen sortiert
2) Das rel-Attribut wird ignoriert

Für dein Problem bieten sich nun zwei Lösungen
1) Du veränderst die js-Datei entsprechend. Das würde ich jedoch nicht machen, da sie dir dann bei jedem Update wieder zerschossen wird.
2) Du versuchst es noch einmal mit deinem ersten Lösungsweg (zwei verschiedene Klassennamen). Der funktioniert bei mir wie folgt:

<a href="http://www.dorrienn.de/bilder/schaufenster/wagg_0102_large.jpg" class="fancy-gallery1">
<img src="http://www.dorrienn.de/bilder/schaufenster/wagg_0102.jpg">
</a>
<a href="http://www.dorrienn.de/bilder/schaufenster/wagg_0103_large.jpg" class="fancy-gallery2">
<img src="http://www.dorrienn.de/bilder/schaufenster/wagg_0103.jpg">
</a>

Und dann eine doppelte Initialisierung:

<script type="text/javascript">
function init1 () {
$("a.fancy-gallery1").fancybox({          
            'titleShow': false, 
            'hideOnContentClick': true, 
            'transitionIn': 'elastic', 
            'transitionOut': 'elastic',
            'overlayShow' : true,
            'overlayColor' : '#000',
            'overlayOpacity' : 0.15,
            'autoScale' : true,
            'centerOnScroll' : true,
            'autoDimensions' : false
          });
}
function init2 () {
$("a.fancy-gallery2").fancybox({          
            'titleShow': false, 
            'hideOnContentClick': true, 
            'transitionIn': 'elastic', 
            'transitionOut': 'elastic',
            'overlayShow' : true,
            'overlayColor' : '#000',
            'overlayOpacity' : 0.15,
            'autoScale' : true,
            'centerOnScroll' : true,
            'autoDimensions' : false
          });
}
   $(document).ready(function() {
      init1();
      init2();
   });
</script>

Damit funktioniert es bei mir.

Viele Grüße und weiterhin viel Erfolg
Birger

 

[chef1568]

AW: Lightbox für eigene Bilder im CMS

Super, jetz funktionierts alles

2 Sachen sind mir aufgefallen, die vielleicht auch anderen Nutzern hilfreich sind:
- Reihenfolge der Bilder wird anhand des Dateinamens festgelegt (also z.b. img_001.jpg -> img_002.jpg -> img_003.jpg -> ....)
- Gruppierung der Galerien müssen eindeutig sein (also z.b. fancy-galery1, fancy-galery2, ....)
Ich hatte den Fehler gemacht fancy-galery0001 und fancy-galery0001_overview zu verwenden. Da die 2.te klasse exakt die erste Klasse enthalten hat kam es zu meinem Fehler.

gruß & Danke
feder

 

[blu-steels]

AW: Lightbox für eigene Bilder im CMS

Hi,

ich habe gerdae genau das gleich vor. Leider komme ich mit deinem Beispiel nicht ganz parat. Ich habe die jquery.fancybox-1.3.3.js ganz am ende bei " $(document).ready(function() { " um deinen Code erweitert. Jedoch passiert da nichts. Gebe ich den code vllt an falscher stelle ein?

 

[ram1]

AW: Lightbox für eigene Bilder im CMS

Ja, komplett falsche Stelle. Du brauchst lediglich oben die beiden Code-Schnippsel, natürlich angepasst auf deine Bedürfnisse (Pfade, Bilder etc.) in der Quellcode-Ansicht im HTML-Editor der CMS-Seiten einfügen. fancybox an sich wird vom Shop eh schon für andere Sachen eingebunden, da brauchst Du gar nix machen.

 

[blu-steels]

AW: Lightbox für eigene Bilder im CMS

Ich bedanke mich, ram1. Das werde ich später direkt mal testen. Dann sehen meine Beiträge auch schön aus

LG Kai

 

[rwillhaus]

Hallo,
ich versuche ebenfalls gerade auf einer Eigenen Seite per Fancybox Bilder in einer PopUp Gallerie zu öffnen. Leider ohne Erfolg.
Über Firebug erscheint die Ausgabe "TypeError: $(...).fancybox is not a function"

Ich habe das Script folgendermaßen unter dem Laden der jQuery eingefügt: <script type="text/javascript" src="templates/Evo/js/jquery.fancybox-1.3.4.js"></script>

Der Code der Eigenen Seite sieht wie folgt aus:

<a class="fancy-gallery" href="/templates/Evo/img/zertifikate/Kissenfuellung.png"><img src="/templates/Evo/img/zertifikate/Kissenfuellung.png" style="max-width: 420px;" /> </a> <script type="text/javascript">
function init () {
 $("a.fancy-gallery").fancybox({         
            'titleShow': false,
            'hideOnContentClick': true,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'overlayShow' : true,
            'overlayColor' : '#000',
            'overlayOpacity' : 0.15,
            'autoScale' : true,
            'centerOnScroll' : true,
            'autoDimensions' : false
          });
}

   $(document).ready(function() {
      init();
   });

</script>

Dank und Gruß