Make Lightbox 1.0 simple enhancement for phpwcms contentpart

[pepe]

Hi marcus@localhorst,

only a "short" question:

what is to change the .$caption. , if i want to use the "alttext" out of the imagecaption-field, to use as lightbox-title???

$image ="<a href=\"".$img."\" rel=\"lightbox[".$pos."]\" title=\"".$caption."\">".$thumb."</a>";


So it would be possible, to have no (or other) captions on the page but in the lightbox-frame!!!

[marcus@localhorst]

hi pepe...

well if you look at these lines of code you will see, the thumbnailimagecode is untouched:

$linkfind ='#<a href="image_zoom.php\?show=(.*)".*[^>]>(.*)</a>#Ue';
$linkreplacer ="makelightbox('$1','$2','$caption','$pos')";

there is more regexpr. needed and I'm not shure if the effort fits the benefit (?! ob der aufwand den nutzen rechtfertigt, oder so )

I want to keep the code simple for further upgrading.
(if something change in generation the image gallery).
If it is too complexe, it's maybe easier to hack the core directly?!

to extract the alt text it should be possible, to do that inside the function, something like this:

Code: Select all

function makelightbox($img,$thumb,$caption="",$pos="gallery_0") {
...
 preg_match('#alt="(.*)"#',$thumb,$alttext);
 $caption = $alttext[1]; //overwrite the caption var
...
}

the $caption with the real caption will be overwritten by the matched $altext[1]

best
marcus

[pepe]

Jau... genau so hab ichs mir gedacht... und , dank deiner Hilfe, auch gemacht:

.
.
.
preg_match('#alt="(.*)"#',$thumb,$alttext);
$caption = $alttext[1]; // overwrite the caption var with phpWCMS-alttext

$image ="<a href=\"".$img."\" rel=\"lightbox[".$pos."]\" title=\"".$caption."\">".$thumb."</a>";
return $image;
}
.
.
.

Jetzt wird der altText von phpWCMS als Caption für die Lightbox verwendet! Klasse!
Ansonsten wäre ja der Text unter der Page-Darstellung und der Lightbox-Bilduntertitel identisch!

Wenn ich jetzt in phpWCMS eintrage:

Bildunterzeile|Pepes Bild[BR](c) 2006 by Manfred Peperkorn

dann habe ich

In der Seitendarstellung:
Bildunterzeile

Im Lightbox-Rahmen:
Pepes Bild
(c) 2006 by Manfred Peperkorn


Ideal auch, wenn ich bei mehreren Bildern als Gruppe die Bildunterzeile nicht haben will, lass ich den vorderen Bereich weg und erhalte dann in der "Diashow" jeweils die passenden "Unterschriften".

Nach dem Eingabemuster:
|Pepes Bild 1[BR](c) 2006 by Manfred Peperkorn
|Pepes Bild 2
|Pepes Bild 3
|Pepes Bild 4[BR](c) 2006 by Manfred Peperkorn
|Pepes Bild 5[BR](c) 2006 by Manfred Peperkorn



Perfekt!!!! und was sagen wir da.... DANKE SEHR!!!

[marcus@localhorst]

Fine!
{english summary below}

mmh, das mit den [BR]s hatte ich auch schon, ich bin mir nicht sicher ob tags im title attribut erscheinen dürfen.
http://de.selfhtml.org/html/referenz/at ... lattribute
title kann einen wert vom typ #CDATA enthalten

und

#CDATA steht für character data, zu deutsch: Zeichendaten. Es handelt sich um Text, der keine weiteren HTML-Elemente enthalten kann. In HTML ist das typischerweise Text, der bei einer Wertzuweisung an ein Attribut vorkommt. Solcher Text darf bei HTML 4.0 aus allen Zeichen bestehen, die in der Seite Zeichenreferenz genannt sind. Benannte Zeichen wie &uuml; sind also ebenso erlaubt wie numerische Notationen von der Art &#x20AC; oder €. Solche Notationen werden erkannt und umgesetzt. HTML-Auszeichnungen, also die Notation von HTML-Elementen, wird in CDATA-Bereichen dagegen nicht erkannt. Das einzige, wonach gesucht wird und was erkannt wird, ist die Zeichenfolge </. Deshalb müssen Sie das Zeichen < in Wertzuweisungen an Attribute unbedingt wie üblich durch < maskieren. Leerzeichen am Beginn oder Ende eines #CDATA-Textbereichs wird normalerweise abgeschnitten.

#CDATA schränkt zwar in keiner Weise ein, welcher Text einem Attribut als Wert zugewiesen wird. Dennoch sind in vielen Fällen nur bestimmte typische Angaben üblich. So fallen Seite Sprachenkürzel beispielsweise auch unter #CDATA, aber erwünscht ist an der entsprechenden Stelle eine Angabe nach einem bestimmten Schema. Meistens werden solche Schemata durch Seite RFCs geregelt. In dieser Attribut-Referenz wird auf solche RFCs hingewiesen.

http://de.selfhtml.org/html/referenz/at ... .htm#cdata

deswegen entferne ich die HTML Tags.
aber es funktioniert natürlich auch so.

english summary:
pepe use [BR] in imagecaption as phpwcms-replacementag to render <br />.
the the lightbox script use the title attribute of the enclosing <a> tag, to transport the Imagecaption into the presentation frame.
It seems that html tags are not allowed into the title attribute:
so title="caption<br />text" throws out a warning from the validator.

but it works...

m.

[pepe]

Here an example without [BR] / Hier ein Beispiel ohne [BR].

Damit kann ich natürlich auch leben, denn der Umbruch funktioniert ja automatisch!

http://freunde-kloster-saarn.de/index.php

Habe noch keinen Validator laufen lassen... aber der Weg ist richtig! Und der 1. Schritt ist immer der wichtigste

EDIT:
______________________________
So, den 2. Schritt hab ich auch gemacht... und den doppelten Eintrag für den Titel rausgefummelt.
Nicht schön umgesetzt, aber mit meinen geringen php-Kenntnissen bin ich ganz zufrieden. Es funktioniert.
Ich habe jetzt die alt-Text Attribute für die kleinen Vorschaubilder und für die GOSSEN als Bildunterzeile.
Die Caption-daten funktionieren weiter wie bisher als Bilduntertitel bei den kleinen Bildern. Bleiben die leer, auch alles paletti!

Ich bin zufrieden... deshalb nochmal DANKE!

[nekket]

marcus: That's awesome... i like it and it works like a charme

[Heiko H.]

THX marcus,

it works fine in phpwcms v1.25-DEV too
but please change:

$template_default["article"]["imagelist_table_class"] = "imgagegallery";

to

$template_default["article"]["imagelist_table_class"] = "imagegallery";

in your HowTo.
Thanks again, good work!!!

[marcus@localhorst]

it works fine in phpwcms v1.25-DEV too
but please change:

$template_default["article"]["imagelist_table_class"] = "imgagegallery";

to

$template_default["article"]["imagelist_table_class"] = "imagegallery";

in your HowTo.

Thanks! I've change it...

[Quizmaster]

@ Marcus:
Thanks man ! Works like a charm !

Just one question, when I load the photogallery, I have to wait for the whole page to load. When I don't do this, and I click on a photo, the lightbox script doesn't work.
I tried with a preload bar to solve this problem, but PHPWCMS gets his thumbs from content/images. As I can see the 'big' pictures are also in this folder. The preload script I am using 'looks' in a specified folder and preloads al the .jpg from this folder, so also the 'big' pictures which makes the preload unnessesary long. I only need to preload the 'thumbs'. Any idea how to solve this?

Many thanks !!!

Btw: this is the link http://www.clubuit.nl

[marcus@localhorst]

@ Marcus:
The preload script I am using 'looks' in a specified folder and preloads al the .jpg from this folder, so also the 'big' pictures which makes the preload unnessesary long. I only need to preload the 'thumbs'. Any idea how to solve this?

well, i think the preloaderscript needs something like an array with the right files to load.
And the right files, are the thumbnailfiles in the plain gallery.
You need to grab these filenames with some reg expressions inside my codesnippet and buiuld your array to load.

I don't know the code, so I can't say more.
greetings marcus

[nekket]

@marcus:
Do you know how to get it work with a 1.1 RC4? *g*

[marcus@localhorst]

@marcus:
Do you know how to get it work with a 1.1 RC4? *g*

yes!



want to know how?

is there the frontend_render folder?
if yes, it should be no problem.

use the final code from startthread, set the right class, to match the imagetable and look what happen.
are links rewritten? (from image_zom.php?ga5dfs7he4ghsdg== to something 1_122_64334737.jpg)

good! there is just the problem, that the 1.1 version has a different filemanagement, so you need to adjust the paths in this line:

Code: Select all

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

to this line

Code: Select all

$img = $GLOBALS["phpwcms"]["file_tmp"]."".$GLOBALS["phpwcms"]["dir_preview"]."".$img;

try and report please
thanks
marcus

[nekket]

Mhhh doesn't work
But it even doesn't rewrite the images...
I'll try it again tomorrow.

[nekket]

Yepp - thank to Marcus it works too with 1.1 Release of PHPWCMS. But you need to place the lightbox.php File in the frontend_init folder ....

[kolja]

i decided not to have the lightbox-code in my template, but on every page i like. so i modified the script the way that it only inserts light-box-usable code, if the lightbox.js-file is included in page's code. i'll post the changes below - perhaps it helps someone. thank you marcus!

pro:
- i'm able to include the lightbox only where i like - elsewhere normal zoom is used
- amount of code transferred per page is smaller
- lightbox only loaded when required

contra:
- for every page i have to insert the required lightbox-block myself

what to change:
1.) inserted XXX.php in directory phpwcms_template/inc_script/frontend_render

--- [FIND] -------------------------------

Code: Select all

// 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);

--- [INSERT BEFORE] ------------------

Code: Select all

// Only convert data if lightbox.js-links is present
$sSearchIn = $content["all"];
$sPattern  = 'lightbox.js';
if (($pos = strpos($sSearchIn, $sPattern)) !== false) {

--- [FIND] -------------------------------

Code: Select all

// last thing is replace the exact strings with the new one
$content["all"]   = str_replace($match[1][$i], $replace, $content["all"]); 
    }
  }
}

--- [INSERT AFTER] --------------------

Code: Select all

} //if (($pos = strpos

2.) html-cp on every page that uses lightbox
for every page that should use a lightbox add a HTML-contentpart with following code:

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>

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

<script type="text/javascript">
<!--
  initLightbox();
//-->
</script>

how to activate:
only add this HTML-CP-block to the page you like (copy&paste...)

it's been a quick modification! works for me, but may have mistakes.