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.
Nordlicht
Posts: 160
Joined: Wed 12. Apr 2006, 08:16
Location: Germany, near Hamburg
Contact:

Post by Nordlicht »

Now it works, but how do I inserte the picture into the articles?
Do I have to inserte the following code by hand in a HTML article-part?

Code: Select all

<a href="content/images/45a4a90a16e105590016e2848c3fe61f.jpg" rel="lightbox[gallery]" title="Bilduntertitel Bild 1"><img src="content/images/45a4a90a16e105590016e2848c3fe61f.jpg" width="150" height="96" border="0" class="imagelistimg" alt="Bild 1" /></a>
<a href="content/images/b76a6fc9743fa5cd56e07756eeffa09a.jpg" rel="lightbox[gallery]" title="Bilduntertitel von Bild 2"><img src="content/images/b76a6fc9743fa5cd56e07756eeffa09a.jpg" width="150" height="96" border="0" class="imagelistimg" alt="Bild 2" /></a>
<a href="content/images/9f4afcabe3c2bd71e683c2408f3a260e.jpg" rel="lightbox[gallery]" title="Bilduntertitel von Bild 3"><img src="content/images/9f4afcabe3c2bd71e683c2408f3a260e.jpg" width="150" height="96" border="0" class="imagelistimg" alt="Bild 3" /></a>
To copy the picture title from the File-Browser to the article is not so smooth.
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Post by sustia »

Nordlicht wrote:Now it works, but how do I inserte the picture into the articles?
Do I have to inserte the following code by hand in a HTML article-part?

To copy the picture title from the File-Browser to the article is not so smooth.
Hi Nordlicht, you must simply insert and manage the image via "images" content part, like in the figure below

Image


marcus: now with the caption in perfect! :)
Campeones del mundo!
Vegetables!
Nordlicht
Posts: 160
Joined: Wed 12. Apr 2006, 08:16
Location: Germany, near Hamburg
Contact:

Post by Nordlicht »

Wow, so easy...
Thanks for help.
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Post by pepe »

Hi Marcus,

works very well :D .... but not perfect! :cry: :cry: :cry:


The script takes ALL Images of the whole artikle and puts it into the slideshow!!!

Would be much better, if only these images would be shown, which are in the same ContentPart "Images"

I hope, you will find the time, to have a look after your sript and search for the mistake...
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Post by marcus@localhorst »

yes, yes pepe, it#s right - the script slides all images on one site in different gallery contentparts. this is because the attribut rel="lightbox[gallery]", which is used by lightbox to display slides, is hardcoded.

but that is not a big thing, to set a value for different CP (I hope :-))

will fix that in the next day.
best
marcus
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Post by sustia »

Hi marcus, I've found another nice javascript gallery, named Highslide that could be implemented in phpWCMS:

http://vikjavev.no/highslide/

I've used your solution in order to implement this gallery, and it works.

The problem is that I have a very little knowledges of PHP, so I'm not able to render the caption of the image within your file :oops:

Anyway, the solution works, although I am sure that it's not the ideal solution and the right code for this gallery

Here come the example:
http://sustia.netsons.org/wcms/index.php?lightbox
Campeones del mundo!
Vegetables!
User avatar
anthony.abraira
Posts: 99
Joined: Sun 11. Sep 2005, 07:42
Location: Mars Hill, NC
Contact:

Did anyone figure it out...

Post by anthony.abraira »

I was just wondering if anybody actually fixed this little creation so you can create seperate lightbox gallerys with each cp you make.... :?:

Thanks in advance

aa
"The trick is living without an answer."
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Re: Did anyone figure it out...

Post by marcus@localhorst »

anthony.abraira wrote:I was just wondering if anybody actually fixed this little creation so you can create seperate lightbox gallerys with each cp you make.... :?:

Thanks in advance

aa
i will fix it today :-)
best
marcus
jscholtysik

Post by jscholtysik »

Hi sustia,


great tool that you have found!!!

Highslide's functions would be a great enhancement for phpwcms... ;-)

@marcus:
I'm looking forward to test your "soon to be modified" script.


Greetings.


Joachim
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Post by marcus@localhorst »

I've updated the Script and fix the Bug, which merge all gallerys in one page (if the slide function is used), TAKE A LOOK TO THE FIRST POST!

@sustia
I've take a short look on that highslide thing. I must say, I prefer the lightbox solution. this highslide has too much slides for me :-) and it is not really free to include (only for non-commercial use). anyway - that's my taste.

to include captions in highslide, it's a little bit tricky. but not impossible I think.

you need to give the enclosing <a> tag an ID and this ID will be expanded on the caption <div> by id="caption-for-ID"

here a bit code from scratch - it may not work, but maybe it show how it could work.

replace my function with that (or better compare, to understand what happen)
EDIT: This Codepart is only to use, if you want to use the Highslide script Not for lightbox!!

Code: Select all

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 ;-)
 //------------------------------
 // you need a unique id for each piclink
 // we generate a md5 hash of the $img - it should be unique
 // if not, we add a random number ;-)
 $myid = rand()."-".$img;
 $id = "my_".md5($myid);
 //------------------------------
 //echo $id;
 list($img, $width_height) = explode('?', $img);
 $img = $GLOBALS["phpwcms"]["content_path"]."images/".$img; // this is the full picturepath
 // we add the id to the link
 $image ="<a href=\"".$img."\" id=\"".$id."\" title=\"".$caption."\" class=\"highslide\" onclick=\"return hs.expand(this)\">".$thumb."</a>";
 //------------------------------
//and then we need to add the caption <div> after that
 $image .="<div class=\"highslide-caption\" id=\"caption-for-".$id."\">".$caption."</div>";
 //------------------------------
 return $image;
}

using md5 to generate unique values is maybe stupid, but it was the fastest way, to extend the code without changing the whole replacement code and each image should be unique and to be shure, I've add a random number.
(any simple idea to make it better?)

I'm not shure, how much chars are allowed in ID Attribute, found nothing - so I think, this function should work for highslide.

greetings
marcus
Last edited by marcus@localhorst on Wed 13. Dec 2006, 14:49, edited 2 times in total.
User avatar
anthony.abraira
Posts: 99
Joined: Sun 11. Sep 2005, 07:42
Location: Mars Hill, NC
Contact:

great work

Post by anthony.abraira »

:D :D :D Good work marcus.
Excellent lightweight and easy as hell. what more could i ask for?

peace maestro
"The trick is living without an answer."
User avatar
anthony.abraira
Posts: 99
Joined: Sun 11. Sep 2005, 07:42
Location: Mars Hill, NC
Contact:

pushing the envelope a bit

Post by anthony.abraira »

I just put a comment praising and i still do, but I was wondering if there was a way to put one image that would initiate all the pictures in the CP. Meaning can you just have one image represent the icon rather than list all the shots...just wondering...
"The trick is living without an answer."
User avatar
anthony.abraira
Posts: 99
Joined: Sun 11. Sep 2005, 07:42
Location: Mars Hill, NC
Contact:

Re: pushing the envelope a bit

Post by anthony.abraira »

anthony.abraira wrote:Meaning can you just have one image represent the icon rather than list all the shots...just wondering...
Sorry for so many posts but the ideas come as the component is actually used. I was wondering if there was a way to implement this feature in the article graphics. In the main article you can put a graphic..and it has the zoom feature as well. Gives a little more formatting control.
"The trick is living without an answer."
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Post by sustia »

marcus@localhorst wrote: @sustia
I've take a short look on that highslide thing. I must say, I prefer the lightbox solution. this highslide has too much slides for me :-) and it is not really free to include (only for non-commercial use). anyway - that's my taste.
Yes, I know, and in effect I use it in a educational site :wink:
marcus@localhorst wrote:
to include captions in highslide, it's a little bit tricky. but not impossible I think.

you need to give the enclosing <a> tag an ID and this ID will be expanded on the caption <div> by id="caption-for-ID"

here a bit code from scratch - it may not work, but maybe it show how it could work.

replace my function with that (or better compare, to understand what happen)

Code: Select all

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 ;-)
 //------------------------------
 // you need a unique id for each piclink
 // we generate a md5 hash of the $img - it should be unique
 // if not, we add a random number ;-)
 $myid = rand()."-".$img;
 $id = "my_".md5($myid);
 //------------------------------
 //echo $id;
 list($img, $width_height) = explode('?', $img);
 $img = $GLOBALS["phpwcms"]["content_path"]."images/".$img; // this is the full picturepath
 // we add the id to the link
 $image ="<a href="".$img."" id="".$id."" title="".$caption."" class="highslide" onclick="return hs.expand(this)">".$thumb."</a>";
 //------------------------------
//and then we need to add the caption <div> after that
 $image .="<div class="highslide-caption" id="caption-for-".$id."">".$caption."</div>";
 //------------------------------
 return $image;
}

using md5 to generate unique values is maybe stupid, but it was the fastest way, to extend the code without changing the whole replacement code and each image should be unique and to be shure, I've add a random number.
(any simple idea to make it better?)

I'm not shure, how much chars are allowed in ID Attribute, found nothing - so I think, this function should work for highslide.

greetings
marcus
Yes, I've compared what you have done, and I've understood the change (more or less).
Anyway, thanks a lot, because the gallery works perfectly, and yoy can see it in action at the bottom of this page (sorry, in italian)
http://noria.ba.cnr.it/laboratorio_fisico.phtml
Campeones del mundo!
Vegetables!
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Re: pushing the envelope a bit

Post by marcus@localhorst »

anthony.abraira wrote:
anthony.abraira wrote:Meaning can you just have one image represent the icon rather than list all the shots...just wondering...
Sorry for so many posts but the ideas come as the component is actually used. I was wondering if there was a way to implement this feature in the article graphics. In the main article you can put a graphic..and it has the zoom feature as well. Gives a little more formatting control.
I think, that#s no problem, but need an other script, which parse the rendered html code of the "Text with picture" CP, to turn this to a new presentation format.

But i don't want to write this at the moment - lot of other work to do ;-)
Look at my code and find out what to do - it's not such a big thing. Only regular Expression usage and some loops over preg_match() by PHP
;-)

best m.
Post Reply