WBCE CMS Forum

losttrip

Mitglied

Lightbox showing multiple images when clicking a single image

I am looking for some guidance as to whether there are established modules with the functionality I am looking for, or if you have a suggestion on a module to build from.

Here is my goal, as best as I can describe it.  The end visual look would appear similar to Itemz Menu Card with Pictures:

The specific functionality I am looking for would be that clicking the single image would open a lightbox showing multiple images (which are not visible on the listing page).

I also need the ability to easily move items from one page to another after they are "sold".

I have considered OFA, Bakery and Itemz but am not sure how to implement the backend handling of uploading the multiple images and the frontend handling of only showing a single image and the rest only appearing in a lightbox.  I was thinking if I could somehow assign all the images to a group on upload, then that could be used assign them to a lightbox, but honestly, this is beyond my current comprehension.

I also want to automatically add the "Merkzettel" / Wish List functionality to each listing to create a "Request" shop.  But I will try to tackle that functionality once I get my post loop basis down.

Any suggestions would be greatly appreciated.

Edit - upon further thought, instead of a lightbox on click, the images could be in a slider.  Is there a current module that offers this kind of functionality?

Beitrag geändert von losttrip (28.09.2019 08:13:27)

florian

Administrator

Re: Lightbox showing multiple images when clicking a single image

You can do this with Itemz and a droplet.

Create for each item a subdirectory of the media directory and upload there the corresponding images.
In the itemz module settings, use a currently not used field to specify the directory name (in the menu card preset Short4 is not used).
Add the droplet call to the item loop together with the destinated directory attribute placeholder, for example
[[hiddengallery?picdir=[SHORT4]]]
Note the three closing brackets of the droplet call.
When creating an item, specify the folder name where the images of this item are situated in the additional field.

For a colorbox based item display, you can create a droplet with the following code (adapted from Stackoverflow) and name it hiddengallery:

$rv='';
if ($handle = opendir(WB_PATH.MEDIA_DIRECTORY.'/'.$picdir)) {
    while (false !== ($entry = readdir($handle))) {
        $files[] = $entry;
    }
    $images=preg_grep('/\.jpg$/i', $files);
    foreach($images as $image)
    {
    $rv.='<a class="colorbox" rel="'.$picdir.'" href="'.WB_URL.MEDIA_DIRECTORY.'/'.$picdir.'/'.$image.'"></a>';
    }
    closedir($handle);
}
return $rv;

The result is that the item image is the first visible image, and all other images can be accessed after opening the first image in the colorbox by the prev/next arrows.

For a slider droplet, you can take the droplet described here as a starting point, but it needs to be customized to use a specified directory name instead of the page id.

---

Code allein macht nicht glücklich. Jetzt spenden!

losttrip

Mitglied

Re: Lightbox showing multiple images when clicking a single image

As always, thank you for your quick and detailed reply.

I apologize, I left out an important point.  This is something that others (not me) will be using, so it needed to be as user friendly (fool proof) as possible.

if I understand your workflow, the admin would have to manually create a sub-directory in Media every time they wanted to add an item (which would be often for a store type environment) and then manually upload that items images using the Media upload workflow... THEN add an item in itemz and manually input the name of the directory they just uploaded their images to.  Is this correct?  For me, that would be fine to use, but I know the users of this site would be confused, likely make mistakes and find it too cumbersome.

What I worked on since my original post is designing a custom OFA, which allows the user to input the item name, short description, price and then upload multiple images.  OFA puts the images in a sub-directory corresponding to each item added (media/images/item1 , media/images/item2 , etc.)
The in the "Overview (Item-Loop):" I can use a combination of the [IMAGE] [IMAGES] calls and integrated Lightbox2 to achieve what I am after.  I just had to add a "display=none" to a div wrapped around the [IMAGES] placeholder so the additional images are not shown on the post loop page.  The lightbox adds a group relationship to all the item images (e.g., rel="lightbox[image_1]") so the lightbox shows all pics when I click the Main Image on the post loop page.

OFA also allows the admin to easily move these items from the "shop" page to a "sold collections" (OFA) page once the item is sold (these are unique one of a kind products).

If this is not clear, and/or if anyone is interested in this kind of functionality, I could provide example code.

Now I have to move forward and see if I can successfully integrate the "Wish List" module into this workflow.  I'm sure I'll have more questions.

Many thanks again for your time and commitment.

florian

Administrator

Re: Lightbox showing multiple images when clicking a single image

You are right, the itemz/droplets based solution which would work as described needs a lot more effort and is less comfortable . Actually it might only be useful if there are only a few items with ony a few updates a month.
If you've found a way to achieve your goals with OfA, all the better.

---

Code allein macht nicht glücklich. Jetzt spenden!