[Solved] newbie - individual image/lightbox help

[thingzzz]

Hi There,

I am in the process of learning how to use this really simple CMS , so please excuse my ignorance.

I have to say the forum  and its members are very helpful. Thank you.

I am developing a simple site for a client. I want to provide the client with the facility to be able to add a page, add an image to the page using the tinyMCE Editor. I would like the image to have the lightbox effect.

i'm very confused as to how and what i should do to enable the lightbox effect for individually inserted images?

Any help would be much appreciated.

Thank you

Vinay

Update: How would an onclick event to the content img of a page using literal ? If i can understand that, i maybe able to insert a lightbox script onto the page.

[Gillian.Hesse]

How about creating an individual album for each image with the lightbox template assigned, then inserting an album tag where you want the image displayed.

For instance, say you create a new album with the one image and it has an id of 5 then you just add the following into the content area.

{cms_module module='album' albums='5'}


A single thumbnail of the image appears, and when you click on it you get the image displayed with the lightbox effect.  Because there are no other images in the album you don't get any navigation stuff appearing other than the close button. 

Was that the sort of thing you were after?

The one problem with the above is that it displays the picture name and some instruction text.  To get rid of the instruction text just add the following into your stylesheet.

Code: Select all

 .instructiontext{
display:none;
}

To remove the title you need to make a simple mod to the lightbox template.  Find the picture list section and add a div statement around the first paragraphs that contains the {$album->name} and {$album->comment} tags.  It will look like

Code: Select all

<div class="picturedetails">
<p><strong>{$album->name}</strong><br />
{$album->comment}<br />
</div>

And then add the following to your style sheet

Code: Select all

.picturedetails{
display:none;
}

I tried this out and it seems to work.

Gill

[thingzzz]

Hi Gillian,

Thanks for the response. Appreciate it.

Yeah, I was thinking that could be a workaround. My only concern is because I'm not the editor of the page, I will have to "teach" the editor ( who is zero on computers) to create an album, insert a picture in it and add the album to the content.

That's the way you would do it right?

My line of thinking was
-> If i could attach a "onclick" event to the img in the {content} within the template itself, then i could include a js script in the template code which would show the images?

Eg:

In the template page, put something like

{content img {literal} onclick = "lightbox.js" {/literal}

and then when they attach any images to the content section through the page editor, the img onclick fires automatically.

is it possible?

Thanks for looking

Vinay

[Dr.CSS]

If you have all the JS calls in the head any image link that has rel="lightbox" will use it to be displayed, singe images or multiple...

In the album template for light box...

picture}" rel="lightbox[{$album->name}]"  the album name part is for clicking to the next image without having to close the popup...

[calguy1000]

yeah, if the js is included in the page template, a simple gcb (or at the most a really dumb UDT) could be written to output an image..... or probably in about 5 lines, the image tag could be adjusted, so you could do

{img src='whatever.jpg' rel='lightbox'}

[thingzzz]

Great,

I just learnt something new about the Album Module. Thank you Mark and Calguy

I'm the wanna be designer right. and the person who will be editing the page has no idea of relationships to images or whatsoever.

I want them to be able to open a page, insert an random image ( not album ) using the TinyMCE editor and save the work. Thats it. do nothing more.

Then I want to be able to put the code for the "rel ="lightbox"" for the images in the page, in the templates code for the page.

I feel a bit numb skulled at the moment, but i hope i'm making myself clear.

PS: I donot want to use the album because

1. The editor has to  create an new album, attach the image to a album and then include the album in the page. I am not very confident the editor has the skills to do that correctly. Hence I am trying to include all these steps in the template code.

Thank you

Vinay 

Update:  How could I adjust the image tag of the {content } section in the page template so that it has a rel  = lightbox ??

[thingzzz]

Hi there,

I have looking UDT and I came across a UDT for  "Simple, accessible Wikipedia-style external links"

In MY Case, I need a UDT which would take the img tag and add a rel="lightbox" to it

Can you tell me how to write this UDT? Help!!!

Thank you
Vinay

[kermit]

"LIGHTBOX" doesn't use 'onclick'.. are you using the 'real deal' or something similar?

http://www.huddletogether.com/projects/lightbox2/

here's a UDT i call simply: i

Code: Select all

# i, a udt for cmsms 1.2 (v3)
# functionality similar to built-in image tag
# see comments for parameters
# by kermit 27 nov 2007;
# released under general public license v2

global $gCms;

if(isset($params['src'])) $imageSource = $params['src']; // image filename and path relative to uploads/images (no initial / if in a subdirectory)
if(isset($params['width'])) $imageWidth = $params['width']; // override actual image width
if(isset($params['height'])) $imageHeight = $params['height']; // override actual image height
if(isset($params['alt'])) $imageAlt = $params['alt']; // alt attribute for img tag, defaults to filename, use 'emptyalt' to leave empty or 'noalt' to omit from output
if(isset($params['class'])) $imageClass = $params['class']; // css class for img tag
if(isset($params['id'])) $imageId = $params['id']; // css id for img tag
if(isset($params['title'])) $imageTitle = $params['title']; // title attribute for img tag, 
if(isset($params['link'])) $imageLink = $params['link']; // set to '1' to generate a link, defaults to same file. not required if either lightbox, linkstrip or linkpic is set
if(isset($params['lightbox'])) $linkLightbox = $params['lightbox']; // set to '1' to enable lightbox on link, set to 'galleryname' to enable gallery mode; requires lightbox scripts-css in page meta or template head. see http://www.huddletogether.com/projects/lightbox2/ for instructions and files; implies link should be made (no need to set link='1')
if(isset($params['linktitle'])) $linkTitle = $params['linktitle']; // title attribute for link
if(isset($params['linkclass'])) $linkClass = $params['linkclass']; // css class for link
if(isset($params['linkid'])) $linkId = $params['linkid']; // css id for link
if(isset($params['linktarget'])) $linkTarget = $params['linktarget']; // target attribute for link
if(isset($params['linkstrip'])) $linkStrip = $params['linkstrip']; // strip ALL instances of this string from src for link href (linkstrip='_thumb' will link to 'picture.jpg' if src='picture_thumb.jpg'); implies a link should be made (no need to set link='1')
if(isset($params['linkpic'])) $linkPic = $params['linkpic']; // link to this image; overrides linkstrip and implies a link should be made (no need to link='1')

$imagetag = '';
$linktag = '';
$output = '';
$imageBaseurl = $gCms->config['image_uploads_url'] . '/';
$imageBasepath = $gCms->config['image_uploads_path'] . '/';

if (empty($imageSource)) return '<!-- image tag error: src not defined -->';

$size = @getimagesize($imageBasepath . $imageSource);
if ($size === false) return '<!-- image tag error: src not found -->';

if(!isset($imageWidth) && $size[0]) $imageWidth = $size[0];
if(!isset($imageHeight) && $size[1]) $imageHeight = $size[1];
if(!isset($imageAlt)) $imageAlt = 'Image: ' . $imageSource;

$imagetag = '<img';
	if(isset($imageTitle)) $imagetag .= ' title="' . $imageTitle . '"';
	if($imageAlt != 'noalt')
	{
		if($imageAlt == 'emptyalt') $imageAlt = '';
		$imagetag .= ' alt="' . $imageAlt . '"';
	}
	if(isset($imageWidth)) $imagetag .= ' width="' . $imageWidth . '"';
	if(isset($imageHeight)) $imagetag .= ' height="' . $imageHeight . '"';
	if(isset($imageClass)) $imagetag .= ' class="' . $imageClass . '"';
	if(isset($imageId)) $imagetag .= ' id="' . $imageId . '"';
	$imagetag .= ' src="' . $imageBaseurl . $imageSource . '"';
$imagetag .= ' />';

if (!isset($imageLink) && !isset($imageLightbox) && !isset($linkPic) && !isset($linkStrip)) return $imagetag;

$linktag = '<a';
	if(isset($linkTitle)) $linktag .= ' title="' . $linkTitle . '"';
	if(isset($linkClass)) $linktag .= ' class="' . $linkClass . '"';
	if(isset($linkId)) $linktag .= ' id="' . $linkId . '"';
	if(isset($linkTarget)) $linktag .= ' target"' . $linkTarget . '"';
	if(isset($linkLightbox)) 
	{
		$linktag .= ' rel="lightbox';
		if($linkLightbox != '1') $linktag .= '[' . $linkLightbox . ']';
		$linktag .= '"';		
	}
	$linktag .= ' href="' . $imageBaseurl;
	if(isset($linkPic))
	{
		$linktag .= $linkPic;
	}elseif (isset($linkStrip))
		{
			$linktag .= str_replace($linkStrip,'',$imageSource);
	}else{
			$linktag .= $imageSource;
	}
	$linktag .= '">';

$output = $linktag . $imagetag . '</a>';
return $output;

it's basically a rewritten {image} tag, with a few enhancements... a couple examples:

{i src='mylittlepicture.jpg' linkpic='mybigpicture.jpg' lightbox='1'}
basic syntax to show 'mylittlepicture.jpg and create a lightbox enabled link to 'mybigpicture.jpg'

{i src='picture_thumb.jpg' linkstrip='_thumb' lightbox='1'}
is the basic syntax required to show picture_thumb.jpg, and create a lightbox-enabled link to picture.jpg

if you omit linkstrip and linkpic then the link will be to the src image (with link='1')

{i src='mypic.jpg'}
is the bare minimum to display an image.

note: this isn't thoroughly tested.. but it 'works for me'.

edit: slightly modified from initial posting...

[thingzzz]

Thank you Kermit for  your time and the UDT.

I'm getting closer to my goal.

In your UDT, you pass the src image as a parameter.

In MY Case, I want to be able to pass the content as param to the UDT.

Why because i don't know what the image is called ( the editor attaches it in the page section ).

When the page is rendered, UDT should go through the ""  tags and replace them with "<a rel=lightbox" . So that way every image that is in the content section gets a relation to the ligthbox.

Am I thinking right?

what would be the code to do that?

PS: Please don't pull your hair out, I am still learning. Thank you for looking

Vinay

[kermit]

here's a basic smarty modifier... instructions in the comments.

use at your own risk, ymmv, yada yada yada...

Code: Select all

<?php
# smarty modifier to add lightbox triggers automatically
# made for cms made simple 1.2 by kermit
# drop this file in ./lib/smarty/plugins as modifier.addlightbox.php
# usage: {content|addlightbox}
# dont want this on all pages? duplicate your template and use {content} on one and {content|addlightbox} on the other
# if you dont want gallery mode enabled, remove [page] (including the brackets) from the middle line ($replacement)


function smarty_modifier_addlightbox($string)
{
	$pattern = '/<a(.*?)href="(.*?).(bmp|gif|jpeg|jpg|png|BMP|GIF|JPEG|JPG|PNG)"(.*?)>/i';
  	$replacement = '<a$1rel="lightbox[page]" href="$2.$3"$4>';
	$result = preg_replace($pattern, $replacement, $string);
	
	return $result;

}

?>

i gots me a regex-induced headache now..

[thingzzz]

Thank you Kermit for all the Trouble,

I used your help to create the smarty and it works fine for now, i Think

For everyone else out there,

Here is the modified smarty code.

Code: Select all

<?php
# smarty modifier to add lightbox triggers automatically
# made for cms made simple 1.2 by kermit
# drop this file in ./lib/smarty/plugins as modifier.addlightbox.php
# usage: {content|addlightbox}
# dont want this on all pages? duplicate your template and use {content} on one and {content|addlightbox} on the other
# if you dont want gallery mode enabled, remove [page] (including the brackets) from the middle line ($replacement)


function smarty_modifier_addlightbox($string)
{
	$pattern = '/<img(.*?)src="(.*?).(bmp|gif|jpeg|jpg|png|BMP|GIF|JPEG|JPG|PNG)"(.*?)>/i';
  	$replacement = '<a$1rel="lightbox" href="$2.$3"> <img$1src="$2.$3"$4"</a>';
  	$result = preg_replace($pattern, $replacement, $string);

	return $result;

}

?>

[CMSMS-Fan]

I have implement this solution to create automatic lightbox link for all images in Content and it works a treat in Firefox 3 but in IE 5.5, 6 and 7 it turns the whole page of text into links for the images?

Strange.....

I have left a page with it on for you to see.... HERE

Try it in Firefox then IE and you will see the difference.

--------------------------------------------------------------------------------------

The server is Apache running on Linux CMSMS Ver 1.4.1  Lightbox 1.1 and CGExtensions 1.9

modifier.addlightbox.php exactly as below.

Code: Select all

<?php
# smarty modifier to add lightbox triggers automatically
# made for cms made simple 1.2 by kermit
# drop this file in ./lib/smarty/plugins as modifier.addlightbox.php
# usage: {content|addlightbox}
# dont want this on all pages? duplicate your template and use {content} on one and {content|addlightbox} on the other
# if you dont want gallery mode enabled, remove [page] (including the brackets) from the middle line ($replacement)


function smarty_modifier_addlightbox($string)
{
	$pattern = '/<img(.*?)src="(.*?).(bmp|gif|jpeg|jpg|png|BMP|GIF|JPEG|JPG|PNG)"(.*?)>/i';
  	$replacement = '<a$1rel="lightbox" href="$2.$3"> <img$1src="$2.$3"$4"</a>';
  	$result = preg_replace($pattern, $replacement, $string);

	return $result;

}

?>

[igel]

missing '>' for end of tag

Fixing this  should solve the problem.

Inge

[CMSMS-Fan]

Thanks igel,
It works a treat now.  For the benefits of others here is the corrected code in full:-

Code: Select all

<?php
# smarty modifier to add lightbox triggers automatically
# made for cms made simple 1.2 by kermit But works in 1.4.1 thanks to igel
# drop this file in ./lib/smarty/plugins as modifier.addlightbox.php
# usage: {content|addlightbox}  In place of {content} in your template
# dont want this on all pages? duplicate your template and use {content} on one and {content|addlightbox} on the other
# if you dont want gallery mode enabled, remove [page] (including the brackets) from the middle line ($replacement)


function smarty_modifier_addlightbox($string)
{
	$pattern = '/<img(.*?)src="(.*?).(bmp|gif|jpeg|jpg|png|BMP|GIF|JPEG|JPG|PNG)"(.*?)>/i';
  	$replacement = '<a$1rel="lightbox" href="$2.$3"> <img$1src="$2.$3"$4"></a>';
  	$result = preg_replace($pattern, $replacement, $string);

	return $result;

}

?>