[Gelöst] Creating a thumbnail gallery

[Author]

Artikel

[leilaG]

In response to ticket reply #1503019.

We finally got round to working on this project again, thank you Waqar for your instructions and steps, they were really helpful.

We've followed the steps and the gallery is working with the lightbox here: versteckter Link

1. The Controls are not showing, the left and right arrows
2. How do we show thumbnails
3. The lightbox shows the text: 'slider-image Item 3 of 3' how do we change that

[Waqar]

Hi,

Thank you for sharing the update and glad that the slider/gallery is working now.

1. The Controls are not showing, the left and right arrows
- In the page's output, I couldn't find the code for the left and right navigation arrows, mentioned in step 4.
https://toolset.com/forums/topic/gallery-options/#post-1503019

Screenshot: versteckter Link

Please make sure that it has been included.

Also, the round navigation indicators are not showing properly, because of the repeated code:

<ol class="carousel-indicators"> 
<li> ... </li>
</ol>

Screenshot: versteckter Link

Please make sure that it is included only once.

versteckter Link

2. How do we show thumbnails

- As can be seen in the demo, the Bootstrap carousel that you're using doesn't support thumbnails based navigation.
versteckter Link

If you'd just like to show the available image thumbnails below the slider, you can create a copy of your view from step 2 and remove the extra HTML code from its output, only keeping the image tag:

Screenshot: versteckter Link

That new view can then be inserted below the slider.

3. The lightbox shows the text: 'slider-image Item 3 of 3' how do we change that

- You'll find that text in the image tags shown in step 2.

Screenshot: versteckter Link

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[leilaG]

Hey Waqar, thanks for further steps, it looks the text editor wasn't saving the code properly so I used a raw html box to put the code in and the controls are displaying and working perfectly!!

I have followed the instructions for the thumbnails, but they are just stacking full size on top of each other versteckter Link am I missing some code?

1. They are not clickable
2. Will they change the main photo when you click on the thumbnail?

[Waqar]

Thanks for the update and glad that it works.

To control the size and layout of those image thumbnails and make them clickable to change the main slider photo, you'll need to update the image code a little.

Assuming that in your latest view for these image thumbnails, this is the code between the <wpv-loop> ... </wpv-loop> tags, for the image:

[wpv-item index=1]
    <img src="[types field='photo' output='raw'][/types]" alt="">
[wpv-item index=other]
    <img src="[types field='photo' output='raw'][/types]" alt="">

You can update it simply to include class, data-target and data-slide-to attribute, same as the round navigation links:

<img src="[types field='photo' output='raw'][/types]" alt="" class="img-thumbnail" data-target="#carousel-example-generic" data-slide-to="[wpv-loop-index accumulate='true' pad='false' offset='-1']">

This will also allow you to style those thumbnails, using custom CSS code, for example:

img.img-thumbnail {
width: 30%;
height: auto;
margin: 2% 2% 2% 0%;
cursor: pointer;
}

Important note: I'd like to remind you that as per our support policy ( https://toolset.com/toolset-support-policy/ ), it won't be possible for us to continue with deeper customization assistance, such as this.

For more personalized assistance around custom code, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

[leilaG]

That worked perfectly! Thank you for the support and help, much appreciated 🙂

Understood.