Alla fine il mio amico chatGPT mi ha consigliato di usare questo approccio, che di fatto funziona.
La seguente regola è stata applicata in maniera condizionale, così che funzioni solo nella pagina dove ho lo script incriminato.
codice:
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.7.0.min.js', array(), '3.7.0');
Pensi che possa andar bene?
Certo, avrei preferito riuscire a far funzionare il jquery di wordpress e mi da un pò fastidio dover adottare una soluzione di ripiego senza riuscire a comprendere le ragioni per cui in questo modo funziona e nell'altro no.
Tuttavia, dopo innumerevoli tentativi, non ho trovato nulla di meglio.
Eventualmente, se non ti chiedo troppo, potresti fare una verifica sulla pagina in oggetto per vederla in azione?
Si tratta della homepage del mio sito (le tue credenziali di accesso sono sempre valide).
La gallery è quella in fondo alla pagina.
Lo script di riferimento lo trovi nella sezione "editor del tema" di wordpress, cartella JS, si chiama "Gallery-script".
Riporto comunque qui il suo intero contenuto:
codice:
function openModal() { $("#myModal").fadeIn(300);
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
var modal = document.getElementById("myModal");
$(modal).fadeOut(300);
}
var modal = document.getElementById("myModal");
modal.addEventListener('click', function(e) {
if (e.target === modal) {
closeModal();
}
});
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
var slides = $(".mySlides");
var currentIndex = slideIndex - 1;
var nextIndex = currentIndex + n;
if (nextIndex < 0) {
nextIndex = slides.length - 1;
} else if (nextIndex >= slides.length) {
nextIndex = 0;
}
var currentSlide = $(slides[currentIndex]);
var nextSlide = $(slides[nextIndex]);
currentSlide.fadeOut(500);
nextSlide.fadeIn(500, function() {
currentSlide.hide();
nextSlide.css("display", "block");
slideIndex = nextIndex + 1;
});
// aggiorna la classe active della thumbnail corrente
var dots = document.getElementsByClassName("demo");
for (var j = 0; j < dots.length; j++) {
if (j === nextIndex) {
dots[j].className += " active";
} else {
dots[j].className = dots[j].className.replace(" active", "");
}
}
}
function currentSlide(n) {
var slides = $(".mySlides");
var dots = $(".demo");
// aggiorna slideIndex con il valore dell'immagine miniatura cliccata
slideIndex = n;
// nascondi tutti gli altri slide tranne quello corrente
for (var i = 0; i < slides.length; i++) {
if (i !== n - 1) {
$(slides[i]).fadeOut(500);
}
}
// applica l'effetto fade al slide corrente
$(slides[n - 1]).fadeIn(500);
// aggiorna la classe active della thumbnail corrente
for (var j = 0; j < dots.length; j++) {
if (j === n - 1) {
dots[j].className += " active";
} else {
dots[j].className = dots[j].className.replace(" active", "");
}
}
}
function showSlides(n) {
var i;
var slides = $(".mySlides");
var dots = $(".demo");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
jQuery(document).ready(function($) {
$('.gallery').slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
focusOnSelect: true
});
$('.gallery_responsive').slick({
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
focusOnSelect: true
});
});
Come potrai notare che ho inserito i tag di apertura e chiusura
codice:
jQuery(document).ready(function($) {
e
solo per una parte del codice.
Si tratta in sostanza di script con funzioni separate, anche se stanno tutti nello stesso documento: (quello tra i tag jquery sopra citato) è deputato a gestire il "carosello" delle immagini in miniatura.
Il resto del codice (la parte più corposa, fuori da tag) gestisce la gallery che si apre quando si clicca su una delle immagini.
Forse (è un ricordo vago, ma potrebbe avere un fondamento di verità) quando ho creato il codice (grazie a ChatGPT, dato che io non so usare JS) lui ha usato jquery per la parte delle miniature e JS puro per la gallery.
Ma prendi quest'ultima info con le pinze, potrebbe essere errata.
Grazie come sempre per il supporto!
Rispondi quotando
