Autolightbox ist die einfachste Möglichkeit eine Lightbox eines Bilder zu erzeugen. Das Grundprinzip funktioniert so:
Beim Speichern einer Seite, eines Blog- oder eines Newseintrags wird der Inhalt nach Bildern durchsucht. Dabei vergleicht das Script ob das Bild mit der korrekten Grösse oder verkleinert eingebunden ist. Ist das Bild verkleinert eingebunden, wird ein Thumbnail generiert und die Bild-URL auf das Thumbnail angepasst. Zusätzlich wird um das Bild einen Link auf das Originalbild erstellt.
Hier die Schritt für Schritt Anleitung mit Zwischenkommentaren
Benutzerdefinierter Tag (UDT) «Autolightbox»
Als erstes muss der Benutzerdefinierte Tag erstellt werden.
Dazu muss folgender Code in den neu erstellen Tag «Autolightbox» kopiert werden:
/**
*
* AutoLightBox - UDT for automatically generating thumbnails in content
*
* Installing
* -----------
* 1. Create user defined tag
* 2. Create event ContentEditPre which use this tag
* 3. Create if use event NewsArticleAdded/NewsArticleEdited
* 4. Create if use event CGBlogArticleAdded/CGBlogArtikleEdited
*
* Changelog
* -----------
*
* by klenkes:
* Klenkes-10: Test auf Inhalt title="xxx", erst dann Zuweisung und Einbau
* Klenkes-20: Verzweigung, die einen leeren title tag berücksichtigt
*
* by blattertech informatik:
* add support for all content blocks
* add support for cgblog
* add support for news
* add function comments
* add attribute def
*/
// Global Options
$thumb_prefix = "thumb_" ;
$attribute = array();
$attribute['css'] = ""; // Name of CSS class (can be emtpy)
$attribute['rel'] = ""; // Value of rel="" attribute (can be emtpy)
/**
*
* replace images width thums
*
* @param string $txt - text with included image-tag
* @param string $thumb_prefix - prefix of the thumbs
* @return string
*
*/
function replaceContentImageWithThumbs($txt, $thumb_prefix, $attr = array('css' => '', 'rel' => ''))
{
global $gCms;
$config =& $gCms->GetConfig();
$rootPath = $gCms->config["root_path"] ;
$imgs = findAllImg($txt) ;
$rel = ($attr['rel'] != "") ? ' rel="'.$attr['rel'].'" ' : '';
$css = ($attr['css'] != "") ? ' class=".$attr['css']." ' : '';
for ($i=0 ; $i < count($imgs); $i++){
$filename = basename($imgs[$i]["src"]);
//already a thumb?
if (substr($filename, 0 ,strlen($filename)) != $thumb_prefix ){
$imgInfo = getimagesize($rootPath."/".$imgs[$i]["src"]) ;
//condition to generate thumb
if ($imgInfo[0] > $imgs[$i]["width"] || $imgInfo[1] > $imgs[$i]["height"]){
$thumbSrc = generateImgThumb($imgs[$i]["src"], $imgs[$i]["width"], $imgs[$i]["height"], $thumb_prefix);
//let's replace the content
$pattern = "<[iI][mM][gG][^>]*src="".$imgs[$i]["src"].""[^>]*>" ;
$a_pattern = "<[Aa][^>]*><[iI][mM][gG][^>]*src="".$imgs[$i]["src"].""[^>]*>s*</a>" ;
$pattern = "/".str_replace("/", "/", $pattern)."/" ;
$a_pattern = "/".str_replace("/", "/", $a_pattern)."/" ;
if (preg_match($a_pattern, $txt)){
$txt = preg_replace($pattern, $imgs[$i]["beforSrc"]."src="".$thumbSrc.""".$imgs[$i]["afterSrc"], $txt) ; // Klenkes. Nix passiert...
}
else{
if (!empty($imgs[$i]["title"])) { //Klenkes-20. Test darauf ob überhaupt ein Titeltext eingegeben wurde... Falls ja Einbau und Ausgabe...
$txt = preg_replace($pattern, "<a target="_blank""." title="".$imgs[$i]["title"].""".$css.$rel." href="".$imgs[$i]["src"]."">".$imgs[$i]["beforSrc"]."src="".$thumbSrc.""".$imgs[$i]["afterSrc"]."</a>", $txt) ;
}
else{ // Fall: Kein Titel wurde eingegeben. Also obige Zeile nur ohne title="xxx"
$txt = preg_replace($pattern, "<a target="_blank"".$css.$rel." href="".$imgs[$i]["src"]."">".$imgs[$i]["beforSrc"]."src="".$thumbSrc.""".$imgs[$i]["afterSrc"]."</a>", $txt) ;
}
}
}
}
}
return $txt ;
}
/**
*
* return all found images in a string
*
* @param string $txt - text with included image-tag
* @return array width images
*
*/
function findAllImg($txt)
{
preg_match_all("/<[iI][mM][gG][^>]*>/", $txt, $out, PREG_PATTERN_ORDER);
$k=0 ;
$img = array();
for ($i = 0 ; $i < count($out[0]) ; $i++) {
$imgTxt = $out[0][$i] ;
preg_match("/width="([^"]*)"/", $imgTxt, $imgWidth);
preg_match("/height="([^"]*)"/", $imgTxt, $imgHeight);
preg_match("/(.*)src="([^"]*)"(.*)/", $imgTxt, $imgSrc);
preg_match("/title="([^"]*)"(.*)/", $imgTxt, $imgtitle); // Klenkes-10: Suche nach dem title und weise Inhalt $imgtitle zu
if (!empty($imgWidth[1]) && !empty($imgHeight[1]) && !empty($imgSrc[2]) ){
$img[$k]["width"] = $imgWidth[1] ;
$img[$k]["height"] = $imgHeight[1] ;
$img[$k]["src"] = $imgSrc[2] ;
$img[$k]["beforSrc"] = $imgSrc[1] ;
$img[$k]["afterSrc"] = $imgSrc[3] ;
// Klenkes-10: Wenn Variable belegt dann ab in's array(glaub ich) Weiter geht's mit der Ausgabe oben.
if (!empty($imgtitle[1]) ) {
$img[$k]["title"] = $imgtitle[1];
}
$k++;
}
}
return $img ;
}
/**
*
* generate thumbnail
*
* @param string $src - sourcefile
* @param float $width - image width
* @param float $height - image height
* @param string $thumb_prefix - prefix for thumbnail
* @return string
*
*/
function generateImgThumb($src, $width, $height, $thumb_prefix)
{
global $gCms;
$config =& $gCms->GetConfig();
$rootPath = $gCms->config["root_path"] ;
$imageManagerRelPath = "lib/filemanager/ImageManager/" ;
require_once($rootPath."/".$imageManagerRelPath."Classes/ImageManager.php");
require_once($rootPath."/".$imageManagerRelPath."config.inc.php");
$thumbName = getThumbPath($rootPath."/".$src, $thumb_prefix, $width, $height) ;
//generujemy miniaturke
if(!is_file($thumbName)){
$imgInfo = getimagesize($rootPath."/".$src);
if(!is_array($imgInfo)) return $src;
require_once($rootPath."/".$imageManagerRelPath.'Classes/Thumbnail.php');
// if image smaller than config size for thumbs
if ($imgInfo[0] <= $width && $imgInfo[1] <= $height) {
$thumbnailer = new Thumbnail($imgInfo[0],$imgInfo[1]);
$thumbnailer->createThumbnail($rootPath."/".$src, $thumbName);
}
// if image bigger than config size for thumbs
else {
$thumbnailer = new Thumbnail($width, $height);
$thumbnailer->createThumbnail($rootPath."/".$src, $thumbName);
}
if(is_file($thumbName)) {
return getThumbPath($src,$thumb_prefix,$width,$height) ;
}
}
return getThumbPath($src,$thumb_prefix,$width,$height) ;
}
/**
*
* Returns new path to thumbnail
*
* @param string $fullpathfile - absolute path to image file
* @param string $thumb_prefix - prefix for thumbnail
* @param float $width - image width
* @param float $height - image height
* @return string
*
*/
function getThumbPath($fullpathfile, $thumb_prefix, $width, $height)
{
$path_parts = pathinfo($fullpathfile);
return $path_parts['dirname']."/".$thumb_prefix.$width."_".$height."_".$path_parts['basename'];
}
/**
*
* Edit CGBlog / News / Content
*
*/
// CGBlog
if (isset($params['content']) and isset($params['cgblog_id'])) {
$content = replaceContentImageWithThumbs($params['content'], $thumb_prefix, $attribute);
$db = cmsms()->GetDB();
$query = "UPDATE ".cms_db_prefix()."module_cgblog SET cgblog_data = ? WHERE cgblog_id = ?";
$db->Execute($query, array($content, $params['cgblog_id']));
}
// News
else if (isset($params['content']) and isset($params['news_id'])) {
$content = replaceContentImageWithThumbs($params['content'], $thumb_prefix, $attribute);
$db = cmsms()->GetDB();
$query = "UPDATE ".cms_db_prefix()."module_news SET news_data = ? WHERE news_id = ?";
$db->Execute($query, array($content, $params['news_id']));
}
// Seiten-Inhalte
else if (method_exists($params['content'], 'get_content_blocks'))
{
foreach($params['content']->get_content_blocks() as $block_name => $block_info)
{
$params['content']->SetPropertyValue(
$block_name,
replaceContentImageWithThumbs(
$params['content']->GetPropertyValue($block_name),
$thumb_prefix,
$attribute
)
);
}
}
Weitere Module können ähnlich dem Einbau von CGBlog und News eingebaut werden. Voraussetzung dafür ist natürlich, dass diese Module in der Ereignisverwaltung eingetragen sind. Der Aufruf muss am Schluss des UDTs eingetragen werden.
Definition Attribute
In den globalen Einstellungen des Scripts kann eine CSS-Klasse und/oder ein Rel-Attribute festgelegt werden:
$attribute = array(); $attribute['css'] = "lightbox"; // Name of CSS class (can be emtpy) $attribute['rel'] = "page"; // Value of rel="" attribute (can be emtpy) Das Script kann natürlich auch in andere PHP Projekte eingebaut werden. Dazu muss jedoch die Thumbnailgenerierung geändert sowie die Contentmodifikation geändert werden.
Ereignisverwaltung ergänzen
Nun muss der UDT den verschiedenen Ereignissen in der Ereignisverwaltung zugewiesen werden.
Folgende Ereignisse müssen bearbeitet werden:
- ContentEditPre
- NewsArticleAdded
- NewsArticleEdited
- CGBlogArtikelAdded (falls installiert)
- CGBlogArtikelEdited (falls installiert)
Einfach den UDT dem Ereignis zuweisen.
Lightbox einbinden
Damit der durch Autolightbox erstellte Link mit einer Lightbox funktioniert, braucht es ein wenig Javascript. Voraussetzung ist ein eingebundenes jQuery.
<script type="text/javascript">
jQuery(function($) { $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png'], a[href$='.JPG'], a[href$='.JPEG'], a[href$='.GIF'], a[href$='.PNG']").attr({rel:"page"}).lightBox();});
</script> Mit diesem Schnippsel wird bei allen Links welche auf eine Grafik zeigen, das Attribut rel=»lightbox[page]» angehängt. Dieser Teil je nach verwendeter Lightbox angepasst werden. Der von mir hier genutzte Schnippsel verwende ich mit der jquery lightbox plugin. In der Regel findet man in der Anleitung zum jeweiligen Script welches Attribute ergänzt werden muss.
