Page 1 of 1
Lightbox in cataloger item template
Posted: Tue Aug 19, 2008 2:09 pm
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.
Re: Lightbox in cataloger item template
Posted: Tue Aug 19, 2008 2:38 pm
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.
Re: Lightbox in cataloger item template
Posted: Tue Aug 19, 2008 8:45 pm
by JeremyBASS
You may just look at the album template...
Re: Lightbox in cataloger item template
Posted: Wed Aug 20, 2008 1:54 am
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...
Re: Lightbox in cataloger item template
Posted: Wed Aug 20, 2008 6:36 pm
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!
Re: Lightbox in cataloger item template
Posted: Wed Aug 20, 2008 8:03 pm
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.
Re: Lightbox in cataloger item template
Posted: Sat Oct 18, 2008 8:17 am
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?
Re: Lightbox in cataloger item template
Posted: Sat Oct 18, 2008 8:39 am
by Dee
With the
Lightbox module you can simply use a tag like:
Code: Select all
{LightBox image="$image" thumb="$thumb"}
Regards,
D
Re: Lightbox in cataloger item template
Posted: Sat Oct 18, 2008 9:08 am
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?
Re: Lightbox in cataloger item template
Posted: Sat Nov 22, 2008 3:50 pm
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!