[SOLVED] Cataloger & Lightbox - how to group item images

[darconny]

Hi,

First I have to say that cmsms is absolutely great, and after first basic site now I moved up to the next level 

So, currently I work on customizing Cataloger module for displaying different types of outdoor media in different cities..
I installed v1.4.1 multilanguage and Cataloger 0.7, local on my machine at the moment.
Everything works nice, also cataloger mle thanks to Alby and Hematec patch

My setup for cataloger is something like this. Instead of showing item pages (I don't want that), I just have category page with items listing - thumbnail, name and description (these are item attributes). When someone clicks on item thumbnail or name on the category page, lightbox opens and shows item image.

Here is category template I use for this (styled with css):
-------------------------------------------------------------------------------------

   {if $hasnav == 1}
  {$prev}{$navstr}{$next}
   {/if}
    {section name=numloop loop=$items}
   
   
   
   

{$items[numloop].title}


{$items[numloop].description}


    {/section}

    {if $hasnav == 1}
{$prev}{$navstr}{$next}
{/if}

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

So, this approach works fine with one image per item. But, I don't know how to adopt lightbox module to group images related to one item. I've searched the forum and help, I see that there are some options with square brackets in rel="lightbox[..]" or "name" attribute. But I just don't know what is the right syntax here.
Basically, when editor uploads items images, all files are in the same folder (for all items). The names are like this, for src folder:

firstitem_src_1, firstitem_src_2, firstitem_src_3 ...
seconditem_src_1, seconditem_src_2, seconditem_src_3 ...

So, when someone clicks on a thumbnail image on category page, lightbox should open only images related to that item (with prev and next buttons), not all. Is it possible and how?

Thank you very much,
Darko

[darconny]

Anyone knows how to solve this Lightbox grouping issue?

Let me know if my explanation is not clear enough...

Thanks,
Darko

[Dr.CSS]

To get lightbox image groups you need rel="something" the 'something' needs to be unique to the group, so any images with the same rel= will show next/prev....

[klenkes]

Because I did the same thing recently, I can shed light onto the matter.

The correct code looks like this: rel="lightbox[groupme]"

The [groupme] is the answer to grouping images.

[darconny]

Thanks mark and klenkes, but I still can't figure out what to put in brackets so when clicking on thumbnail lightbox opens group of item images. Maybe the problem is related to my customization of Cataloger module, please take a look at this part:



Here I have one item thumbnail (one link) per item, take a look at the screenshot, category page:
http://darconny.msmqtools.com/lightbox.jpg

Every row is related to different item page, so if I put something like this
rel="lightbox[image_src]"
lightbox opens just first images related to different items (wrong).

So, when I upload images through item pages, I get this in src folder - this is how I want images grouped:

location1_src_1
location1_src_2
location1_src_3 ...

location2_src_1
location2_src_2 ...


Whatever I put into the square brackets, lightbox groups images like this:

location1_src_1
location2_src_1

Any thoughts?

Thank you
Darko

[klenkes]

Every row is related to different item page, so if I put something like this
rel="lightbox[image_src]"
lightbox opens just first images related to different items (wrong).

If I understand your explanation correctly you want to show the category overview(like in your screenshot) and a click on the thumbail is supposed to show ALL images related to THE item?

If so... you have to find a way to load ALL images(and group them) but only show the FIRST and hide all the others of the item. Then the same with the next item... But unfortunately I don't know how this could be accomplished.

...I'm still not sure if I understood you correctly. Sorry.

[darconny]

Thank you klenkes, you understood me absolutely right. This type of customization is very logical to me, as I have category view (with items data) and as you said, a click has to show all images related to the item (with lightbox). 

I found this thread http://forum.cmsmadesimple.org/index.php/topic,26789.0.html where Coldman wrote a patch for cataloger.module.php. With this patch I can call different images related to the item  - {$items[numloop].image_src_1} etc but still don't know how to group and show images related to THE item.

Any hints?

[klenkes]

Ahh... I see!
I took a brief look at the snippets of coldman and without trying it I think this could work for you.
Of course you still need a unique identifier for the lighbox[GROUP]. You could use the title?!

Try this:

Code: Select all

<a href="{$items[numloop].image_src}" rel="lightbox[{$items[numloop].title}]"><img src="{$items[numloop].image}" title=" {$items[numloop].title}"  alt="{$items[numloop].title}"/></a>

If your {$items[numloop].title} is not too complicated(special characters...) it could work for lightbox. Unfortunately right now I don't have the time to try this out but I most certainly will do it, because I need this functionality in a project too.

...could work... please let me know if it did.

[darconny]

I really appreciate your effort to find a solution, thanks klenkes.

Now I am trying what you suggested, but I am not sure if I should implement coldman patch or not?
If I put his code mofication into cataloger.module.php, I got nothing with call $items[numloop].image_src. Obviously, when patch is applied I have to use syntax like this: image_src_1 (2, 3 etc).

Also, when I put in rel="lightbox[{$items[numloop].title}]" I get only first image, as if there is no group at all.

Maybe I misunderstood you, so please comment.

[klenkes]

...start specualation mode...
Is your template declared as a Category Page?
Perhaps if you declare it as an Items Page you may have access to more variables and the other thumbnails as well?
...end speculations...

Otherwise you would have to call your thumbnails one by one(like you already said) or loop through the array... if it works at all. I suppose my knowledge is also very limited in this matter.

Sorry.

[JeremyBASS]

For what it's worth... rel="lightbox", na, using rel, many times leads to non-validating code...
these:
http://www.hellscanyonsportfishing.com/news/14/76/11-21-08/ (the trip album)
and
https://www.sjrmc.org/ (the trukey drawing contest based on the find-a-doc Category posts on here**the float issue**)
both sport a grouping lightbox with a very flexible jQuery framework that has two different seeming functions but both running out of albums and both are grouping and image specific...

Google up- on js frame works and the other cat posts here... there are a lot of options, thou I'm a jQuery fan, that don't break validation and is truly cross platform.. Hope this helps..

jeremyBass

[darconny]

Hey, I almost did it! 

Thanks to klenkes, the tip with using 'title' for grouping images works. So, with coldman patch applied, this is how I forced lightbox to open grouped item images (2 images per item):





As you can see, I added second link, the only issue left to solve is how to determine if the second image is uploaded or not. Now this works fine for both images uploaded, but if there is only one image, I get lightbox showing there is 2 images and second is just empty image. Obviously, I have to put second link to an {if} statement, but don't know how.

The page validates, so this is ok.

Also thanks to JeremyBass, I found this thread:
http://forum.cmsmadesimple.org/index.php/topic,23320.15.html
where I see this kind of statement:
{if file_exists($image)}...

How can I use this in my particular situation? Or something similar...

@klenkes - I think if I declare this page as an Item page, it would not be possible to have category overview of all items on a page.

@Jeremy - I know there are some better js solutions round there, but I am not familiar with any of those and at this point I try to fix this and go with lightbox. I have to make this site live for a couple of days, but surely I'll try jQuery as it seems like a great tool.

Thanks a lot
Darko

[darconny]

Hey, I almost did it! 

Thanks to klenkes, the tip with using 'title' for grouping images works. So, with coldman patch applied, this is how I forced lightbox to open grouped item images (2 images per item):





As you can see, I added second link, the only issue left to solve is how to determine if the second image is uploaded or not. Now this works fine for both images uploaded, but if there is only one image, I get lightbox showing there is 2 images and second is just empty image. Obviously, I have to put second link to an {if} statement, but don't know how.

The page validates, so this is ok.

Also thanks to JeremyBass, I found this thread:
http://forum.cmsmadesimple.org/index.php/topic,23320.15.html
where I see this kind of statement:
{if file_exists($image)}...

How can I use this in my particular situation? Or something similar...

@klenkes - I think if I declare this page as an Item page, it would not be possible to have category overview of all items on a page.

@Jeremy - I know there are some better js solutions round there, but I am not familiar with any of those and at this point I try to fix this and go with lightbox. I have to make this site live for a couple of days, but surely I'll try jQuery as it seems like a great tool.

Thanks a lot
Darko

[JeremyBASS]

well... one way you could use it is to have continuous gallery.. really it'd depend on your full set up... ie if you have the noimage image... then this would work to force the continuous gallery... skipping the noimage... or use it to show a tooltip on the lightbox... so you could use smaller thumbs for faster loading but still have a mid size image for the tool tip image and then click in for a bigger image... and even if a print image...

there are many ways to use that to your advantage... just need to think of how it'd apply to you, if it does... ... which is seems to...
"how to determine if the second image is uploaded or not"

Side note... to set up what you’re asking... if you did use jQuery, just gogle jquery.lightbox... the first one up should be the some one I based the lighboxes I made in the two sits I listed above.. in all 5 image areas... it's almost as easy as give the image a class... and bam it's plug and play...


hope that helps...
jeremyBass

[Coldman]

Hi guys!

darconny>>
Try this to check if there's any images at all related to the item.

Code: Select all

{if !isset($image_src_1_url)}
<a href="{$items[numloop].image_src_1}" rel="lightbox[{$items[numloop].title}]"><img src="{$items[numloop].image_1}" title="{$items[numloop].title}" alt="{$items[numloop].title}"/></a>
{else}

{/if}

{if !isset($image_src_2_url)}
<a href="{$items[numloop].image_src_2}" rel="lightbox[{$items[numloop].title}]"><img src="{$items[numloop].image_2}" title="{$items[numloop].title}" alt="{$items[numloop].title}"/></a>
{else}

{/if}

/Coldman