Lightbox in cataloger item template

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Post Reply
sirphuzz
Forum Members
Forum Members
Posts: 18
Joined: Thu Aug 07, 2008 1:07 pm

Lightbox in cataloger item template

Post by 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
Power Poster
Power Poster
Posts: 300
Joined: Tue Mar 04, 2008 10:37 am

Re: Lightbox in cataloger item template

Post by 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

Re: Lightbox in cataloger item template

Post by JeremyBASS »

You may just look at the album template... :)
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Lightbox in cataloger item template

Post by 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...
Last edited by Anonymous on Tue Oct 21, 2008 4:51 am, edited 1 time in total.
sirphuzz
Forum Members
Forum Members
Posts: 18
Joined: Thu Aug 07, 2008 1:07 pm

Re: Lightbox in cataloger item template

Post by 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
Forum Members
Forum Members
Posts: 18
Joined: Thu Aug 07, 2008 1:07 pm

Re: Lightbox in cataloger item template

Post by 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
Power Poster
Power Poster
Posts: 318
Joined: Sun Jun 22, 2008 5:33 am

Re: Lightbox in cataloger item template

Post by Coldman »

sirphuzz wrote: 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?
Important Code of Conduct
Why don't use CMSMS Docs or search?
Do you read Help?
Admin for Swedish Translations Team
Moderator Swedish Forum
After your problem is solved, push the green button
Dee
Power Poster
Power Poster
Posts: 1197
Joined: Sun Mar 19, 2006 8:46 pm

Re: Lightbox in cataloger item template

Post by Dee »

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

Code: Select all

{LightBox image="$image" thumb="$thumb"}
Regards,
D
Coldman
Power Poster
Power Poster
Posts: 318
Joined: Sun Jun 22, 2008 5:33 am

Re: Lightbox in cataloger item template

Post by 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?
Last edited by Coldman on Sat Oct 18, 2008 9:13 am, edited 1 time in total.
Important Code of Conduct
Why don't use CMSMS Docs or search?
Do you read Help?
Admin for Swedish Translations Team
Moderator Swedish Forum
After your problem is solved, push the green button
sirphuzz
Forum Members
Forum Members
Posts: 18
Joined: Thu Aug 07, 2008 1:07 pm

Re: Lightbox in cataloger item template

Post by sirphuzz »

Coldman wrote:
sirphuzz wrote: 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!
Last edited by sirphuzz on Sat Nov 22, 2008 3:52 pm, edited 1 time in total.
Post Reply

Return to “Modules/Add-Ons”