Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème CSS contentflow

mes images ne s'affichent pas

    15 décembre 2024 à 13:10:30

    Bonjour,

    J'ai crée un code afin de présenter mes peintures dans un content flow qui est plus interactif visuellement.

    Je l'ai crée il y a plusieurs années. Je n'ai pas eu de problème depuis longtemps. Seulement, depuis 2 jours je cherche pourquoi mon content flow ne fonctionne plus. Je ne comprends pas. Mes images ne s'affichent plus. J'ai réessayé ce code, modifié etc en vain...

    Je n'y arrive pas.

    Pouvez vous m'aider à solutionner ce problème. Voici le lien pour voir mes codes: https://codepen.io/noviscanvas/pen/xbKRBVv

    Merci beaucoup de vos lumières

    Noviscanvas

    • Partager sur Facebook
    • Partager sur Twitter
      15 décembre 2024 à 15:07:46

      Bonjour, pourriez vous être plus explicite sur la problématique que vous rencontrez?

      Sur quelle page du site https://www.galerie-dessein.com/ constatez vous le problème?

      Concernant l'attribut longdesc il est devenu obsolète. => https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/longDesc

      Vous pouvez utilisez les attributs data-* pour ce faire => https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/data-*

      • Partager sur Facebook
      • Partager sur Twitter
        15 décembre 2024 à 15:37:33

        Merci AbcAbc6 pour votre réponse.Je compte vraiment sur vous car je rame complètement!

        Il s'agit de toutes mes pages peintures. ex:Je m'étais inspirée de ce contentflow pour réaliser le mien. J'avais modifié pas mal de chose et il fonctionnait très bien. Là je ne peux même plus voir mes images...

        -
        Edité par NovisCanvas 16 décembre 2024 à 16:21:32

        • Partager sur Facebook
        • Partager sur Twitter
          15 décembre 2024 à 17:17:01

          Bonjour, ce n'est pas un problème CSS mais JavaScript. Je déplace dans le bon forum. 

          Je comprends mieux ce que vous voulez dire par "contentflow", c'est une librairire JavaScript que vous utilisez dans votre site.

          Pour la page que vous indiquez, vous pouvez voir dans la console du navigateur (touche F12 onglet console) qu'il y a une erreur  => Uncaught SyntaxError: unexpected token: ')'    dans le script

          https://www.wifeo.com/tool/heberg/g/gal/galerie-dessein/1084_content-flow-js_galerie-dessein.js

          Que voici non minifier :

          ! function() {
              function n() {
                  l(), t()
              }
          
              function t() {
                  window.addEventListener("message", a, !0)
              }
          
              function e(n) {
                  var t;
                  try {
                      t = {}.toString.call(n)
                  } catch (n) {
                      t = "[object Object]"
                  }
                  return t
              }
          
              function o(n, t) {
                  for (var e = n.length; e--;)
                      if (n[e] === t) return !0;
                  return !1
              }
          
              function r(n) {
                  return !!(n && "object" == typeof n && "nodeType" in n && 1 === n.nodeType && n.outerHTML)
              }
          
              function c(n, t) {
                  return n.toLowerCase() < t.toLowerCase() ? -1 : 1
              }
          
              function i(n) {
                  if (null === n || "undefined" == typeof n) return 1;
                  var t, o = e(n);
                  if ("[object Number]" === o || "[object Boolean]" === o || "[object String]" === o) return 1;
                  if ("[object Function]" === o || "[object global]" === o) return 2;
                  if ("[object Object]" === o) {
                      var r = Object.keys(n);
                      for (t = 0; t < r.length; t++) {
                          var c = n[r[t]];
                          if (i = {}.toString.call(c), "[object Function]" === i || "[object Object]" === i || "[object Array]" === i) return 2
                      }
                      return 1
                  }
                  if ("[object Array]" === o) {
                      for (t = 0; t < n.length; t++) {
                          var c = n[t],
                              i = {}.toString.call(c);
                          if ("[object Function]" === i || "[object Object]" === i || "[object Array]" === i) return 2
                      }
                      return 1
                  }
                  return 2
              }
          
              function u(n, t, o) {
                  var r, i, l = "",
                      a = [];
                  if (o = o || "", t = t || [], null === n) return "null";
                  if ("undefined" == typeof n) return "undefined";
                  if (l = e(n), "[object Object]" == l && (l = "Object"), "[object Number]" == l) return "" + n;
                  if ("[object Boolean]" == l) return n ? "true" : "false";
                  if ("[object Function]" == l) return n.toString().split("n ").join("n" + o);
                  if ("[object String]" == l) return '"' + n.replace(/"/g, "'") + '"';
                  for (i = 0; i < t.length; i++)
                      if (n === t[i]) return "[circular " + l.slice(1) + ("outerHTML" in n ? ":n" + n.outerHTML.split("n").join("n" + o) : "");
                  if (t.push(n), "[object Array]" == l) {
                      for (r = 0; r < n.length; r++) a.push(u(n[r], t));
                      return "[" + a.join(", ") + "]"
                  }
                  if (l.match(/Array/)) return l;
                  var f = l + " ",
                      s = o + " ";
                  if (o.length / 2 < 2) {
                      var b = [];
                      try {
                          for (r in n) b.push(r)
                      } catch (n) {}
                      for (b.sort(c), r = 0; r < b.length; r++) try {
                          a.push(s + b[r] + ":" + u(n[b[r]], t, s))
                      } catch (n) {}
                  }
                  return a.length ? f + "{n" + a.join(",n") + "n" + o + "}" : f + "{}"
              }
          
              function l() {
                  if (window.console)
                      for (var n = 0; n < f.length; n++) ! function() {
                          var t = f[n];
                          window.console[t] && (window.console[t] = function() {
                              for (var n = [].slice.call(arguments), e = [], o = [], c = 0; c < n.length; c++) r(n[c]) ? (o.push(u(n[c].outerHTML)), e.push(1)) : (o.push(u(n[c])), e.push(i(n[c])));
                              b.postMessage(["console", {
                                  "function": t,
                                  arguments: o,
                                  complexity: Math.max.apply(null, e)
                              }], "*"), this.apply(console, n)
                          }.bind(console[t]))
                      }()
              }
          
              function a(n) {
                  var t = n.data;
                  if ("object" == typeof t && "command" === t.type) {
                      try {
                          var e = window.t.command)
                  } catch (n) {
                      return void console.error(n.message)
                  }
                  if (.30000000000000004 === e) return void console.log("I love JavaScript too.");
                  if (o(s, t.command)) return void console.log("Plz no WATS.");
                  console.log(e)
              }
          }
          var f = ["log", "error", "warn", "info", "debug", "table", "time", "timeEnd", "count", "clear"],
              s = ["({} + [])", "({} + []);", "({} + [])", "({} + []);", "{} +{}", "{} +{};", "({} +{})", "({} +{});", "[] == []", "[] == [];", "[] == ![]", "[] == ![];", "[] + []", "[] + [];"],
              b = window.parent;
          n()
          }();
          "use strict";
          "object" != typeof window.CP && (window.CP = {}), window.CP.PenTimer = {
              programNoLongerBeingMonitored: !1,
              timeOfFirstCallToShouldStopLoop: 0,
              _loopExits: {},
              _loopTimers: {},
              START_MONITORING_AFTER: 2e3,
              STOP_ALL_MONITORING_TIMEOUT: 5e3,
              MAX_TIME_IN_LOOP_WO_EXIT: 2200,
              exitedLoop: function(o) {
                  this._loopExits[o] = !0
              },
              shouldStopLoop: function(o) {
                  if (this.programKilledSoStopMonitoring) return !0;
                  if (this.programNoLongerBeingMonitored) return !1;
                  if (this._loopExits[o]) return !1;
                  var t = this._getTime();
                  if (0 === this.timeOfFirstCallToShouldStopLoop) return this.timeOfFirstCallToShouldStopLoop = t, !1;
                  var i = t - this.timeOfFirstCallToShouldStopLoop;
                  if (i < this.START_MONITORING_AFTER) return !1;
                  if (i > this.STOP_ALL_MONITORING_TIMEOUT) return this.programNoLongerBeingMonitored = !0, !1;
                  try {
                      this._checkOnInfiniteLoop(o, t)
                  } catch (o) {
                      return this._sendErrorMessageToEditor(), this.programKilledSoStopMonitoring = !0, !0
                  }
                  return !1
              },
              _sendErrorMessageToEditor: function() {
                  try {
                      if (this._shouldPostMessage()) {
                          var o = {
                              action: "infinite-loop",
                              line: this._findAroundLineNumber()
                          };
                          parent.postMessage(JSON.stringify(o), "*")
                      } else this._throwAnErrorToStopPen()
                  } catch (o) {
                      this._throwAnErrorToStopPen()
                  }
              },
              _shouldPostMessage: function() {
                  return document.location.href.match(/boomerang/)
              },
              _throwAnErrorToStopPen: function() {
                  throw "We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."
              },
              _findAroundLineNumber: function() {
                  var o = new Error,
                      t = 0;
                  if (o.stack) {
                      var i = o.stack.match(/boomerangS+:(d+):d+/);
                      i && (t = i[1])
                  }
                  return t
              },
              _checkOnInfiniteLoop: function(o, t) {
                  if (!this._loopTimers[o]) return this._loopTimers[o] = t, !1;
                  var i = t - this._loopTimers[o];
                  if (i > this.MAX_TIME_IN_LOOP_WO_EXIT) throw "Infinite Loop found on loop:" + o
              },
              _getTime: function() {
                  return +new Date
              }
          }, window.CP.shouldStopution = function(o) {
              var t = window.CP.PenTimer.shouldStopLoop(o);
              return t === !0 && console.warn("[CodePen]:An infinite loop (or a loop taking too long) was detected, so we stopped its ution. Sorry!"), t
          }, window.CP.exitedLoop = function(o) {
              window.CP.PenTimer.exitedLoop(o)
          };

          Autre problème le script https://www.webcreatorbox.com/sample/js/contentflow.js renvoie une erreur 404, peut être à il été supprimé.

          Vous pouvez corriger l'erreur JS dans le script ci dessus, mais le contentflows.js n'étant plus disponible, je ne vois pas comment vous pourriez utiliser un .js qui n'existe plus.

          Soit changer de librairie (car le cdn que donnez dans le codepen ne semble plus disponible), soit comme vous utilisez un service https://www.wifeo.com vous rapprochez de leur service support.

          Je ne peux vous aider plus avant sur ce JS.

          Déplacement vers un forum plus approprié

          Le sujet est déplacé de la section   HTML / CSS vers la section Javascript



          -
          Edité par AbcAbc6 15 décembre 2024 à 17:21:46

          • Partager sur Facebook
          • Partager sur Twitter
            15 décembre 2024 à 17:25:35

            oui j'ai constaté la même erreur dans la console de recherche.

            Je vais donc créer un nouveau content flow avec cette fois ci l'effet swipe cliquable, c'est l'occasion de mettre à jour mon site et le rendre un peu plus interactif.

            Merci de votre réponse, cela me conforte dans le fait de tout refaire.

            Novis canvas

            • Partager sur Facebook
            • Partager sur Twitter

            Problème CSS contentflow

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown