Izno69 | 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 :
- <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 :
- <div class="container py-7">
- <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>
- </div>
- </div>
|
CSS :
Code :
- .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 :
Code :
- // 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();
- });
- }
- };
- // get content from ajax or inline HTML
- if (content !== 'ajax' && $(content).length > 0) {
- // Inline HTML
- var html = $(content).clone(true, true);
- html.themeRefresh();
- t.content.html('');
- t.content.append(html.contents());
- t.cubeportfolio.$obj.trigger('updateSinglePageInlineStart.cbp');
- t.singlePageInlineIsOpen.call(t);
- } else if (content == 'ajax') {
- // Ajax
- $.ajax({
- url: url,
- type: 'GET',
- dataType: 'html',
- timeout: 30000
- })
- .done(function(result) {
- // overwritter updateSinglePageInline() so events work
- var html = $(result);
- html.themeRefresh();
- customNavButtons(html, t);
- t.content.html('');
- t.content.append(html);
- t.cubeportfolio.$obj.trigger('updateSinglePageInlineStart.cbp');
- t.singlePageInlineIsOpen.call(t);
- if ($document.imagesLoaded) {
- t.content.imagesLoaded(function() {
- // If inline has owlCarousel
- var $owl = t.content.find('[data-toggle="owl-carousel"]');
- $owl.on('translated.owl.carousel', function(event) {
- setTimeout(function() {
- t.resizeSinglePageInline();
- }, 200);
- });
- setTimeout(function() {
- t.resizeSinglePageInline();
- }, 1000);
- });
- }
- })
- .fail(function() {
- t.updateSinglePageInline('AJAX Error! Please refresh the page!');
- });
- } else {
- t.updateSinglePageInline('Content Error! Please refresh the page!');
- }
- };
- settings.singlePageCallback = function(url, element) {
- var t = this;
|
Message édité par Izno69 le 21-07-2021 à 21:11:17
---------------
Sites perso : www.websitin.fr - www.pokerstrat.fr
|
