We need to create a slider that shows with a crossfade effect the images of a repeatable field in a product of Woocommerce.
We saw a tutorial hidden link
where it is explained how to create a slider with Views but it doesn't work with our repeatable images field.
Is it possible to use the repeatable field of images for a slider made with views?
Hi, unfortunately Views is designed to loop over posts or Repeatable Field Groups (RFGs), or Users or taxonomy terms, but not designed to loop over a custom image field that allows multiple values. If it's possible to reconfigure your repeating image field to be a single field in a repeatable field group, then you could use Views. If not, the Block Editor offers two Toolset Blocks that are designed to work with image fields that allow multiple values as sliders or in a gallery format. You can use the Toolset Image Slider block or the Toolset Gallery block to display those types of repeating fields, but neither of those blocks applies a crossfade transition. The slider block is probably the closest thing built-in, but it's a right-to-left slide effect instead of a crossfade transition.
Thanks Christian, I have to say that you're the best support person in Toolset team. I will definitely try to reconfigure the custom fields section so to create a repeatable field group and create a slider with a view.
I keep this ticket open so I can contact you again if something goes wrong.
Thanks.
Hi Christian sorry for late reply but I need to keep this ticket still open because I dodn't had the time to test the slider you suggested.
Thanks.
Franco
Hi Christian,
I successfully created the crossfade slider with the group of fields and view.
Is it possible for that type of slider creating a lightbox when clicking on images and also eventually apply a link to those images?
Thanks
Franco
Hi Christian I can send you a link but I need it a secure connection since the website is not yet online. In addition I didn't use flexslider but the view block as you told me. I suppose we need Flexslider for creating the lightbox, if there is a less heavy solution in terms of plugin it would be appreciated because we just need to applu the lightbox feature to the existing slider made with the view.
As soon as you activete the secure connection i will send you the URl.
thanks
Please find private fields available here for your next reply. If you'd like to provide login credentials as well, I can take a closer look to see how you were able to set this up on your site.
Hi Christian here is the page where we placed the slider in the hero area.
hidden link
We need to know if it is possible for that slider to activate the same lightbox that is activated in the small gallery at the bottom part of the sidebar.
Can you provide login credentials in the private reply fields here? I will take a look at the View and see if it's possible to trigger a lightbox by adding some HTML attributes to the View in the hero area.
Okay I've never tried triggering a lightbox from a separate View block before, but we can give it a shot and see if it works. To trigger the lightbox from the top View, you would have to replace the Single Field block in the top View with a custom HTML block. In the HTML block, add the following code to create a lightbox trigger and image:
Please test that and let me know the results. The data-lightbox value 7b31b424-8992-4f11-82fa-9aa981a3f3f7 might change. You can find the updated hash value by inspecting the sidebar slider in the browser inspector (see sidebar-slider.png).
Hi Christian, I am trying to replace the single field block in the view but if I place a HTML block instead of a single block the lightbox works but the slider do not work because it is not anymore a repeatable field.
Maybe I have to find a different way to obtain a slideshow with a lightbox... maybe with a custom slider plugin integrated with a lightbox solution, btw what lightbox uses Toolset in the sidebar gallery maybe I can call that lightbox from a custom coded slider.
In addition I don't understand where to retrieve the data-lightbox value because I don0t know how is generated.
Hi Christian, I am trying to replace the single field block in the view but if I place a HTML block instead of a single block the lightbox works but the slider do not work because it is not anymore a repeatable field.
Are you saying the sidebar slider will stop working if you change the top hero View? I think there was a miscommunication somewhere, because the changes I am suggesting will not impact the sidebar slider. Nothing in the sidebar slider will change. I am only suggesting you change the Single Field block in the loop of the hero View, and replace it with an HTML block containing the hero image inside a link tag. The sidebar slider, which is currently configured to work with the repeating Gallery Prodotto field, will continue to function as expected. The top hero View is configured to loop over the Hero slider RFG and display one RFG item per "page", automatically paginating with a fade transition. Each page contains one image from that RFG item - the Hero Image custom field. I am not suggesting you change the sidebar slider field configuration, or the main configurations of the top hero View. I am only suggesting we change how the image is displayed on each "page" of the Hero View. Whether it's displayed with a single field block or an HTML block should not impact the sidebar slider or the fading feature of the top hero View. Am I misunderstanding something?
In addition I don't understand where to retrieve the data-lightbox value because I don0t know how is generated.
The data-lightbox value is not available anywhere in wp-admin, it is generated by the system in a way that is not obviously predicatable. You must use the browser inspector to find this value on the front-end of the site. From the Product page, you must right-click or control-click an image in the sidebar slider, then click "Inspect" in the popup menu to inspect that element in the browser inspector (screenshot). If you do not have developer tools active in your browser, you may need to activate them to activate the browser inspector. Consult the documentation of your browser if you are not familiar with this feature. It is activated different ways in different browsers. The screenshot I attached in my previous reply shows where to access the value in the browser inspector when you inspect one of the sidebar slider images.
Hi Christian,
maybe I didn't explain well what I was intended to do. My intent is to allow the lightbox in the HERO slider like it does in the sidebar gallery. So I don't want to change that gallery just indicating it as an example of the result.
I tried to investigate how to change the single field code to a HTML code in the loop but since the page works with blocks I cannot see the loop code where I shall change the single field to the HTML content. If ti click in the block element of the loop I have limited option in the block customizer on the sidebar, so my problem is that I don't know how to change that field into a HTML.
Regarding the lightbox code I know how to inspect the page source but if I use the lightbox data placed in the sidebar gallery it refers to that gallery and not to the hero slider (since that data I assume is generated by the system, and so it is not present in teh hero slider since that element is not attached to a lightbox feature). What am I missing?
Franco
