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.
Voici le code :
2 première image de la galerie
CSS :
Javascript :
Modifié par Izno (22 Jul 2021 - 06:19)
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)