03.04.2007
Hi,
because of a userrequest, I've updated my script for 1.3.0 (it works for 1.2.x too) and wrote a german install guide.
There is minimal configuration to do. please read the phpwcms_lightbox_install.txt provided with the package you can download here:
phpwcms_lightbox.zip
read installation instruction
NOTE:
This Quick-Install is only for phpwcms version 1.2.x - 1.3.0. (with phpwcmsXT it may not work!)
I would like to force a new folder inside phpwcms_template, called "inc_app".
This folder should or could contain userspecified 3rd party JSS/CSS applications. So you have all files, images etc on one place with the same strukture as provided by the app. it's easier for further update.
I don't want provide a version for phpwcms v 1.1, please don't ask. Try instead to rewrite my code or check the manual installation below and this post:
http://www.phpwcms.de/forum/viewtopic.php?p=77577#77577
Please try out this release and post bugs.
thanks, marcus
INSTALLATION GUIDE (english/deutsch)
[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
fromCode: Select all
var fileLoadingImage = "template/inc_app/lightbox/images/loading.gif"; var fileBottomNavCloseImage = "template/inc_app/lightbox/images/closelabel.gif";
to
3. open the file config/phpwcms/conf.template_default.inc.phpCode: Select all
var fileLoadingImage = "phpwcms_template/inc_app/lightbox/images/loading.gif"; var fileBottomNavCloseImage = "phpwcms_template/inc_app/lightbox/images/closelabel.gif";
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
HISTORY: MANUAL INSTALLATION
Holla,
i like the phpwcms CP Pictures but I would like to use an other presentation of the pics - the popup is annoying (because my firefox need too long for kick out a popup window - maybe I've got too much extensions installed?! ;-/) anyway - the lightbox JS is very popular and very nice, so I choose that for inclusion.
But how to solve that without core-code-hacking?
Using Regular Expression magic combined with the great frontend_render interface.
first - the sourcecode is very simple and not extensively tested, but it works very fine for me.
EDIT: 19.12.2006 It's tested with PHPWCMS Version 1.1 RC4 (please see below) and 1.2.5-1.2.8 and 1.2.9 preview!
second - here is the result, the website of my girlfriend.
Level: middle - some php and regular expression knowlege are useful!
You should understand how the frontend_render Interface work - (all files placed there will be included and executed!)
AND you need to know how to include new Stylesheets and JS Script Files in your phpwcms framework!
AND how to use the Contentpart Pictures (Gallery)!!!!!
UPDATE: 10.11.2006 Adding the Imagecaptionthing
UPDATE: 13.11.2006 BUGFIX - seperate slidefunction for more than on Picture-Contentpart.
some more comments in code
UPDATE: 19.12.2006 Fix to use it in phpwcms 1.1 (no warranty) take a look here: http://www.phpwcms.de/forum/viewtopic.php?p=77577#77577
UPDATE: 19.12.2006 Fix to use it in phpwcmsxt (no warranty) RegExpr. search and detect the gallery now over multiple lines.
Installation:
1. go to the lightbox website, read the instructions to understand what lightbox do and why and how and then download the package.
2. put the files on your server like described in lightbox docu.
you can put the CSS in your phpwcms CSS folder (inc_css), but you should take a look to some paths of bg-images of lightbox.
the JS Folder should be put on root, because of some pic paths (or you change them in the lightbox.js)
lightbox pics folder should be on root too, else ... ->paths
3. include the JS + CSS into you global website template.
4. open the config/phpwcms/conf.template_default.inc.php
check the value $template_default["article"]["imagelist_class"]
is it imagelisttd? good!
it can be any other class name, but with that, we will detect the image gallery.
UPDATE: If you need to display the Caption in Lightbox, check if
$template_default["article"]["imagelist_caption_class"] = "imglistcaption";
again, it could be any other classname, but then you need to change the
variables on top of the updated Codesnipped
To find out, how much Picture-CP are present on the actual site, we need to give a classname for the gallerytable, too
$template_default["article"]["imagelist_table_class"] = "imagegallery";
it could be any other classname, but then you need to change the
variables on top of the up-updated Codesnipped
Set the $version variable to 0, if you use an older phpwcms installation!
5. place a new *.php file into your frontend_render folder and paste the following (updated) code
Code: Select all
<?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"]);
}
}
}
?>
This is the second version, which have the bug to merge all Picture-CP in Slide-function. try it, if the actual version don't work for you!
Code: Select 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"]);
}
}
?>This is the very first version, without catching the caption and the bugfix - if you have Problems try this first
Code: Select 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"]);
}
}
?>
if the gallery generation code is changed in future, you just* need to adjust the regular expressions.
* hehe - you need only some RegEx knowledge!!!
How I said, the code was very fast written and it works very well for me.
This show also, how to change content without touching the corecode.
Hope it will work for you, if there are any improvements, please post here.
the regular expression could be better maybe, but...
best marcus[/quote]
