Lightbox in gallery

[sustia]

Hi, I would like to implement Lightbox in a gallery in phpWCMS, but I'm not able to find the file that insert the images in the gallery.
What is the file where I must insert the link to the javascript?

I see the thread of Gino Bonetti, but I would like to avoid to insert every time the HTML code.
Thanks.

PS: I don't know if this is the appropriate section.

[DeXXus]

How about "index.php" ? Place your "lightbox.js" file into the "/include/inc_js/" directory. (EDIT: that should be "/phpwcms_template/inc_js/")

THEN FIND THIS LINE:

Code: Select all

$content['page_start'] .= '  <script src="'.TEMPLATE_PATH.'inc_js/frontend.js" type="text/javascript"></script>'.LF;

ADD THIS LINE AFTER IT:

Code: Select all

$content['page_start'] .= '  <script src="'.TEMPLATE_PATH.'inc_js/lightbox.js" type="text/javascript"></script>'.LF;

[sustia]

Hi DeXXus, thank for your answer, but seems that it doesn't work

[DeXXus]

How about "index.php" ? Place your "lightbox.js" file into the "/phpwcms_template/inc_js/" directory.

THEN FIND THIS LINE:

Code: Select all

$content['page_start'] .= '  <script src="'.TEMPLATE_PATH.'inc_js/frontend.js" type="text/javascript"></script>'.LF;

ADD THIS LINE AFTER IT:

Code: Select all

$content['page_start'] .= '  <script src="'.TEMPLATE_PATH.'inc_js/lightbox.js" type="text/javascript"></script>'.LF;

UPDATE: Corrected path (now in red) for where to copy your javascript file
SORRY

[sustia]

Hi DeXXus, thanks for your reply, now I have this:

Code: Select all

/*Lightbox*/
$content['page_start'] .= '  <script src="'.TEMPLATE_PATH.'phpwcms_template/inc_js/lightbox/js/lightbox.js" type="text/javascript"></script>'.LF;
$content['page_start'] .= '  <script src="'.TEMPLATE_PATH.'phpwcms_template/inc_js/lightbox/js/prototype.js" type="text/javascript"></script>'.LF;
$content['page_start'] .= '  <script src="'.TEMPLATE_PATH.'phpwcms_template/inc_js/lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>'.LF;

but doesn't work.

Maybe because we need this in the image link?

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

[DeXXus]

Hi DeXXus, thanks for your reply, now I have this:
*SNIP*
but doesn't work.

Well, of course, those lines only make the libraries *available*. You wanted to know *where* to place them, so your would not have to keep entering them into each template

Maybe because we need this in the image link?

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Well, I thought you had more of an idea about where you were going with implementing this!

I'm no fan of MODS and "hacks", because it is too hard to keep them intact from version to version, etc., but I ~suspect~ you might understand more if you studied:

FIRST the file "/include/inc_front/content/cnt2.article.inc.php" where the images are "handled" using the function named imagelisttable
AND if you studied the file "/include/inc_front/front.func.inc.php" where THAT function helps to build the gallery by setting up for thumbs, zooming, captions, etc.
(the // Comments) should be helpful.

Sorry if you thought I was gonna "whip up" the solution!

[sustia]

Hi DeXXus

Well, I thought you had more of an idea about where you were going with implementing this!

I'm no fan of MODS and "hacks", because it is too hard to keep them intact from version to version, etc., but I ~suspect~ you might understand more if you studied:

FIRST the file "/include/inc_front/content/cnt2.article.inc.php" where the images are "handled" using the function named imagelisttable
AND if you studied the file "/include/inc_front/front.func.inc.php" where THAT function helps to build the gallery by setting up for thumbs, zooming, captions, etc.
(the // Comments) should be helpful.

Sorry if you thought I was gonna "whip up" the solution!

Well, I've tried to modify these files, but I'm not able to obtain the lightbox.
Anyway, I thought about having to modify only a file, but I see that's a quite more complicated, then I am thinking about leaving everything as it is

[munzli]

ok i did a quick include of lightbox with the "images" content type. what you need to do is edit the front.func.inc.php and add the js libraries to your site.

start off with the libraries, i copied the javascript files into "include/inc_js/effects/" and the css into "include/inc_css/"

then copy the lightbox images into the img folder. i put them into /img/lightbox

you need to edit lightbox.css so the background images have the correct path... it's around line 45 to 55, that part looks like this:

Code: Select all

#prevLink, #nextLink{

	width: 49%;

	height: 100%;

	background: transparent url(img/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */

	display: block;

	}

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(img/lightbox/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(img/lightbox/nextlabel.gif) right 15% no-repeat; }

now edit the lightbox.js file to have the correct loading and close images, this is at line 62 and 63 and looks like this in my setup:

Code: Select all

var fileLoadingImage = "img/lightbox/loading.gif";		

var fileBottomNavCloseImage = "img/lightbox/closelabel.gif";

ok now you are ready to get the libraries loaded into the page. the easiest way is to edit your template in the phpwcms backend... my "html head" part includes this:

Code: Select all

<script type="text/javascript" src="include/inc_js/effects/prototype.js"></script>
<script type="text/javascript" src="include/inc_js/effects/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="include/inc_js/effects/lightbox.js"></script>
<link rel="stylesheet" href="include/inc_css/lightbox.css" type="text/css" media="screen" />

ok now you are ready to let phpwcms show the "images" content part with lightbox. for this edit the front.func.inc.php

somewhere around line 420 the link to the images are made when calling the imagelisttable function, look for:

Code: Select all

			if($imagelist['zoom'] && isset($zoominfo) && $zoominfo != false) {

				// if click enlarge the image

				$open_popup_link = 'image_zoom.php?'.getClickZoomImageParameter($zoominfo[0].'?'.$zoominfo[3]);

				if($caption[2][0]) {

					$open_link = $caption[2][0];

					$return_false = '';

				} else {

					$open_link = $open_popup_link;

					$return_false = 'return false;';

				}

				$table .= "<a href=\"".$open_link."\" onclick=\"checkClickZoom();clickZoom('".$open_popup_link."','previewpic','width=";

				$table .= $zoominfo[1].",height=".$zoominfo[2]."');".$return_false.'"'.$caption[2][1].'>';

				$table .= $list_img_temp."</a>";

			} else {

				// if not click enlarge

				if($caption[2][0]) {

					$table .= '<a href="'.$caption[2][0].'"'.$caption[2][1].'>'.$list_img_temp.'</a>';

				} else {

					$table .= $list_img_temp;

				}

			}

and replace with:

Code: Select all

			if($imagelist['zoom'] && isset($zoominfo) && $zoominfo != false) {

				// if click enlarge the image

				
				$open_popup_link = 'image_zoom.php?'.getClickZoomImageParameter($zoominfo[0].'?'.$zoominfo[3]);
				$lightbox_link = "content/images/".$zoominfo[0];

				
				if($caption[2][0]) {

					$open_link = $caption[2][0];

					$return_false = '';

				} else {

					$open_link = $open_popup_link;

					$return_false = 'return false;';

				}

				//$table .= "<a href=\"".$open_link."\" onclick=\"checkClickZoom();clickZoom('".$open_popup_link."','previewpic','width=";

				//$table .= $zoominfo[1].",height=".$zoominfo[2]."');".$return_false.'"'.$caption[2][1].'>';
				$table .= "<a href=\"{$lightbox_link}\" rel=\"lightbox\" title=\"{$caption[0]}\" target=\"_blank\">";

				$table .= $list_img_temp."</a>";

			} else {

				// if not click enlarge

				if($caption[2][0]) {

					$table .= '<a href="'.$caption[2][0].'"'.$caption[2][1].'>'.$list_img_temp.'</a>';

				} else {

					$table .= $list_img_temp;

				}

			}

as you see i left everything in there and added a normal link to the image called $lightbox_link, took out the image_zoom popup link and added a standard link to the image with rel="lightbox" and the caption as title.

if all goes well you are ready to go

this has been a quick test with version 1.2.8, it's not very nice, for instance the content_path is hardcoded see:

Code: Select all

$lightbox_link = "content/images/".$zoominfo[0];

i would like to get the groups of images to show a previos and next button (with rel="lightbox[articleID]") as soon as i have time...

i'll keep you updated

[sustia]

munzli thanks, it works!!

The only doubt is this: when I click the thumbnail to enlarge the image, the same is showed like a thumbnail, not with the proper with and height like in the normal pop-up, but seems that is a problem with the normal pop-up too...maybe is something wrong with my local installation, I will make a try with a fres installation as soon as possible.

Anyway thanks.

[munzli]

good to hear

i don't quite understand what you mean with the thumbnail... you see the thumbnail on the site and in the lightbox div?

do have a link to the site?

[sustia]

i don't quite understand what you mean with the thumbnail... you see the thumbnail on the site and in the lightbox div?

Yes, the image in the lightbox, as in the "normal" popup, appear not with the normal width and height, but like a thumbnail, but now it's solved, with a "real site" installation.

do have a link to the site?

Yes, not a real site, but a trial for a new site
http://sustia.netsons.org/wcms/index.php?lightbox

The only thing that seems doesn't work are the "next" and "prev", that doesn't appear in the lightbox.
The images that you see are inserted via "images" content part.

[munzli]

The only thing that seems doesn't work are the "next" and "prev", that doesn't appear in the lightbox.
The images that you see are inserted via "images" content part.

that's what i mentioned in my other post

i would like to get the groups of images to show a previos and next button (with rel="lightbox[articleID]") as soon as i have time...

i'll update this thread as soon as i've done that...

nice site by the way...

[sustia]

that's what i mentioned in my other post

i'll update this thread as soon as i've done that...

Oops, sorry, I've missed it

nice site by the way...

Thanks

[munzli]

the easiest way to get all the images of an article in one group with previous and next buttons is to replace:

Code: Select all

$table .= "<a href=\"{$lightbox_link}\" rel=\"lightbox\" title=\"{$caption[0]}\" target=\"_blank\">";

with:

Code: Select all

$table .= "<a href=\"{$lightbox_link}\" rel=\"lightbox[{$GLOBALS['content']['article_id']}]\" title=\"{$caption[0]}\" target=\"_blank\">";

and make sure the location of the previos and next images are correct in lightbox.css -> in my code above the location was wrong and i had to use absolute paths: url(/phpwcms/img/lightbox/blank.gif) instead of url(img/lightbox/blank.gif) since my phpwcms test system is located in "http://localhost/phpwcms"


@oliver: is there a global or other variable where i can get the acontent_id?? thanks for the great work!

[sustia]

the easiest way to get all the images of an article in one group with previous and next buttons is to replace (...)

Yes, it works fine