Lightbox qui marche pas en ligne mais en local

Bonjour,

J'ai une lightbox qui marche plus en ligne mais qui marche en local, ca marchait avant...

Je vous remercie d'avance pour votre aide.

le lien du site : https://www.milifit.fr/stage-de-cohesion-milifit.php


J'ai remarqué que quand je retire de la page le script ci-dessous j'ai le même problème en local.

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

Voici le code :

2 première image de la galerie

 <div class="row no-gutters" data-toggle="magnific-popup" data-magnific-popup-settings='{"delegate": "a.gallery-trigger", "gallery":{"enabled":true}}'>
                            <div class="col-6 col-lg-3">
                                <div class="card-effect card-effect-front-to-back">
                                    <img data-src="assets/img/galerie/stage/stage-cohesion-handball-feminin-mini.jpg" data-toggle="blazy" alt="Stage de cohesion handball" class="img-fluid" />
                                    <div class="card-back rounded bg-dark bg-op-8 flex-valign text-center p-3">
                                        <a href="assets/img/galerie/stage/stage-cohesion-handball-feminin.jpg" class="text-white gallery-trigger"> <i class="ion-ios-search-strong icon-1x"></i> </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-lg-3">
                                <div class="card-effect card-effect-front-to-back">
                                    <img data-src="assets/img/galerie/stage/stage-cohesion-handball-feminin-2-mini.jpg" data-toggle="blazy" alt="Stage de cohesion handball féminin" class="img-fluid" />
                                    <div class="card-back rounded bg-dark bg-op-8 flex-valign text-center p-3">
                                        <a href="assets/img/galerie/stage/stage-cohesion-handball-feminin-2.jpg" class="text-white gallery-trigger"> <i class="ion-ios-search-strong icon-1x"></i> </a>
                                    </div>
                                </div>
                            </div>

CSS :

.card-effect {
  position: relative;
  margin: 0;
  }

&.card-effect-front-to-back,
  &.card-effect-back-reveal {
    .card-front {
      z-index: 10;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
      -moz-transition: -moz-transform 0.4s, opacity 0.4s;
      transition: transform 0.4s, opacity 0.4s;      
    }
    .card-back {
      height: 100%;
      width: 100%;
      opacity: 0;
      -webkit-transform: scale(0.7);
      -moz-transform: scale(0.7);
      -ms-transform: scale(0.7);
      transform: scale(0.7);
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
      -moz-transition: -moz-transform 0.4s, opacity 0.4s;
      transition: transform 0.4s, opacity 0.4s;      
    }

Javascript :

// Object of plugins to add to Globals.PLUGINS
Globals.PLUGINS.themePluginCubePortfolio = function(context) {
  // ----------------------------------------------------------------
  // Plugin: Cube Portfolio
  // @see:  http://hilios.github.io/jQuery.countdown/
 
  // ----------------------------------------------------------------
  var $cubePortfolios = context.find('[data-toggle="cbp"]');
  if ($cubePortfolios.length > 0) {
    var themePluginCubePortfolioInit = function() {
      $cubePortfolios.each(function() {
        var $this = $(this),
          customSettings = $this.data('settings') || {},
          defaultSettings = {
            layoutMode: 'mosaic',
            sortToPreventGaps: true,
            defaultFilter: '*',
            animationType: 'slideDelay',
            gapHorizontal: 2,
            gapVertical: 2,
            gridAdjustment: 'responsive',
            mediaQueries: [{
              width: 1100,
              cols: 4
            }, {
              width: 800,
              cols: 3
            }, {
              width: 480,
              cols: 2
            }, {
              width: 0,
              cols: 1
            }],
            caption: 'zoom',
            displayTypeSpeed: 100,

            // lightbox
            lightboxDelegate: '.cbp-lightbox',
            lightboxGallery: true,
            lightboxTitleSrc: 'data-title',
            lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',

            // singlePageInline
            singlePageInlinePosition: 'top',
            singlePageInlineInFocus: true,

            // singlePage
            singlePageAnimation: 'fade'

          },
          settings = $.extend({}, defaultSettings, customSettings);

        // Custom callbacks
        settings.singlePageInlineCallback = function(url, element) {
          var t = this,
            $this = $(t),
            $element = $(element),
            content = $element.data('content') || 'ajax',
            customNavButtons = function($html, t) {
              var customClose = $html.find('[data-cbp-close]') || null;
              if (customClose !== null) {
                $(t.wrap).addClass('has-custom-close');
                $(t.closeButton).hide();
                customClose.on('click', function() {
                  t.close();
                });
              }
            };

Modifié par Izno (22 Jul 2021 - 06:19)

Salut,

en regardant dans la console du navigateur web tu as tout un tas d'erreur bizarre :

Blocage du chargement du contenu mixte actif (mixed active content) «  http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css  »
Blocage du chargement du contenu mixte actif (mixed active content) «  http://fonts.googleapis.com/css?family=Open+Sans:400, 700,300 »
Blocage du chargement du contenu mixte actif (mixed active content) «  http://fonts.googleapis.com/css?family=Rambla:400, 700 »
Blocage du chargement du contenu mixte actif (mixed active content) «  http://fonts.googleapis.com/css?family=Calligraffitti  »
Blocage du chargement du contenu mixte actif (mixed active content) «  http://fonts.googleapis.com/css?family=Roboto+Slab:400, 700 »
La feuille de style  https://www.milifit.fr/stage-de-cohesion-milifit.php#  n’a pas été chargée car son type MIME, « text/html », n’est pas « text/css »

Est ce que tu as une page php qui génère du css ?
La dernière ligne ça ressemble à une erreur de header qui fait foiré tout le reste des css

Edit : c'est peut être l'inverse en fait, tu as un header foireux qui indique css sur ta page php qui génère le html de la page (et donc pas le css) ?

Edit 2 : J'ai pas fait gaffe mais il y a aussi cette erreur la :

Erreur dans les liens source : Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data URL de la ressource :  https://www.milifit.fr/assets/css/bootstrap.min.css

Erreur d'encodage ? Caractère invisible à la con ? Un paramètre qui devrait indiquer que c'est du texte au lieu du json ?

Edit 3 : En regardant mieux le code html de la page, je pense qu'il y a une erreur sur cette ligne la :

<!--Your custom colour override-->
<link href="#" id="colour-scheme" rel="stylesheet">

(Ce qui expliquerai le # bizarre qu'il y a à la fin de l'URL dans " La feuille de style https://www.milifit.fr/stage-de-cohesion-milifit.php# " )
Modifié par Mathieuu (22 Jul 2021 - 11:52)

C'est bon c'est a cause des lien http et non https le navigateur bloquait les scripts en ligne
Modifié par Izno (22 Jul 2021 - 14:58)