LightBox qui marche pas en ligne mais en local

LightBox qui marche pas en ligne mais en local - HTML/CSS - Programmation

Marsh Posté le 21-07-2021 à 20:46:17    

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.  :) :)
 
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.
 

Code :
  1. <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
 
 

Code :
  1. <div class="container py-7">
  2.                         <div class="row no-gutters" data-toggle="magnific-popup" data-magnific-popup-settings='{"delegate": "a.gallery-trigger", "gallery":{"enabled":true}}'>
  3.                             <div class="col-6 col-lg-3">
  4.                                 <div class="card-effect card-effect-front-to-back">
  5.                                     <img data-src="assets/img/galerie/stage/stage-cohesion-handball-feminin-mini.jpg" data-toggle="blazy" alt="Stage de cohesion handball" class="img-fluid" />
  6.                                     <div class="card-back rounded bg-dark bg-op-8 flex-valign text-center p-3">
  7.                                         <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>
  8.                                     </div>
  9.                                 </div>
  10.                             </div>
  11.                             <div class="col-6 col-lg-3">
  12.                                 <div class="card-effect card-effect-front-to-back">
  13.                                     <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" />
  14.                                     <div class="card-back rounded bg-dark bg-op-8 flex-valign text-center p-3">
  15.                                         <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>
  16.                                     </div>
  17.                                 </div>
  18.                             </div>
  19.                        </div>
  20.         </div>


 
 
CSS  :  
 

Code :
  1. .card-effect {
  2.   position: relative;
  3.   margin: 0;
  4.   }
  6. &.card-effect-front-to-back,
  7.   &.card-effect-back-reveal {
  8.     .card-front {
  9.       z-index: 10;
  10.       -webkit-backface-visibility: hidden;
  11.       -moz-backface-visibility: hidden;
  12.       backface-visibility: hidden;
  13.       -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  14.       -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  15.       transition: transform 0.4s, opacity 0.4s;     
  16.     }
  17.     .card-back {
  18.       height: 100%;
  19.       width: 100%;
  20.       opacity: 0;
  21.       -webkit-transform: scale(0.7);
  22.       -moz-transform: scale(0.7);
  23.       -ms-transform: scale(0.7);
  24.       transform: scale(0.7);
  25.       -webkit-backface-visibility: hidden;
  26.       -moz-backface-visibility: hidden;
  27.       backface-visibility: hidden;
  28.       -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  29.       -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  30.       transition: transform 0.4s, opacity 0.4s;     
  31.     }


 
Javascript :
 

Code :
  1. // Object of plugins to add to Globals.PLUGINS
  2. Globals.PLUGINS.themePluginCubePortfolio = function(context) {
  3.   // ----------------------------------------------------------------
  4.   // Plugin: Cube Portfolio
  5.   // @see: http://hilios.github.io/jQuery.countdown/
  6.   // ----------------------------------------------------------------
  7.   var $cubePortfolios = context.find('[data-toggle="cbp"]');
  8.   if ($cubePortfolios.length > 0) {
  9.     var themePluginCubePortfolioInit = function() {
  10.       $cubePortfolios.each(function() {
  11.         var $this = $(this),
  12.           customSettings = $this.data('settings') || {},
  13.           defaultSettings = {
  14.             layoutMode: 'mosaic',
  15.             sortToPreventGaps: true,
  16.             defaultFilter: '*',
  17.             animationType: 'slideDelay',
  18.             gapHorizontal: 2,
  19.             gapVertical: 2,
  20.             gridAdjustment: 'responsive',
  21.             mediaQueries: [{
  22.               width: 1100,
  23.               cols: 4
  24.             }, {
  25.               width: 800,
  26.               cols: 3
  27.             }, {
  28.               width: 480,
  29.               cols: 2
  30.             }, {
  31.               width: 0,
  32.               cols: 1
  33.             }],
  34.             caption: 'zoom',
  35.             displayTypeSpeed: 100,
  37.             // lightbox
  38.             lightboxDelegate: '.cbp-lightbox',
  39.             lightboxGallery: true,
  40.             lightboxTitleSrc: 'data-title',
  41.             lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',
  43.             // singlePageInline
  44.             singlePageInlinePosition: 'top',
  45.             singlePageInlineInFocus: true,
  47.             // singlePage
  48.             singlePageAnimation: 'fade'
  50.           },
  51.           settings = $.extend({}, defaultSettings, customSettings);
  53.         // Custom callbacks
  54.         settings.singlePageInlineCallback = function(url, element) {
  55.           var t = this,
  56.             $this = $(t),
  57.             $element = $(element),
  58.             content = $element.data('content') || 'ajax',
  59.             customNavButtons = function($html, t) {
  60.               var customClose = $html.find('[data-cbp-close]') || null;
  61.               if (customClose !== null) {
  62.                 $(t.wrap).addClass('has-custom-close');
  63.                 $(t.closeButton).hide();
  64.                 customClose.on('click', function() {
  65.                   t.close();
  66.                 });
  67.               }
  68.             };
  70.           // get content from ajax or inline HTML
  71.           if (content !== 'ajax' && $(content).length > 0) {
  72.             // Inline HTML
  73.             var html = $(content).clone(true, true);
  74.             html.themeRefresh();
  75.             t.content.html('');
  76.             t.content.append(html.contents());
  77.             t.cubeportfolio.$obj.trigger('updateSinglePageInlineStart.cbp');
  78.             t.singlePageInlineIsOpen.call(t);
  79.           } else if (content == 'ajax') {
  80.             // Ajax
  81.             $.ajax({
  82.                 url: url,
  83.                 type: 'GET',
  84.                 dataType: 'html',
  85.                 timeout: 30000
  86.               })
  87.               .done(function(result) {
  88.                 // overwritter updateSinglePageInline() so events work
  89.                 var html = $(result);
  90.                 html.themeRefresh();
  91.                 customNavButtons(html, t);
  92.                 t.content.html('');
  93.                 t.content.append(html);
  94.                 t.cubeportfolio.$obj.trigger('updateSinglePageInlineStart.cbp');
  95.                 t.singlePageInlineIsOpen.call(t);
  97.                 if ($document.imagesLoaded) {
  98.                   t.content.imagesLoaded(function() {
  99.                     // If inline has owlCarousel
  100.                     var $owl = t.content.find('[data-toggle="owl-carousel"]');
  101.                     $owl.on('translated.owl.carousel', function(event) {
  102.                       setTimeout(function() {
  103.                         t.resizeSinglePageInline();
  104.                       }, 200);
  105.                     });
  107.                     setTimeout(function() {
  108.                       t.resizeSinglePageInline();
  109.                     }, 1000);
  110.                   });
  111.                 }
  112.               })
  113.               .fail(function() {
  114.                 t.updateSinglePageInline('AJAX Error! Please refresh the page!');
  115.               });
  116.           } else {
  117.             t.updateSinglePageInline('Content Error! Please refresh the page!');
  118.           }
  119.         };
  120.         settings.singlePageCallback = function(url, element) {
  121.           var t = this;


Message édité par Izno69 le 21-07-2021 à 21:11:17

---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr
Reply

Marsh Posté le 21-07-2021 à 20:46:17   

Reply

Marsh Posté le 21-07-2021 à 23:24:58    

http://code.ionicframework.com/ion [...] ns.min.css
Tout est dit :o
Tu veux mettre un lien en http dans une page https. Le navigateur va bloquer car le http, c'est pas secure...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 22-07-2021 à 14:39:12    

haaaa merci beaucoup.  
C'est trop bien internet toujours des mecs qui on réponse a tout ^^


---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr
Reply

Marsh Posté le 22-07-2021 à 14:45:18    

Je me demandais c'est pas risqué d'avoir des liens externes au site comme ca pour faire fonctionner celui ci ? Si le site en question down mon site ne marchera plus... ??


---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr
Reply

Marsh Posté le 22-07-2021 à 17:42:09    

Non, tu n'auras simplement plus d'icône.
Donc, tu peux sauver le ficher en local, et le charger depuis ton domaine
Mais tu as besoin de ce fichier ? C'est quand que tu emploies ces icônes?

 

En plus tu download la version .ttf, la plus lourde.
Si tu mets le fichier en local, tu pourras retirer ce code de la CSS
src:url("../fonts/ionicons.eot?v=2.0.1" );src:url("../fonts/ionicons.eot?v=2.0.1#iefix" ) format("embedded-opentype" ),url("../fonts/ionicons.ttf?v=2.0.1" ) format("truetype" ),


Message édité par David Boring le 22-07-2021 à 17:42:58
Reply

Marsh Posté le 22-07-2021 à 20:47:17    

Franchement, faire appel à une site web externe (donc créer une dépendance) et ainsi augmenter le risque de défaillance pour afficher quelques icônes sur son propre site alors qu'une balise <img /> ou une image png en background de la balise qui doit affiche l'icône suffirait, ça me dépasse  :sarcastic:


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 23-07-2021 à 09:37:39    

En théorie, passer par un CDN pour charger une font d’icône c'est très bien: si tout le monde utilises les mêmes set d’icône et les même cdn, tu ne gaspille pas de la bande passante et de la place sur ton disque dur pour télécharger encore et encore fontawesome pacque tout le monde a besoin des 10 mêmes icônes sur son site.
Résultat des sites se chargeant plus vite et "moins polluant". :o  
 
Sauf que des CDNs y'en a pléthore, des font d’icône aussi (avec chacune plusieurs versions) donc dans les faits...
 
...a part risquer des problèmes d'affichage (voir pire quand on sert des versions de bibliothèque js https://shkspr.mobi/blog/2020/10/pl [...] libraries/ ).


---------------
D3
Reply

Marsh Posté le 23-07-2021 à 10:59:46    

On a vu ce que ça a donné quand un gros CDN a récemment planté : des millions de sites web down.
Je rejoins l'avis de l'auteur de ton lien.
 
Et c'est d'autant plus vrai quand le site web est une appli web, type intranet. Un tel include c'ets s'exposer aux pbs de failles de sécu, collecte de données ou même tout simplement, si l'intranet est dans une partie du réseau qui n'accède pas à internet, tu fais comment pour charger la lib ? :/


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 23-07-2021 à 17:27:21    

Je vous remercie pour vos réponses, je vais y réfléchir.
Après je comprends pas pourquoi un simple set d'icone non chargé fait buger l'ouverture d'une lightbox. ok il y a plus l'icone loupe sur l'image mais ca devrait pas empêcher l'ouverture...


---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed