Lightbox in cataloger item template

[sirphuzz]

What do I need to change/add in the Item-CSS-based template to make the big image be clickable, and when clicked, display the original full-sized image in a lightbox?

I've tried searching the forum, can't find anything that helped.

[christiaans]

That would be extremely easy to achieve.

As I am not near to my design, I couldn't tell you right away (since I don't know it all by head), but when I get home from work I will post it up, it's very easy.

[JeremyBASS]

You may just look at the album template...

[Dr.CSS]

As long as you have the JS in the and the CSS attached to template, you just add rel="lightbox" to the link...

You can also use the lightbox tag, in forge, put it in pluggins folder, read it's Help...

EDIT: The rel="lightbox[nextpart]" nextpart is to string a few images together to make a continuous gallery with the next image link in the lightbox...

[sirphuzz]

oh thanks! I didn't know there was a lightbox tag. I also thought that the "rel=lightbox" had to be "rel=lightbox[image source]" but I may very well be wrong on that!

I tried using the code from the album template but couldn't make it work!

If I want the lightbox image to be the original full-sized uploaded image, is the correct variable $src_image_1_url ? I could never make that work.

Thanks for your replies!

[sirphuzz]

I made the lightbox work by using an onclick event that changes the attributes "href" and "rel". Anyways it worked and if anyone wants me to I can post the whole code.

Just one more thing, I tried using both $src_image_1_url and $image_1_url (which is the default one) but I get the same size in the lightboxed image! Why is this? The original uploaded image is way bigger than the downscaled one.

Reading the Cataloger help it states that "When you upload images, the original is stored. When someone visits a page, the reduced size images are requested using a special URL, which will redirect the user's browser to the scaled image if it exists, and creating the scaled image if it doesn't."

I just took for granted that the $src_image ... variable was the one referring to the original image but isn't it? What variable am I supposed to use?

I get if I'm supposed to post this as a separate thread, and I can do that, and put this one as solved.

[Coldman]

I made the lightbox work by using an onclick event that changes the attributes "href" and "rel". Anyways it worked and if anyone wants me to I can post the whole code.

Please can you post your code?

[Dee]

With the Lightbox module you can simply use a tag like:

Code: Select all

{LightBox image="$image" thumb="$thumb"}

Regards,
D

[Coldman]

What I really want is to use Lightbox after I replaced first image ({$image_1_url}) with the javascript function.

Code: Select all

<div class="item_images">
<img name="item_image" id="item_image" src="{$image_1_url}" alt="{$title}" title="{$title}" />

<div class="item_thumbnails">
{section name=ind loop=$image_url_array}
<a href="javascript:repl('{$image_url_array[ind]}')"><img src="{$image_thumb_url_array[ind]}" title="{$title}" alt="{$title}" /></a>
{/section}
</div></div>

{literal}
<__script__ type="text/javascript">
function repl(img)
   {
   document.item_image.src=img;
   }
</__script>
{/literal}
</div>

I know that have to add something like this

Code: Select all

<a href="right url for the new image" rel="lightbox"><img name="item_image" id="item_image" src="{$image_1_url}" alt="{$title}" title="{$title}" />

but how can I get the "right url for new image"? Is this possible to do?

[sirphuzz]

I made the lightbox work by using an onclick event that changes the attributes "href" and "rel". Anyways it worked and if anyone wants me to I can post the whole code.

Please can you post your code?

Here it is:

Code: Select all

<a href="{$onepicture->link}"  title="{$onepicture->name|escape:'html'} | {$picture->comment|escape:'html'}" 

onclick="document.getElementById('maincmotionpic').setAttribute('src', '{$onepicture->picture}');document.getElementById('amaincmotionpic').setAttribute('href', '{$onepicture->picture}');document.getElementById('amaincmotionpic').setAttribute('rel', 'lightbox[{$onepicture->name|escape:'html'}]');return false;">

<img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'}"/></a>

Note that this code is from my modified carousel album template, so you might need to modify it to make it work on your site, But the onClick event is there for you to see.

Good luck!