[Resolved] My Gallery is not showing

[Author]

Posts

[Jaime]

I had before a Gallery working on a Layout, but now (i don't know why) is not showing the images.
The Layout code is

<div class="flexslider">
<ul class="slides">[wpv-for-each field="wpcf-imagenes-destacadas-rcc"]</p>

[types field='imagenes-destacadas-rcc' alt='%%ALT%%' title='%%TITLE%%' size='large' align='none' resize='proportional' separator=', '][/types]

<p>[/wpv-for-each]
</div>

The JS code is

// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
controlNav: false,
directionNav: false,

});
});

/* JS para MAGNIFICPOPUP (Plugin de visualización de imágenes que viene por defecto en Kleo)*/

$(document).ready(function() {

$('a.btn-gallery-localizacion').on('click', function(event) {
event.preventDefault();

var gallery = $(this).attr('href');

$(gallery).magnificPopup({
delegate: 'a',
type:'image',
gallery: {
enabled: true
}
}).magnificPopup('open');
});

});

and the CSS code is

Link to a page where the issue can be seen:
hidden link

I expected to see:
If you click on "Ver galería" button the Magnific Popup should be launched

Instead, I got:
Nothing happens when I click the button

*I provide access to a test site where you can work without problem.

[Shane]

Hi Jaime,

Thank you for getting in touch.

I found the issue, you need to replace all the $ sign with the work jQuery. The code needs to be ran in compatibility mode for wordpress.

What you should have is

jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
    animation: "slide",
    animationLoop: true,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4,
    controlNav: false,
    directionNav: false,
    
  });
});

If you check the page below you should see it working
hidden link

Thanks,
Shane

[Jaime]

Everything worked fine Shane.
Thanks a lot.

I just want to ask you why this worked before and suddenly stopped to work.
Just curiosity.
We can set the ticket as resolved after
🙂

Thanks a lot again!

[Shane]

Hi Jaime,

I honestly cannot say why it stopped working but the reason why it wasn't working was because the of the $ sign in the javascript. This is what the console was throwing the error over.

Once I set it to the jQuery name instead of the $ it worked fine again. Its usually better to use jQuery instead of $ when working with wordpress.

Thanks,
Shane

[Jaime]

My issue is resolved now.

Shane is great (like all the team).
More Toolset all over the world!

Thank you team!