Joomla - Ponygallery ML mit Lightview / Lytebox - Hack


Komponente: PonyGallery ML Version 2.51
Hack: Einbau von Lightview >= 2.3.1 und Lytebox >= 3.22

Mit diesem Hack wird der Ponygallery zwei weitere Darstellungsansichten hinzugefügt. Die Bilder werden mir der Lightview oder der Lytebox geöffnet. Diese Ansichtsformen sind der Lightbox ähnlich, bieten jedoch weitere Vorteile.

Was sind "Lightview" und "Lytebox"?

Lightview und Lytebox sind Next Gen Javascript-Applikationen, um die Zoom-Ansicht in Bildergalerien zu dynamisieren (ähnlich wie Lightbox, Slimbox oder Thickbox). Dadurch lassen sich Bilder sehr ansprechend präsentieren.
Lightview nutzt (wie Lightbox auch) die Bibliotheken Prototype und die Scriptaculous-Effekte.
Die Lytebox baut ebenfalls auf der Lightbox auf, ist jedoch unabhängig von zusätzlichen Dateien. Alle benötigten Bibliotheken sind in einer Datei (lytebox.js) enthalten. Nach einigen Tests zeigte sich auch, dass die Lytebox weniger Anfällig für Javascript-Konflikte ist.

Was sind die Vorteile des Lightview-Skriptes?

  • Sauber: Zeigt Inhalte optimal an
  • Schnell: Bilder werden vorgeladen
  • Einfach: Anpassungsfähig ohne CSS-Kenntnisse
  • Abgerundet: Runde Ecken ohne transparente PNGs
  • Elegant: Inhalt passt sich der Fenstergröße an
  • Slideshow: Inhalt lässt sich bequem in einer Slideshow betrachten
  • Funktionalität: Funktioniert mit allen modernen Browsern

Das Lytebox-Skript enthält alle Bibliotheken in einer Datei und ist weniger Anfällig für JS-Konflikte. Es gibt auch die Möglichkeit, eine Slideshow zu starten. Diese muss gesondert ausgewählt werden -> in den Einstellung "Lytebox_Slideshow" auswählen.

Was ist zu beachten?

Lightview ist leider nicht kostenlos. Für nicht-kommerzielle Seiten verlangt der Autor eine kleine Gebühr von 3 €, jedoch gibt es eine sog. "Trial-Version". Mit dieser Version kann man das Skript ausgiebig und unbefristet testen, bei Gefallen sollte die Gebühr entrichtet werden. Bezahlt werden kann mit dem Dienst Paypal.
Die Trial-Version kann man auf der Seite des Autors runterladen. Unten rechts unter "Download - Trial"! (Direktlink: aktuelle Lightview Version)

Installation/Hack

Entweder Schritt-für-Schritt Anleitung befolgen oder unten die Datei Ponygallery Lightview / Lytebox Hack runterladen und Dateien ersetzen (Ponygallery Version 2.51 !)

- administrator/ponygallery/admin.ponygallery.html.php öffnen:

* Zeile 2198 hinzufügen: (Zeilenangabe kann leich variieren)

$detailpic_open[] = mosHTML::makeOption( '7', Lightview);
$detailpic_open[] = mosHTML::makeOption( '8', Lytebox);
$detailpic_open[] = mosHTML::makeOption( '9', Lytebox_Slideshow);

* Zeile 2199 ändern in:

$mc_ag_detailpic_open = mosHTML::selectList( $detailpic_open, 'ag_detailpic_open', 'class="inputbox" size="10"', 'value', 'text', $ag_detailpic_open );

Änderung: size="7" in size="10"

* Zeile 2607 hinzufügen:

$showbigpic_open[] = mosHTML::makeOption( '7', Lightview );
$showbigpic_open[] = mosHTML::makeOption( '8', Lytebox );
$showbigpic_open[] = mosHTML::makeOption( '9', Lytebox_Slideshow );

* Zeile 2608 ändern in:

$mc_ag_bigpic_open = mosHTML::selectList( $showbigpic_open, 'ag_bigpic_open', 'class="inputbox" size="9"', 'value', 'text', $ag_bigpic_open );

Änderung: size="6" in size="9"

- components/com_ponygallery/sub_javascript.php

* Zeile 64 hinzufügen:

//Lightview
if( ( $func=="detail" && $ag_bigpic_open==7 ) || $ag_detailpic_open==7 ) {
$files .= "<script language=\"javascript\" type=\"text/javascript\" src=\"".$mosConfig_live_site."/components/com_ponygallery/lightview/js/prototype.js\"></script>\n"
.  "<script language=\"javascript\" type=\"text/javascript\" src=\"".$mosConfig_live_site."/components/com_ponygallery/lightview/js/scriptaculous.js?load=effects\"></script>\n"
.  "<script language=\"javascript\" type=\"text/javascript\" src=\"".$mosConfig_live_site."/components/com_ponygallery/lightview/js/lightview.js\"></script>\n"
. "<link href=\"".$mosConfig_live_site."/components/com_ponygallery/lightview/css/lightview.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />\n";
}

//Lytebox
if( ( $func=="detail" && $ag_bigpic_open==8 ) || $ag_detailpic_open==8 ) {
$files .= "<script language=\"javascript\" type=\"text/javascript\" src=\"".$mosConfig_live_site."/components/com_ponygallery/lytebox/lytebox.js\"></script>\n"
. "<link href=\"".$mosConfig_live_site."/components/com_ponygallery/lytebox/lytebox.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />\n";
}

//Lytebox - Slideshow
if( ( $func=="detail" && $ag_bigpic_open==9 ) || $ag_detailpic_open==9 ) {
$files .= "<script language=\"javascript\" type=\"text/javascript\" src=\"".$mosConfig_live_site."/components/com_ponygallery/lytebox/lytebox.js\"></script>\n"
. "<link href=\"".$mosConfig_live_site."/components/com_ponygallery/lytebox/lytebox.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />\n";

* Zeile 272 hinzufügen:

      case 7: //Lightview
$link = $js_imgpath."\" class=\"lightview\" rel=\"gallery[ponygallery]\" title=\"".$imgtitle;
break;
case 8: //Lytebox
$link = $js_imgpath."\" rel=\"lytebox[ponygallery]\" title=\"".$imgtitle;
break;
case 9: //Lytebox - Slideshow
$link = $js_imgpath."\" rel=\"lyteshow[ponygallery]\" title=\"".$imgtitle;
break;

 

Speziell für Lightview:

Ordner "Lightview" erstellen und Skript nach components/com_ponygallery/lightview kopieren:

* Unter components/com_ponygallery/ einen neuen Ordner namens "Lightview" erstellen.
* Skript runterladen und entpacken. Die Verzeichnisse "css", "images" und "js" samt Inhalt in den neuen Ordner auf den Server hochladen.
* Javascript Frameworks ( Prototype 1.6.0.2 und Scriptaculous 1.8.1 ) runterladen und die Dateien prototype.js, scriptaculous.js und effects.js in den Ordner "js" hochladen.

Unten unter Downlaods findet ihr einen vorgefertigten Lightview Ordner (Ponygallery Lightview Ordner), jedoch ohne der Datei "lightview.js", da das Anbieten eines Downloads gegen die Lizenzbestimmungen verstößt. Diese Datei im oben angegebenem Link runterladen und ebenfalls in den Ordner kopieren. Das Ganze dann nach components/com_ponygallery/ kopieren.

Achtung: Ab Version 2.4 des Lightview Skripts wird Prototype 1.6.0.3 benötigt. Die Datei prototype.js entsprechend austauschen! (Aktuell: <2.4 -> Prototype 1.6.0.2 benutzen)

ponygallery-lightview-hack-1.jpg  ponygallery-lightview-hack-2.jpg
Neue Auswahl in den Einstellungen        So sieht es dann aus!

Speziell für Lytebox:

Ordner Lytebox runterladen, enpacken und ins Verzeichnis components/com_ponygallery/ hochladen. So sollte es dann aussehen: components/com_ponygallery/lytebox/....
Dieser Ordner enthält alle Dateien, die benötigt werden.

ponygallery-lytebox-hack-1.jpg  ponygallery-lytebox-hack-2.jpg
Zuäsätzliche Auswahl in den Einstellungen     So sieht es mit der Lytebox aus!

Tipps

* Ist das Album in mehreren Unterseiten unterteilt, dann können wie bei der Lightbox-Ansicht ebenfalls alle Bilder angezeigt werden. Dafür unter "Einstellungen/Detail-Ansicht/Originalbild öffnen mit" ebenfalls auf Lightview oder Lytebox stellen!

* Lightview Skript: Möchte man die Bibliotheken verkleinern, dann kann man eine komprimierte Version dieser Dateien nutzen. Datei protoaculous.1.8.1.min.js (oder aktuellere Version) runterladen, in protoaculous.js umbenennen und in den Ordner "js" hochladen. Nun muss man diese Datei noch richtig einbinden:

Die Zeile 64 in der Datei components/com_ponygallery/sub_javascript.php so anpassen:

//Lightview if( ( $func=="detail" && $ag_bigpic_open==7 ) || $ag_detailpic_open==7 ) { $files .= "<script language=\"javascript\" type=\"text/javascript\" src=\"".$mosConfig_live_site."/components/com_ponygallery/lightview/js/protoaculous.js\"></script>\n" . "<script language=\"javascript\" type=\"text/javascript\" src=\"".$mosConfig_live_site."/components/com_ponygallery/lightview/js/lightview.js\"></script>\n" . "<link href=\"".$mosConfig_live_site."/components/com_ponygallery/lightview/css/lightview.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />\n"; }

Download

Zuletzt aktualisiert am Mittwoch, 14. März 2012 11:47

Copyright © 2005 - 2014 Kubik-Rubik.de - Viktor Vogel