Good evening,
By updating the Ocean-Extra plugin and OceanWp theme, I noticed that you changed the JS for the lightboxes from Chocolat.js to magnific-popup.js.
In my case, I lose the sequence of images (gallery mode with arrows to switch from one to another, etc.)
My questions are as follows:
1) Is it possible to enable chocolat.js via a setting?
2) If there is no setting, how could I use chocolate.js
rather than the other (I use a child theme)?
Thank you in advance for your feedback and help,
Cdt
JA
Bonsoir, Magnific Popup est mieux que Chocolat, c’est pourquoi j’ai changé le script, que voulez vous dire pour votre gallerie d’images? Ce script affiche des flèches gauche et droite sur les galleries.
Si vous souhaitez utiliser Chocolat, vous allez devoir dé-enregistrer Magnific Popup depuis votre thème enfant, enregistrer et ajouter le script Chocolat et pour finir enregistrer un autre fichier JS avec ce code:
var $j = jQuery.noConflict();
$j( document ).on( 'ready', function() {
"use strict";
// Auto lightbox
oceanwpAutoLightbox();
// Lightbox
oceanwpInitLightbox();
} );
/* ==============================================
AUTO LIGHTBOX
============================================== */
function oceanwpAutoLightbox() {
"use strict"
$j( 'body .entry-content a:has(img), body .entry a:has(img)' ).each( function() {
// Make sure the lightbox is only used for image links and not for links to external pages
var $image_formats = ['bmp', 'gif', 'jpeg', 'jpg', 'png', 'tiff', 'tif', 'jfif', 'jpe', 'svg', 'mp4', 'ogg', 'webm'],
$image_formats_mask = 0;
// Loop through the image extensions array to see if we have an image link
for ( var $i = 0; $i < $image_formats.length; $i++ ) {
$image_formats_mask += String( $j( this ).attr( 'href' ) ).indexOf( '.' + $image_formats[$i] );
}
// If no image extension was found add the no lightbox class
if ( $image_formats_mask == -13 ) {
$j( this ).addClass( 'no-lightbox' );
}
if ( ! $j( this ).hasClass( 'no-lightbox' )
&& ! $j( this ).hasClass( 'gallery-lightbox' )
&& ! $j( this ).parent().hasClass( 'gallery-icon' )
&& ! $j( this ).hasClass( 'woo-lightbox' )
&& ! $j( this ).hasClass( 'woo-thumbnail' ) ) {
$j( this ).addClass( 'oceanwp-lightbox' );
}
if ( ! $j( this ).hasClass( 'no-lightbox' )
&& $j( this ).parent().hasClass( 'gallery-icon' ) ) {
$j( this ).addClass( 'gallery-lightbox' );
}
} );
}
/* ==============================================
LIGHTBOX
============================================== */
function oceanwpInitLightbox( $context ) {
"use strict"
// Lightbox
$j( 'body .site-content, body .entry' ).Chocolat( {
imageSelector : '.oceanwp-lightbox'
} );
// Gallery lightbox
$j( '.gallery-format, .gallery', $context ).Chocolat( {
loop : true,
imageSelector : '.gallery-lightbox:not(.slick-cloned)'
} );
// Product lightbox
$j( '.product-images-slider' ).Chocolat( {
loop : true,
imageSelector : '.product-image:not(.slick-cloned) .woo-lightbox'
} );
}
Mais vous devez d’abord dé-enregistrer les scripts lightbox par défaut, sinon il pourrait y avoir des erreurs.
Bonsoir
Je reviens tardivement.
Merci pour votre retour, je vais tester cela.
Alors concernant la question des flèches, je ne les ai pas.
Mon post est un custom post type (moto) avec 4 photos ajoutées individuellement (une à une). En Chocolat.js, j’ai bien le fléchage, le plein écran, etc., mais pas avec Magnific Popup, d’où ma remarque.
Si vous avez une idée…
Cdt
JA
Précision : mon ajout de photos passe par des fields ACF, mais encore une fois cela allait…
“Mais vous devez d’abord dé-enregistrer les scripts lightbox par défaut, sinon il pourrait y avoir des erreurs.”
Votre code indique-t-il cela ?
Merci encore
Bonjour, non ce code vous montre comment utiliser le script Chocolat, il ne montre pas comment enregistrer Chocolat ou dé-enregistrer Magnific Popup.
Le code pour enregistrer ou dé-enregistrer un script doit être ajouté dans le fichier functions.php de votre thème enfant.
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://codex.wordpress.org/Function_Reference/wp_deregister_script
