phpwcms Support Forum

[ENGLISH] (Deutsche Anleitung siehe unten!)

ABOUT

This is a preconfigured package of the lightbox script for "non-destructive-use" with phpwcms.
"non-destructive-use" means, you don't need to hack the corecode of phpwcms, only one config-file in best case.
It is compatible with phpwcms 1.2.x - 1.3.0 if you never change the corecode for the Contentpart Images.

PACKAGE

This package contains all files you need to run the current version of Lightbox
with phpwcms -> Contentpart Images
All files will be dropped into the phpwcms template folder.
I would like to force a new folder inside template, called inc_app/lightbox
inc_app could contain any other external, userspecifed webapplicationpackage in JS/CSS to have all files together.
The php parserscript will be dropped into the well known frontend_render.

INSTALLATION

# Version 1.2.x - 1.3.0

1. Setup a ContentPart "Pictures" (Bilder). phpwcms will generate a html table with your pictures
where the detail pic will open in a popup window. (check "click enlarge")

2.1 Install on a fresh phpwcms 1.3.0 installation
upload the folder (from my zip archive) "template" to your existing phpwcms installation.
no files will be overwritten except you have a lightbox.php in your frontend_render folder.
Thats all!



2.2 In case your phpwcms template folder has an other name, like phpwcms_templates
(in previous versions) just upload the two folders "inc_script" and "inc_app"
from the archiv into your template folder!

Then open the inc_app/lightbox/js/lightbox.js and change the first values
from

Code: Select all

	var fileLoadingImage = "template/inc_app/lightbox/images/loading.gif";		
	var fileBottomNavCloseImage = "template/inc_app/lightbox/images/closelabel.gif";
	

to

Code: Select all

	var fileLoadingImage = "phpwcms_template/inc_app/lightbox/images/loading.gif";		
	var fileBottomNavCloseImage = "phpwcms_template/inc_app/lightbox/images/closelabel.gif";
	

3. open the file config/phpwcms/conf.template_default.inc.php
search for $template_default['article']['imagelist_table_class'] (around Line 188)
and give a unique classname (if this value is empty).
do the same with $template_default['article']['imagelist_class'] and
$template_default['article']['imagelist_caption_class']

4. the Lightbox should work now. Clear your browsercache if nothings happen!!

have fun.

CUSTOMIZE AND UPDATE LIGHTBOX

Now you can go to the folder template/inc_app/lightbox and customize the presentation css file,
images or JS parameters in lightbox.js

If you want to update Lightbox in future, just replace the inc_app/lightbox folder with the new files provided by the lightbox site.
(don't forget to backup files and to set the right path in inc_app/lightbox/js/lightbox.js (see #2.2)

And please, if you install different AJAX/JS/CSS Applications which use different Javascript libraries
like scriptalicious.js or jquery or something else, YOU NEED TO KNOW WHAT YOU ARE DOING!!! because of overwrite settings/functions...

REFERENCE AND LINKS

Lightbox Script: http://www.huddletogether.com/projects/lightbox2/
History of my phpwcms enhancement, if you want to know how it works:
http://www.phpwcms.de/forum/viewtopic.php?p=75912#75912

Sorry for my bad english, hope you understand.


[DEUTSCH]

ÜBER

Dies ist eine fertige Zusammenstellung um Lightbox in PHPWCMS zu nutzen, ohne das der Programmkern von
PHPWCMS geändert werden muss. Diese Erweiterung greift nur auf den Contentpart "Bilder" zu!

INHALT DES PAKETES

Dieses Paket enthält alle Dateien um Lightbox mit PHPWCMS zum laufen zu bringen.
Dazu muss nur der Inhalt des Archives auf den Server gespielt werden, ein Contentpart Bilder eingerichtet werden und
ein paar Variablen geändert werden. Das wars.

INSTALLATION

# Version 1.2.x - 1.3.0

1. Richte einen Contentpart "Bilder" ein und setze den Haken in "Klick vergrößerbar" (Damit die vergrößerte Ansicht des Bildes
als Popup geöffnet wird - wie das so standard ist)

2.1 Bei einer neuen phpwcms 1.3.0 Installation ist wie folgt vorzugehen:
lade den ordner "template" aus dem archiv in deine existierende phpwcms installation.
Es werden keine Dateien überschrieben!
Thats all!



2.2 Im Falle der template Ordner hat einen anderen Namen phpwcms_templates
(wie in vorhergehenden phpwcms Versionen), dann lade einfach nur die beiden ordner "inc_script" and "inc_app"
in den template ordner!

Dann öffne inc_app/lightbox/js/lightbox.js und ändere die ersten beiden Werte/Variablen
von

Code: Select all

	var fileLoadingImage = "template/inc_app/lightbox/images/loading.gif";		
	var fileBottomNavCloseImage = "template/inc_app/lightbox/images/closelabel.gif";
	

nach

Code: Select all

	var fileLoadingImage = "phpwcms_template/inc_app/lightbox/images/loading.gif";		
	var fileBottomNavCloseImage = "phpwcms_template/inc_app/lightbox/images/closelabel.gif";
	

(jenachdem wie dein template ordner heisst)

3. öffne die Datei config/phpwcms/conf.template_default.inc.php
suche nach $template_default['article']['imagelist_table_class'] (ungefähr Zeile 188)
und trage hier einen CSS Klassenname ein z.B. imagelisttable.
tu das selbe mit $template_default['article']['imagelist_class'] und
$template_default['article']['imagelist_caption_class'] (normalerweise sollten diese werte vorbelegt sein)

4. Die Lightbox sollte nun leuchten . Browsercache leeren falls nichts passiert!!!

Spass haben.

CUSTOMIZE AND UPDATE LIGHTBOX

Geh in den Ordner template/inc_app/lightbox und ändere die CSS Datei nach belieben,
die Buttons (Close/next/prev) oder die JS parameters in lightbox.js
Du solltest wissen was du tust!!!

Wenn du ligfhtbox in zukunft aktualisieren willst, dann kannst du den inc_app/lightbox ordner einfach mit den
neuen Dateien von der Lightboxseite überschreiben.
(Vergiss nicht ein Backup zu machen und die Pfade in inc_app/lightbox/js/lightbox.js anzupassen! (siehe #2.2)

UND, wenn du noch andere AJAX/CSS/JS Anwendungen installieren willst, solltest du genau wissen was du tust, gerade wenn verschiedene
JS Bibliotheken wie scriptalicious oder jquery genutzt werden. Evt. verträgt sich das nicht...

REFERENZEN UND LINKS

Lightbox Script: http://www.huddletogether.com/projects/lightbox2/
History of my phpwcms enhancement, if you want to know how it works:
http://www.phpwcms.de/forum/viewtopic.php?p=75912#75912

<?php
// MAKE LIGHTBOX GALLERY v0.2.3.
// m.o. 05.12.2006

// set these to the right class you have given in
// config/phpwcms/conf.template_default.inc.php
// $template_default["article"]["imagelist_class"]	and
// $template_default["article"]["imagelist_caption_class"]
// $template_default["article"]["imagelist_table_class"]
// Set $version for your right version of phpwcms,
// to use it in older installations too.
//
// and "Set The Controls For The Heart Of The Sun"!
// ;-)

#     \|/
#    --o--
#     /|\

$imagecpclass   = "imagegallery";
$imagecellclass = "imagelisttd";
$imagecaptclass = "imglistcaption";


// change the following only if required!

function makelightbox($img,$thumb,$caption="",$pos="gallery_0") {
 $img = base64_decode($img);
 $thumb = stripslashes($thumb); // holds the pure orginal htmlcode for displaying the thumbimage
 // $caption = convert_to_anything($caption); //maybe you need to check the caption for something illegal ;-)
 list($img, $width_height) = explode('?', $img);


 $img = $GLOBALS["phpwcms"]["content_path"]."images/".$img; // this is the full picturepath for phpwcms v1.2.x

// uncomment the line below, to make it work in phpwcms version 1.1 RC
//$img = $GLOBALS["phpwcms"]["file_tmp"]."".$GLOBALS["phpwcms"]["dir_preview"]."".$img;

 // if you want to use an other presentation methode or an other script you can change the linkage here.
 $image ="<a href=\"".$img."\" rel=\"lightbox[".$pos."]\" title=\"".$caption."\">".$thumb."</a>";
 return $image;
}

// first search for given css class $imagecpclass to seperate each gallery-table
$searchcp ='#<table.*[^>]class="'.$imagecpclass.'">(.*)<\/table>#Us'; // U = ungreedy
preg_match_all($searchcp,$content["all"],$matchcp, PREG_PATTERN_ORDER);

// if found one or more picture tables loop through then and replace for each.
foreach($matchcp[0] as $mypos => $piccp) {
  $pos = "gallery_".$mypos; // this give unique names for the gallery slideshow.
  
  // search for imagelisttd which describe the image table
  $search ='#<td class="'.$imagecellclass.'">(.*)<\/td>#Us'; // U = ungreedy
  preg_match_all($search,$matchcp[0][$mypos],$match, PREG_PATTERN_ORDER);
  //print_r($match);
  
  // search for .imglistcaption class to grab the caption
  $searchcapt ='#<td class="'.$imagecaptclass.'">(.*)<\/td>#Us'; // U = ungreedy
  preg_match_all($searchcapt,$matchcp[0][$mypos],$matchcapt, PREG_PATTERN_ORDER);


  if(is_array($match[1])) {
  // now loop through the matches and replace them with the custom code from function makelightbox 
    foreach($match[1] as $i => $imgcell) {
  	   $caption=$matchcapt[1][$i]; // get image caption if available - if not, it's empty
    	 $linkfind ='#<a href="image_zoom.php\?show=(.*)".*[^>]>(.*)</a>#Use';
    	 $linkreplacer ="makelightbox('$1','$2','$caption','$pos')";
    	 $replace = preg_replace($linkfind,$linkreplacer,$match[1][$i]);
    	 // last thing is replace the exact strings with the new one
    	 $content["all"]	= str_replace($match[1][$i], $replace, $content["all"]);  
    }
  }
}
?>

<?php
// MAKE LIGHTBOX GALLERY v0.2
// m.o. 10.11.2006

// set these to the right css class you have given in
// config/phpwcms/conf.template_default.inc.php
// $template_default["article"]["imagelist_class"]	and
// $template_default["article"]["imagelist_caption_class"]
$imagecellclass = "imagelisttd";
$imagecaptclass = "imglistcaption";

// change the following only if required!

function makelightbox($img,$thumb,$caption="") {
 $img = base64_decode($img);
 $thumb = stripslashes($thumb);
// $caption = convert_to_anything($caption); //maybe you need to check the caption for something illegal ;-)
 list($img, $width_height) = explode('?', $img);
 $img = $GLOBALS["phpwcms"]["content_path"]."images/".$img;
 $image ="<a href=\"".$img."\" rel=\"lightbox[gallery]\" title=\"".$caption."\">".$thumb."</a>";
 return $image;
}

// search for imagelisttd which describe the image table
$search ='#<td class="'.$imagecellclass.'">(.*)<\/td>#U'; // U = ungreedy
preg_match_all($search,$content["all"],$match, PREG_PATTERN_ORDER);
//print_r($match);

// search for .imglistcaption class to grab the caption
$searchcapt ='#<td class="'.$imagecaptclass.'">(.*)<\/td>#U'; // U = ungreedy
preg_match_all($searchcapt,$content["all"],$matchcapt, PREG_PATTERN_ORDER);


if(is_array($match[1])) {
// now loop through the matches and replace them with the custom code from function makelightbox 
  foreach($match[1] as $i => $imgcell) {
	   $caption=$matchcapt[1][$i]; // get image caption if available - if not, it's empty
  	 $linkfind ='#<a href="image_zoom.php\?show=(.*)".*[^>]>(.*)</a>#Ue';
  	 $linkreplacer ="makelightbox('$1','$2','$caption')";
  	 $replace = preg_replace($linkfind,$linkreplacer,$match[1][$i]);
  	 // last thing is replace the exact strings with the new one
  	 $content["all"]	= str_replace($match[1][$i], $replace, $content["all"]);  
  }
}

?>

<?php
// MAKE LIGHTBOX GALLERY v0.1
// m.o. 11.2006

function makelightbox($img,$thumb) {
 $img = base64_decode($img);
 $thumb = stripslashes($thumb);
 list($img, $width_height) = explode('?', $img);
 $img = $GLOBALS["phpwcms"]["content_path"]."images/".$img;
 $image ="<a href=\"".$img."\" rel=\"lightbox[gallery]\">".$thumb."</a>";
 return $image;
}

// search for imagelisttd which describe the image table
$search ='#<td class="imagelisttd">(.*)<\/td>#U'; // U = ungreedy switch
preg_match_all($search,$content["all"],$match, PREG_PATTERN_ORDER);
//print_r($match);

if(is_array($match[1])) {
// now loop through the matches and replace them with the custom code from function makelightbox 
  foreach($match[1] as $i => $imgcell) {
  	 $linkfind ='#<a href="image_zoom.php\?show=(.*)".*[^>]>(.*)</a>#Ue';
  	 $linkreplacer ="makelightbox('$1','$2')";
  	 $replace = preg_replace($linkfind,$linkreplacer,$match[1][$i]);
  	 // last thing is replace the exact strings with the new one
  	 $content["all"]	= str_replace($match[1][$i], $replace, $content["all"]);  
  }
}

?>

Ben wrote: I'm impressed that you did it without a core code change!

vello wrote:if I use CP html and code like this...

<a href="./content/images/5d775e06f320a9e372e386af3e58627f.jpg" rel="lightbox[Pic]"><img scr="./content/images/8d83c886a5235149467fe521643ce862.jpg"></a>

... then lightbox works fine, but with CP Pictures does not.

Nordlicht wrote:Where did you put these lines?

Code: Select all

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

In the header of all sites or just in an HTML-article on the site you want to use the lightbox

Same with

Code: Select all

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Where did you insert this?