Support » Plugin: Ocean Extra » Lightbox JS

  • Resolved juanalanwp

    (@juanalanwp)


    Bonsoir,

    En faisant la mise à jour du plugin Ocean-Extra et de theme OceanWp, je note que vous avez changé les JS pour les lightbox pour passer de Chocolat.js à magnific-popup.js.
    Dans mon cas, je perd l’enchaînement des images (mode galerie avec flèches pour passer de l’une à l’autre, etc.)

    Mes questions sont donc les suivantes :
    1) Est-il possible de conserver chocolat.js via à un paramétrage ?
    2) En l’absence de paramétrage, comment pourrais-je faire pour utiliser chocolat.js
    plutôt que l’autre(j’utilise un child theme) ?

    Merci d’avance pour vos retours et votre aide,

    Cdt

    JA

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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

    Plugin Author oceanwp

    (@oceanwp)

    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.

    juanalanwp

    (@juanalanwp)

    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

    juanalanwp

    (@juanalanwp)

    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

    Plugin Author oceanwp

    (@oceanwp)

    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.