Make Lightbox 1.0 simple enhancement for phpwcms contentpart

Post custom hacks and enhancements for phpwcms here only. Maybe some of these things will be included in official release later.
Post Reply
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Make Lightbox 1.0 simple enhancement for phpwcms contentpart

Post by marcus@localhorst »

QUICK INSTALLATION - MAKE LIGHTBOX 1.0.1
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!

Image

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!

Image

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"]);  
  }
}

?>
5. finish - should work now :-)

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]
Last edited by marcus@localhorst on Thu 5. Apr 2007, 19:58, edited 21 times in total.
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Post by sustia »

Nice, thanks for sharing :D
Campeones del mundo!
Vegetables!
Ben
Posts: 558
Joined: Wed 14. Jan 2004, 08:05
Location: Atlanta
Contact:

Post by Ben »

Wow, Marcus - that looks very simple and I'm impressed that you did it without a core code change! I'm looking forward to trying it out on upcoming projects.
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Post by marcus@localhorst »

Ben wrote: I'm impressed that you did it without a core code change!
the frontend_render "plug in" interface is the door to change near everything after the standard rendering of PHPwcms - that is great. I don't know if other systems has a similar interface.
it#s simple and its very very useful with the right functions/ideas ;-)
and regular expressions could turn everything upside down in $content["all"]...

m.
mochito
Posts: 35
Joined: Fri 9. Jul 2004, 12:51
Contact:

Post by mochito »

Hi & thx for great script.

one more thing: can you include the image-caption, please?

cu, juergen
User avatar
jsw_nz
Posts: 907
Joined: Fri 2. Apr 2004, 02:42
Location: New Zealand

Post by jsw_nz »

Outstanding

excellent work Marcus! :D
vello
Posts: 44
Joined: Wed 24. Mar 2004, 12:21
Location: Estonia
Contact:

Post by vello »

how I call this new file?
Vello
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Post by pepe »

no need to call it... only put your images into your articles - use the "Dateizentrale" and ... BINGO
vello
Posts: 44
Joined: Wed 24. Mar 2004, 12:21
Location: Estonia
Contact:

Post by vello »

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.
Vello
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Post by marcus@localhorst »

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.
please give an example page, with the non-working part.
(which version do you use?)

caption will add later if I have more time ;-)
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Post by sustia »

Marcus, it works perfectly :D

Here I have a live example (not a real site, works in progress ;) ):

http://sustia.netsons.org/wcms/index.php?lightbox
Last edited by sustia on Fri 10. Nov 2006, 09:37, edited 1 time in total.
Campeones del mundo!
Vegetables!
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Post by marcus@localhorst »

ok, fine :-)
nice potatoes too ;-)
Nordlicht
Posts: 160
Joined: Wed 12. Apr 2006, 08:16
Location: Germany, near Hamburg
Contact:

Post by Nordlicht »

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?
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Post by marcus@localhorst »

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?
1. I've include the CSS+JS Global over all Sites with or without gallery.
2. Put the JS In your Headsection of the Template
3. Put the CSS in your Headsection, too - or load it into the inc_css folder inside phpwcms_templates, to load it like the frontend.css (in newer phpwcms - versions...

take a look on the screenshot:
Image
User avatar
jsw_nz
Posts: 907
Joined: Fri 2. Apr 2004, 02:42
Location: New Zealand

Zoomify

Post by jsw_nz »

Hi Marcus,

I remember the topic being raised elsewhere (ZOOMIFY)
couldn't resist posting these links...

Zoomify website (free version available)
http://www.zoomify.com/

then an experimental site (Uni of Melbourne) - using zoomify with custom interfaces
http://128.250.125.178/

would be an interesting altermative - allowing you to zoom in on images - not sure if the code could be hacked enough to accomplish using the scheme you deved here.... basically the Flash zoomify interface could be downloading into a hidden layer and clicking on images would spawn it - with interface - would be heck of a challenge - just a thought.

:)
Post Reply