Accordion Slider – Stop allowing all images to show in slider

Hi,

Thank you for the inquiry.

As suggested above, you can apply a custom class name to the Accordion elements and re-initialize the lightbox script in order to group the items. Please edit all Accordion elements in the page, then go to the Advanced > Developer Settings. In the Custom CSS Class name field, place the value ‘accordion-lightbox-group’. After editing all Accordion elements, add this code in the functions.php file.

function ava_custom_script_group_lightbox()
{
    ?>
    <script>
    (function($){
        function g() {
            var accordion = $('.accordion-lightbox-group')

            accordion.each(function() {
                var srcList = [];
                var slider = $(this)

                slider.find('li a').each(function() {
                    var src = $(this).attr('href');
                    var title = $(this).attr('title');
                    var alt = $(this).attr('alt');
                    srcList.push({ src: src, type: 'image', title: title, alt: alt });
                });

                slider.magnificPopup({
                    items: srcList,
                    type: 'image',
                    gallery: {enabled: true}
                });         
            });
        }
    
        $(document).ready(function() {
            g();
        });
    })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_script_group_lightbox');

If this doesn’t work as expected, try to edit the enfold/js/avia-snippet-lightbox.js, look for this code:

var alt = item.el.attr('alt');
                    if (typeof alt == "undefined")
                    {
                        alt = item.el.find('img').attr('alt');
                    }

                    if (typeof alt != "undefined")
                    {
                        img.attr('alt', alt);
                    }

Replace it with:

if (item.el)
                {
                    var alt = item.el.attr('alt');
                    if (typeof alt == "undefined")
                    {
                        alt = item.el.find('img').attr('alt');
                    }

                    if (typeof alt != "undefined")
                    {
                        img.attr('alt', alt);
                    }
                }

Best regards,
Ismael