TECMU Software Development

mxPrettyPhoto ist ein System-Addon für pragmaMX. Damit lassen sich Popupbilder im Lightbox-Style in den Content integrieren.

Installation

Kopiere den inhalt auf deinen Server

Administration:

nach der Installation steht im Adminmenu ein Eintrag "Lightbox Settings" zur Definition der Einstellungen für die Lightbox zur Verfügung, inkl. einem Testbild.



Einbinden in pragmaMX

in die Datei includes/my_header.php kommt der Aufruf

include_once ("includes/prettyPhoto/mx_prettyphoto.php");
pmxAddprettyPhoto();
Damit wird die Bibliothek automatisch eingebunden.


Verwendung der Funktion

Füge ein rel="prettyPhoto" Attribut zu jedem Link-Tag hinzu, um die Lightbox zu aktivieren. Zum Beispiel:

<a href="images/image-1.jpg" rel="prettyPhoto" title="Mein Titel">Bild #1</a>

Optional: kannst Du das title Attribut benutzen, um eine Beschreibung zu hinterlegen. Wenn Du eine Galerie aus verschiedenen zusammengehörigen Bildern hast, machs genauso wie im 1. Schritt füge aber noch einen Galerie-Namen in eckigen Klammern zum rel-Attribut hinzu. Zum Beispiel:

<a href="images/image-1.jpg" rel="prettyPhoto[trip]">Bild 1</a>
<a href="images/image-2.jpg" rel="prettyPhoto[trip]">Bild 2</a>
<a href="images/image-3.jpg" rel="prettyPhoto[trip]">Bild 3</a>

Die Anzahl der Bilder pro Galerie ist nicht begrenzt.

Verwendung im Content:

Bei Schreiben von Content kann ebenfalls die Popup-Funktion genutzt werden. Dazu kann man um ein eingefügtes Bild oder einen Text einen Bildlink setzen. Dann kann mit der HTML-Funktion das Attribut rel="prettyPhoto[trip]"in den Link eingefügt werden.

Demo:

Einzelbild

klick auf das nachstehende Bild
 

code <a rel="prettyPhoto" href="/media/images/test.jpg"><img border="0" alt="" src="/media/images/pragmamx.png" /></a>


Demo Bildergallerie (klick auf die thumbs)

  

Code <a rel="prettyPhoto[trip]" title="Arktis" href="/media/images/Planets006_01.jpg">
<img height="120" border="0" width="160" alt="" title="Planets" class=" " src="/media/images/Planets006_t.jpg" />
</a>&nbsp;&nbsp;
<a rel="prettyPhoto[trip]" title="Arktis2" href="/media/images/Atarktis0908.jpg">
<img height="120" border="0" width="160" alt="" title="Arktis" class=" " src="/media/images/Atarktis0908_t.jpg" />
</a>



Demo Weblink in einem IFrame

<a href="http://www.pragmamx.org/?iframe=true&width=70%&height=70%" rel="prettyPhoto[iframes]" title="pragmaMX open in PrettyPhoto">pragmaMX.org</a>

pragmaMX.org

Credits:

mxPrettyPhoto benutzt das Javascript prettyPhoto a jQuery lightbox clone  V2.5.4
by: Stéphane Caron
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/