We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Question about vertical slider for Photo gallery

October 29, 2020 at 1:28 am #4317

[anonymous]

I want to achieve something like this page, a vertical slider image gallery.

https://www.manfrotto.com/hk-en/advanced2-camera-active-backpack-for-dslr-csc-mb-ma2-bp-a/

How to get the vertical slider feature like that website? I cannot find similar gallery feature in Publii’s theme.

November 2, 2020 at 2:46 am #4351

[anonymous]

I found that the Manfrotto website use RoyalSlider, there is a jQuery version. Is it possible to incorporate jQuery plugin in Publii?

https://dimsemenov.com/plugins/royal-slider/pricing/

November 2, 2020 at 7:35 am #4353

Bob

It is, but it requires custom work.

November 2, 2020 at 8:43 am #4354

[anonymous]

I am checking other Javascript/CSS thumbnail sliders. I think I need to use Option Images for integrate a 3rd party Slider, just want to know I am on the right track or not.

https://getpublii.com/dev/how-images-work-in-publii/

November 3, 2020 at 6:35 am #4372

[anonymous]

After review the Option Image, I think that is not what I want, I need custom slider by post, not by theme.

I need to include the slider in each post with HTML editor, so I need to put post images in the assets folder, am I correct?

November 3, 2020 at 6:39 am #4373

Bob

What exactly do you want to achieve? Change the gallery style to a slider or set the slider in the place where the Featured Image exists?

November 3, 2020 at 7:25 am #4374

[anonymous]

The Featured image will show in Tag page, not post page, it is relatively easy to modify the post.hbs

I want to have a thumbnail slider in post page, click on the thumbnail and show an image at a time on the same page, not switch to a lightbox.

I am thinking to integrate an existing javascript thumbnail slider, like RoyalSlider, and thinking to use the assets folder to store the post images.

<p class=”simple-translate-result” style=”color: #000000;”></p>
<p class=”simple-translate-candidate” style=”color: #737373;”></p>