Agrandir une image redimensionnée

[R.P. Gryphus]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://forum.forumactif.com

Description du problème

Bonjour!

À mon tour de demander l'assistance de la communauté.

J'ai cherché pour l'astuce qui expliquait comment permettre de cliquer sur une photo redimensionnée pour l'agrandir à sa taille originale, mais je ne l'ai pas trouvé.

Voici un exemple :



Merci de votre aide!

[R.P. Gryphus]

Un admin ou un modérateur de FdF pourrait-il m'instruire quant aux codes et scripts utilisés pour produire l'effet que je cherche à implémenter sur mon forum? Un petit coup d'oeil dans vos templates ou vos scripts?

[R.P. Gryphus]

Quelqu'un, s'il vous plait?

[creange]

Bonjour R.P.Gryphus

tu peux  ce js  que j'ai mis dans mes modules  sur l'index et les sujets

Code:

//Recherche des image dans le contenu
$(function(){
$('.postbody .content').find('img').addClass('M14_Resize').attr
("onclick","window.open(this.src);return false").attr("title","Cliquez pour voir l'image dans sa totalité");
//Suppression de la class sur les smileys
$('img[longdesc]').removeClass().removeAttr('onclick');
});
//On entoure l image pour donner une apparence optionnel
$(function(){
$('img.M14_Resize').wrap('<span id="M14_Resize"></span>');
});

et tu peux rajouter ce code dans ton css

Code:


      /***DEBUT du code faire AGRANDIR L'IMAGE***/
        .postbody .content img {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        }
        .postbody .content img:hover {
        -webkit-transform:scale(1.6);
        -moz-transform:scale(1.6);
          -ms-transform:scale(1.6);
        -o-transform:scale(1.6);
        transform:scale(1.6);
        }
        /***FIN du code faire AGRANDIR L'IMAGE***/

pour juste zoomer sur l'image

je ne sais pas si ça fonctionne sur la version ModerBB mais tu peux toujours essayer

[R.P. Gryphus]

En effet sur 'AwesomeBB' ta proposition ne fonctionnerait pas exactement telle que présentée. Il faudrait changer .postbody et .content en .post-body et .post-content. Et j'ai essayé ta proposition et t'en remercie, elle fonctionne, mais je tiens vraiment à implémenter la fonction identique à celle de Forumactif.

[chattigre]

Bonjour,

Que recherchez-vous spécifiquement dans le code présent ici ? Il n'est pas forcément possible de copier les personnalisations de ce forum d'entraide.

Bonne journée
Cordialement

[R.P. Gryphus]

Je cherche à intégrer la même fonctionnalité pour agrandir les images qui sont automatiquement redimensionnées. Je donne un exemple dans le premier message de ce sujet. La largeur de l'image est de 1000px, mais avec le BBCode je l'ai redimendionné à 400px. Comme vous pourrez le constater, parce que l'image a été redimensionnée, il est possible de cliquer dessus et la voir dans sa taille originale. C'est un effet qui peut aussi être observé sur le forum PUB RPG Design (l'effet est même identique je pense).

[R.P. Gryphus]

Bon, maintenant j'utilise un script signé 'FancyBox', mais j'ai un petit souci que j'arrive pas à résoudre par moi-même après moults tentatives. Si vous visitez ce lien, vous verrez dans le troisième message mes images tests. J'aurais préféré que l'image, lorsqu'on clique dessus, apparaisse simplement sans aucune animation. Le 'fade in' est amplement suffisant. Or, dans mon cas, l'image semble faire son apparition à la gauche de l'écran avant de se centrer dans l'écran. J'ai essayer d'enlever ou remplacer les valeurs telles que 'elastic' ou encore '+=200px' par d'autres valeurs telles que 'fade' et '0px'. Rien n'y fait.

Voici mon Javascript suivi de mon CSS :

Javascript

Code:

$(function() {
    $('.post-body div img, .post .post-content img, #preview img')
        .filter('[width],[height],[style*="width"],[style*="height"]')
        .each(function() {
            $(this).not('a>img').not('img[src*="/smiles/"]').wrap('<a href="' + $(this).attr('src') + '" class="fa_fancybox"></a>')
        });
    $(".fa_fancybox").fancybox()
});
(function(s, l, d, t) {
  var m = d(s)
    , q = d(l)
    , a = d.fancybox = function() {
    a.open.apply(this, arguments)
  }
    , u = !1
    , k = l.createTouch !== t
    , o = function(a) {
    return "string" === d.type(a)
  }
    , n = function(b, c) {
    c && o(b) && 0 < b.indexOf("%") && (b = a.getViewport()[c] / 100 * parseInt(b, 10));
    return Math.round(b) + "px"
  };
  d.extend(a, {
    version: "2.0.5",
    defaults: {
      padding: 15,
      margin: 20,
      width: 800,
      height: 600,
      minWidth: 100,
      minHeight: 100,
      maxWidth: 9999,
      maxHeight: 9999,
      autoSize: !0,
      autoResize: !k,
      autoCenter: !k,
      fitToView: !0,
      aspectRatio: !1,
      topRatio: 0.5,
      fixed: !1,
      scrolling: "auto",
      wrapCSS: "",
      arrows: !0,
      closeBtn: !0,
      closeClick: !1,
      nextClick: !1,
      mouseWheel: !0,
      autoPlay: !1,
      playSpeed: 3E3,
      preload: 3,
      modal: !1,
      loop: !0,
      ajax: {
        dataType: "html",
        headers: {
          "X-fancyBox": !0
        }
      },
      keys: {
        next: [13, 32, 34, 39, 40],
        prev: [8, 33, 37, 38],
        close: [27]
      },
      tpl: {
        wrap: '<div class="fancybox-wrap"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
        image: '<img class="fancybox-image" src="{href}" alt="" />',
        iframe: '<iframe class="fancybox-iframe" name="fancybox-frame{rnd}" frameborder="0" hspace="0"' + (d.browser.msie ? ' allowtransparency="true"' : "") + "></iframe>",
        swf: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"><param name="wmode" value="transparent" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{href}" /><embed src="{href}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%" wmode="transparent"></embed></object>',
        error: '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
        closeBtn: '<div title="Close" class="fancybox-item fancybox-close"></div>',
        next: '<a title="Next" class="fancybox-nav fancybox-next"><span></span></a>',
        prev: '<a title="Previous" class="fancybox-nav fancybox-prev"><span></span></a>'
      },
      openEffect: "fade",
      openSpeed: 300,
      openEasing: "swing",
      openOpacity: !0,
      openMethod: "zoomIn",
      closeEffect: "fade",
      closeSpeed: 300,
      closeEasing: "swing",
      closeOpacity: !0,
      closeMethod: "zoomOut",
      nextEffect: "elastic",
      nextSpeed: 300,
      nextEasing: "swing",
      nextMethod: "changeIn",
      prevEffect: "elastic",
      prevSpeed: 300,
      prevEasing: "swing",
      prevMethod: "changeOut",
      helpers: {
        overlay: {
          speedIn: 0,
          speedOut: 300,
          opacity: 0.8,
          css: {
            cursor: "pointer"
          },
          closeClick: !0
        },
        title: {
          type: "float"
        }
      }
    },
    group: {},
    opts: {},
    coming: null,
    current: null,
    isOpen: !1,
    isOpened: !1,
    player: {
      timer: null,
      isActive: !1
    },
    ajaxLoad: null,
    imgPreload: null,
    transitions: {},
    helpers: {},
    open: function(b, c) {
      a.close(!0);
      b && !d.isArray(b) && (b = b instanceof d ? d(b).get() : [b]);
      a.isActive = !0;
      a.opts = d.extend(!0, {}, a.defaults, c);
      d.isPlainObject(c) && c.keys !== t && (a.opts.keys = c.keys ? d.extend({}, a.defaults.keys, c.keys) : !1);
      a.group = b;
      a._start(a.opts.index || 0)
    },
    cancel: function() {
      a.coming && !1 === a.trigger("onCancel") || (a.coming = null,
      a.hideLoading(),
      a.ajaxLoad && a.ajaxLoad.abort(),
      a.ajaxLoad = null,
      a.imgPreload && (a.imgPreload.onload = a.imgPreload.onabort = a.imgPreload.onerror = null))
    },
    close: function(b) {
      a.cancel();
      a.current && !1 !== a.trigger("beforeClose") && (a.unbindEvents(),
      !a.isOpen || b && !0 === b[0] ? (d(".fancybox-wrap").stop().trigger("onReset").remove(),
      a._afterZoomOut()) : (a.isOpen = a.isOpened = !1,
      d(".fancybox-item, .fancybox-nav").remove(),
      a.wrap.stop(!0).removeClass("fancybox-opened"),
      a.inner.css("overflow", "hidden"),
      a.transitions[a.current.closeMethod]()))
    },
    play: function(b) {
      var c = function() {
        clearTimeout(a.player.timer)
      }
        , e = function() {
        c();
        a.current && a.player.isActive && (a.player.timer = setTimeout(a.next, a.current.playSpeed))
      }
        , f = function() {
        c();
        d("body").unbind(".player");
        a.player.isActive = !1;
        a.trigger("onPlayEnd")
      };
      if (a.player.isActive || b && !1 === b[0])
        f();
      else if (a.current && (a.current.loop || a.current.index < a.group.length - 1))
        a.player.isActive = !0,
        d("body").bind({
          "afterShow.player onUpdate.player": e,
          "onCancel.player beforeClose.player": f,
          "beforeLoad.player": c
        }),
        e(),
        a.trigger("onPlayStart")
    },
    next: function() {
      a.current && a.jumpto(a.current.index + 1)
    },
    prev: function() {
      a.current && a.jumpto(a.current.index - 1)
    },
    jumpto: function(b) {
      a.current && (b = parseInt(b, 10),
      1 < a.group.length && a.current.loop && (b >= a.group.length ? b = 0 : 0 > b && (b = a.group.length - 1)),
      a.group[b] !== t && (a.cancel(),
      a._start(b)))
    },
    reposition: function(b, c) {
      var e;
      a.isOpen && (e = a._getPosition(c),
      b && "scroll" === b.type ? (delete e.position,
      a.wrap.stop(!0, !0).animate(e, 200)) : a.wrap.css(e))
    },
    update: function(b) {
      a.isOpen && (u || setTimeout(function() {
        var c = a.current
          , e = !b || b && "orientationchange" === b.type;
        if (u && (u = !1,
        c)) {
          if (!b || "scroll" !== b.type || e)
            c.autoSize && "iframe" !== c.type && (a.inner.height("auto"),
            c.height = a.inner.height()),
            (c.autoResize || e) && a._setDimension(),
            c.canGrow && "iframe" !== c.type && a.inner.height("auto");
          (c.autoCenter || e) && a.reposition(b);
          a.trigger("onUpdate")
        }
      }, 200),
      u = !0)
    },
    toggle: function() {
      a.isOpen && (a.current.fitToView = !a.current.fitToView,
      a.update())
    },
    hideLoading: function() {
      q.unbind("keypress.fb");
      d("#fancybox-loading").remove()
    },
    showLoading: function() {
      a.hideLoading();
      q.bind("keypress.fb", function(b) {
        27 === b.keyCode && (b.preventDefault(),
        a.cancel())
      });
      d('<div id="fancybox-loading"><div></div></div>').click(a.cancel).appendTo("body")
    },
    getViewport: function() {
      return {
        x: m.scrollLeft(),
        y: m.scrollTop(),
        w: k && s.innerWidth ? s.innerWidth : m.width(),
        h: k && s.innerHeight ? s.innerHeight : m.height()
      }
    },
    unbindEvents: function() {
      a.wrap && a.wrap.unbind(".fb");
      q.unbind(".fb");
      m.unbind(".fb")
    },
    bindEvents: function() {
      var b = a.current
        , c = b.keys;
      b && (m.bind("resize.fb orientationchange.fb" + (b.autoCenter && !b.fixed ? " scroll.fb" : ""), a.update),
      c && q.bind("keydown.fb", function(b) {
        var f;
        f = b.target || b.srcElement;
        if (!b.ctrlKey && !b.altKey && !b.shiftKey && !b.metaKey && (!f || !f.type && !d(f).is("[contenteditable]")))
          f = b.keyCode,
          -1 < d.inArray(f, c.close) ? (a.close(),
          b.preventDefault()) : -1 < d.inArray(f, c.next) ? (a.next(),
          b.preventDefault()) : -1 < d.inArray(f, c.prev) && (a.prev(),
          b.preventDefault())
      }),
      d.fn.mousewheel && b.mouseWheel && 1 < a.group.length && a.wrap.bind("mousewheel.fb", function(b, c) {
        var d = b.target || null;
        if (0 !== c && (!d || 0 === d.clientHeight || d.scrollHeight === d.clientHeight && d.scrollWidth === d.clientWidth))
          b.preventDefault(),
          a[0 < c ? "prev" : "next"]()
      }))
    },
    trigger: function(b, c) {
      var e, f = c || a[-1 < d.inArray(b, ["onCancel", "beforeLoad", "afterLoad"]) ? "coming" : "current"];
      if (f) {
        d.isFunction(f[b]) && (e = f[b].apply(f, Array.prototype.slice.call(arguments, 1)));
        if (!1 === e)
          return !1;
        f.helpers && d.each(f.helpers, function(c, e) {
          if (e && d.isPlainObject(a.helpers[c]) && d.isFunction(a.helpers[c][b]))
            a.helpers[c][b](e, f)
        });
        d.event.trigger(b + ".fb")
      }
    },
    isImage: function(a) {
      return o(a) && a.match(/\.(jpe?g|gif|png|bmp)((\?|#).*)?$/i)
    },
    isSWF: function(a) {
      return o(a) && a.match(/\.(swf)((\?|#).*)?$/i)
    },
    _start: function(b) {
      var c = {}, e = a.group[b] || null, f, g, i;
      if (e && (e.nodeType || e instanceof d))
        f = !0,
        d.metadata && (c = d(e).metadata());
      c = d.extend(!0, {}, a.opts, {
        index: b,
        element: e
      }, d.isPlainObject(e) ? e : c);
      d.each(["href", "title", "content", "type"], function(b, g) {
        c[g] = a.opts[g] || f && d(e).attr(g) || c[g] || null
      });
      "number" === typeof c.margin && (c.margin = [c.margin, c.margin, c.margin, c.margin]);
      c.modal && d.extend(!0, c, {
        closeBtn: !1,
        closeClick: !1,
        nextClick: !1,
        arrows: !1,
        mouseWheel: !1,
        keys: null,
        helpers: {
          overlay: {
            css: {
              cursor: "auto"
            },
            closeClick: !1
          }
        }
      });
      a.coming = c;
      if (!1 === a.trigger("beforeLoad"))
        a.coming = null;
      else {
        g = c.type;
        b = c.href || e;
        g || (f && (g = d(e).data("fancybox-type"),
        g || (g = (g = e.className.match(/fancybox\.(\w+)/)) ? g[1] : null)),
        !g && o(b) && (a.isImage(b) ? g = "image" : a.isSWF(b) ? g = "swf" : b.match(/^#/) && (g = "inline")),
        g || (g = f ? "inline" : "html"),
        c.type = g);
        if ("inline" === g || "html" === g) {
          if (c.content || (c.content = "inline" === g ? d(o(b) ? b.replace(/.*(?=#[^\s]+$)/, "") : b) : e),
          !c.content || !c.content.length)
            g = null
        } else
          b || (g = null);
        "ajax" === g && o(b) && (i = b.split(/\s+/, 2),
        b = i.shift(),
        c.selector = i.shift());
        c.href = b;
        c.group = a.group;
        c.isDom = f;
        switch (g) {
        case "image":
          a._loadImage();
          break;
        case "ajax":
          a._loadAjax();
          break;
        case "inline":
        case "iframe":
        case "swf":
        case "html":
          a._afterLoad();
          break;
        default:
          a._error("type")
        }
      }
    },
    _error: function(b) {
      a.hideLoading();
      d.extend(a.coming, {
        type: "html",
        autoSize: !0,
        minWidth: 0,
        minHeight: 0,
        padding: 15,
        hasError: b,
        content: a.coming.tpl.error
      });
      a._afterLoad()
    },
    _loadImage: function() {
      var b = a.imgPreload = new Image;
      b.onload = function() {
        this.onload = this.onerror = null;
        a.coming.width = this.width;
        a.coming.height = this.height;
        a._afterLoad()
      }
      ;
      b.onerror = function() {
        this.onload = this.onerror = null;
        a._error("image")
      }
      ;
      b.src = a.coming.href;
      (b.complete === t || !b.complete) && a.showLoading()
    },
    _loadAjax: function() {
      a.showLoading();
      a.ajaxLoad = d.ajax(d.extend({}, a.coming.ajax, {
        url: a.coming.href,
        error: function(b, c) {
          a.coming && "abort" !== c ? a._error("ajax", b) : a.hideLoading()
        },
        success: function(b, c) {
          "success" === c && (a.coming.content = b,
          a._afterLoad())
        }
      }))
    },
    _preloadImages: function() {
      var b = a.group, c = a.current, e = b.length, f, g, i, h = Math.min(c.preload, e - 1);
      if (c.preload && !(2 > b.length))
        for (i = 1; i <= h; i += 1)
          if (f = b[(c.index + i) % e],
          g = f.href || d(f).attr("href") || f,
          "image" === f.type || a.isImage(g))
            (new Image).src = g
    },
    _afterLoad: function() {
      a.hideLoading();
      !a.coming || !1 === a.trigger("afterLoad", a.current) ? a.coming = !1 : (a.isOpened ? (d(".fancybox-item, .fancybox-nav").remove(),
      a.wrap.stop(!0).removeClass("fancybox-opened"),
      a.inner.css("overflow", "hidden"),
      a.transitions[a.current.prevMethod]()) : (d(".fancybox-wrap").stop().trigger("onReset").remove(),
      a.trigger("afterClose")),
      a.unbindEvents(),
      a.isOpen = !1,
      a.current = a.coming,
      a.wrap = d(a.current.tpl.wrap).addClass("fancybox-" + (k ? "mobile" : "desktop") + " fancybox-type-" + a.current.type + " fancybox-tmp " + a.current.wrapCSS).appendTo("body"),
      a.skin = d(".fancybox-skin", a.wrap).css("padding", n(a.current.padding)),
      a.outer = d(".fancybox-outer", a.wrap),
      a.inner = d(".fancybox-inner", a.wrap),
      a._setContent())
    },
    _setContent: function() {
      var b = a.current
        , c = b.content
        , e = b.type
        , f = b.minWidth
        , g = b.minHeight
        , i = b.maxWidth
        , h = b.maxHeight;
      switch (e) {
      case "inline":
      case "ajax":
      case "html":
        b.selector ? c = d("<div>").html(c).find(b.selector) : c instanceof d && (c.parent().hasClass("fancybox-inner") && c.parents(".fancybox-wrap").unbind("onReset"),
        c = c.show().detach(),
        d(a.wrap).bind("onReset", function() {
          c.appendTo("body").hide()
        }));
        b.autoSize && (f = d('<div class="fancybox-wrap ' + a.current.wrapCSS + ' fancybox-tmp"></div>').appendTo("body").css({
          minWidth: n(f, "w"),
          minHeight: n(g, "h"),
          maxWidth: n(i, "w"),
          maxHeight: n(h, "h")
        }).append(c),
        b.width = f.width(),
        b.height = f.height(),
        f.width(a.current.width),
        f.height() > b.height && (f.width(b.width + 1),
        b.width = f.width(),
        b.height = f.height()),
        c = f.contents().detach(),
        f.remove());
        break;
      case "image":
        c = b.tpl.image.replace("{href}", b.href);
        b.aspectRatio = !0;
        break;
      case "swf":
        c = b.tpl.swf.replace(/\{width\}/g, b.width).replace(/\{height\}/g, b.height).replace(/\{href\}/g, b.href);
        break;
      case "iframe":
        c = d(b.tpl.iframe.replace("{rnd}", (new Date).getTime())).attr("scrolling", b.scrolling).attr("src", b.href),
        b.scrolling = k ? "scroll" : "auto"
      }
      if ("image" === e || "swf" === e)
        b.autoSize = !1,
        b.scrolling = "visible";
      "iframe" === e && b.autoSize ? (a.showLoading(),
      a._setDimension(),
      a.inner.css("overflow", b.scrolling),
      c.bind({
        onCancel: function() {
          d(this).unbind();
          a._afterZoomOut()
        },
        load: function() {
          a.hideLoading();
          try {
            this.contentWindow.document.location && (a.current.height = d(this).contents().find("body").height())
          } catch (b) {
            a.current.autoSize = !1
          }
          a[a.isOpen ? "_afterZoomIn" : "_beforeShow"]()
        }
      }).appendTo(a.inner)) : (a.inner.append(c),
      a._beforeShow())
    },
    _beforeShow: function() {
      a.coming = null;
      a.trigger("beforeShow");
      a._setDimension();
      a.wrap.hide().removeClass("fancybox-tmp");
      a.bindEvents();
      a._preloadImages();
      a.transitions[a.isOpened ? a.current.nextMethod : a.current.openMethod]()
    },
    _setDimension: function() {
      var b = a.wrap, c = a.inner, e = a.current, f = a.getViewport(), g = e.margin, i = 2 * e.padding, h = e.width, j = e.height, r = e.maxWidth + i, k = e.maxHeight + i, l = e.minWidth + i, m = e.minHeight + i, p;
      f.w -= g[1] + g[3];
      f.h -= g[0] + g[2];
      o(h) && 0 < h.indexOf("%") && (h = (f.w - i) * parseFloat(h) / 100);
      o(j) && 0 < j.indexOf("%") && (j = (f.h - i) * parseFloat(j) / 100);
      g = h / j;
      h += i;
      j += i;
      e.fitToView && (r = Math.min(f.w, r),
      k = Math.min(f.h, k));
      if (e.aspectRatio) {
        if (h > r && (h = r,
        j = (h - i) / g + i),
        j > k && (j = k,
        h = (j - i) * g + i),
        h < l && (h = l,
        j = (h - i) / g + i),
        j < m)
          j = m,
          h = (j - i) * g + i
      } else
        h = Math.max(l, Math.min(h, r)),
        j = Math.max(m, Math.min(j, k));
      h = Math.round(h);
      j = Math.round(j);
      d(b.add(c)).width("auto").height("auto");
      c.width(h - i).height(j - i);
      b.width(h);
      p = b.height();
      if (h > r || p > k)
        for (; (h > r || p > k) && h > l && p > m; )
          j -= 10,
          e.aspectRatio ? (h = Math.round((j - i) * g + i),
          h < l && (h = l,
          j = (h - i) / g + i)) : h -= 10,
          c.width(h - i).height(j - i),
          b.width(h),
          p = b.height();
      e.dim = {
        width: n(h),
        height: n(p)
      };
      e.canGrow = e.autoSize && j > m && j < k;
      e.canShrink = !1;
      e.canExpand = !1;
      if (h - i < e.width || j - i < e.height)
        e.canExpand = !0;
      else if ((h > f.w || p > f.h) && h > l && j > m)
        e.canShrink = !0;
      a.innerSpace = p - i - c.height()
    },
    _getPosition: function(b) {
      var c = a.current
        , e = a.getViewport()
        , f = c.margin
        , d = a.wrap.width() + f[1] + f[3]
        , i = a.wrap.height() + f[0] + f[2]
        , h = {
        position: "absolute",
        top: f[0] + e.y,
        left: f[3] + e.x
      };
      c.autoCenter && c.fixed && !b && i <= e.h && d <= e.w && (h = {
        position: "fixed",
        top: f[0],
        left: f[3]
      });
      h.top = n(Math.max(h.top, h.top + (e.h - i) * c.topRatio));
      h.left = n(Math.max(h.left, h.left + 0.5 * (e.w - d)));
      return h
    },
    _afterZoomIn: function() {
      var b = a.current
        , c = b ? b.scrolling : "no";
      if (b && (a.isOpen = a.isOpened = !0,
      a.wrap.addClass("fancybox-opened"),
      a.inner.css("overflow", "yes" === c ? "scroll" : "no" === c ? "hidden" : c),
      a.trigger("afterShow"),
      a.update(),
      (b.closeClick || b.nextClick) && a.inner.css("cursor", "pointer").bind("click.fb", function(c) {
        if (!d(c.target).is("a") && !d(c.target).parent().is("a"))
          a[b.closeClick ? "close" : "next"]()
      }),
      b.closeBtn && d(b.tpl.closeBtn).appendTo(a.skin).bind("click.fb", a.close),
      b.arrows && 1 < a.group.length && ((b.loop || 0 < b.index) && d(b.tpl.prev).appendTo(a.outer).bind("click.fb", a.prev),
      (b.loop || b.index < a.group.length - 1) && d(b.tpl.next).appendTo(a.outer).bind("click.fb", a.next)),
      a.opts.autoPlay && !a.player.isActive))
        a.opts.autoPlay = !1,
        a.play()
    },
    _afterZoomOut: function() {
      var b = a.current;
      a.wrap.trigger("onReset").remove();
      d.extend(a, {
        group: {},
        opts: {},
        current: null,
        isActive: !1,
        isOpened: !1,
        isOpen: !1,
        wrap: null,
        skin: null,
        outer: null,
        inner: null
      });
      a.trigger("afterClose", b)
    }
  });
  a.transitions = {
    getOrigPosition: function() {
      var b = a.current
        , c = b.element
        , e = b.padding
        , f = d(b.orig)
        , g = {}
        , i = 50
        , h = 50;
      !f.length && b.isDom && d(c).is(":visible") && (f = d(c).find("img:first"),
      f.length || (f = d(c)));
      f.length ? (g = f.offset(),
      f.is("img") && (i = f.outerWidth(),
      h = f.outerHeight())) : (b = a.getViewport(),
      g.top = b.y + 0.5 * (b.h - h),
      g.left = b.x + 0.5 * (b.w - i));
      return g = {
        top: n(g.top - e),
        left: n(g.left - e),
        width: n(i + 2 * e),
        height: n(h + 2 * e)
      }
    },
    step: function(b, c) {
      var e = c.prop, d, g;
      if ("width" === e || "height" === e)
        d = Math.ceil(b - 2 * a.current.padding),
        "height" === e && (g = (b - c.start) / (c.end - c.start),
        c.start > c.end && (g = 1 - g),
        d -= a.innerSpace * g),
        a.inner[e](d)
    },
    zoomIn: function() {
      var b = a.wrap
        , c = a.current
        , e = c.openEffect
        , f = "elastic" === e
        , g = d.extend({}, c.dim, a._getPosition(f))
        , i = d.extend({
        opacity: 1
      }, g);
      delete i.position;
      f ? (g = this.getOrigPosition(),
      c.openOpacity && (g.opacity = 0),
      a.outer.add(a.inner).width("auto").height("auto")) : "fade" === e && (g.opacity = 0);
      b.css(g).show().animate(i, {
        duration: "none" === e ? 0 : c.openSpeed,
        easing: c.openEasing,
        step: f ? this.step : null,
        complete: a._afterZoomIn
      })
    },
    zoomOut: function() {
      var b = a.wrap
        , c = a.current
        , d = c.openEffect
        , f = "elastic" === d
        , g = {
        opacity: 0
      };
      f && ("fixed" === b.css("position") && b.css(a._getPosition(!0)),
      g = this.getOrigPosition(),
      c.closeOpacity && (g.opacity = 0));
      b.animate(g, {
        duration: "none" === d ? 0 : c.closeSpeed,
        easing: c.closeEasing,
        step: f ? this.step : null,
        complete: a._afterZoomOut
      })
    },
    changeIn: function() {
      var b = a.wrap
        , c = a.current
        , d = c.nextEffect
        , f = "elastic" === d
        , g = a._getPosition(f)
        , i = {
        opacity: 1
      };
      g.opacity = 0;
      f && (g.top = n(parseInt(g.top, 10) - 200),
      i.top = "+=200px");
      b.css(g).show().animate(i, {
        duration: "none" === d ? 0 : c.nextSpeed,
        easing: c.nextEasing,
        complete: a._afterZoomIn
      })
    },
    changeOut: function() {
      var b = a.wrap
        , c = a.current
        , e = c.prevEffect
        , f = {
        opacity: 0
      };
      b.removeClass("fancybox-opened");
      "elastic" === e && (f.top = "+=200px");
      b.animate(f, {
        duration: "none" === e ? 0 : c.prevSpeed,
        easing: c.prevEasing,
        complete: function() {
          d(this).trigger("onReset").remove()
        }
      })
    }
  };
  a.helpers.overlay = {
    overlay: null,
    update: function() {
      var a, c;
      this.overlay.width("100%").height("100%");
      d.browser.msie || k ? (a = Math.max(l.documentElement.scrollWidth, l.body.scrollWidth),
      c = Math.max(l.documentElement.offsetWidth, l.body.offsetWidth),
      a = a < c ? m.width() : a) : a = q.width();
      this.overlay.width(a).height(q.height())
    },
    beforeShow: function(b) {
      this.overlay || (b = d.extend(!0, {}, a.defaults.helpers.overlay, b),
      this.overlay = d('<div id="fancybox-overlay"></div>').css(b.css).appendTo("body"),
      b.closeClick && this.overlay.bind("click.fb", a.close),
      a.current.fixed && !k ? this.overlay.addClass("overlay-fixed") : (this.update(),
      this.onUpdate = function() {
        this.update()
      }
      ),
      this.overlay.fadeTo(b.speedIn, b.opacity))
    },
    afterClose: function(a) {
      this.overlay && this.overlay.fadeOut(a.speedOut || 0, function() {
        d(this).remove()
      });
      this.overlay = null
    }
  };
  a.helpers.title = {
    beforeShow: function(b) {
      var c;
      if (c = a.current.title)
        c = d('<div class="fancybox-title fancybox-title-' + b.type + '-wrap">' + c + "</div>").appendTo("body"),
        "float" === b.type && (c.width(c.width()),
        c.wrapInner('<span class="child"></span>'),
        a.current.margin[2] += Math.abs(parseInt(c.css("margin-bottom"), 10))),
        c.appendTo("over" === b.type ? a.inner : "outside" === b.type ? a.wrap : a.skin)
    }
  };
  d.fn.fancybox = function(b) {
    var c = d(this), e = this.selector || "", f, g = function(g) {
      var h = this, j = f, k;
      !g.ctrlKey && !g.altKey && !g.shiftKey && !g.metaKey && !d(h).is(".fancybox-wrap") && (g.preventDefault(),
      g = b.groupAttr || "data-fancybox-group",
      k = d(h).attr(g),
      k || (g = "rel",
      k = h[g]),
      k && "" !== k && "nofollow" !== k && (h = e.length ? d(e) : c,
      h = h.filter("[" + g + '="' + k + '"]'),
      j = h.index(this)),
      b.index = j,
      a.open(h, b))
    }, b = b || {};
    f = b.index || 0;
    e ? q.undelegate(e, "click.fb-start").delegate(e, "click.fb-start", g) : c.unbind("click.fb-start").bind("click.fb-start", g);
    return this
  }
  ;
  d(l).ready(function() {
    a.defaults.fixed = d.support.fixedPosition || !(d.browser.msie && 6 >= d.browser.version) && !k
  })
}
)(window, document, jQuery);

CSS

Code:

a.fa_fancybox img {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  max-width: 420px;
}

/* general */
.fancybox-tmp iframe, .fancybox-tmp object {
  vertical-align: top;
  padding: 0;
  margin: 0;
}

.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 920;
  overflow: inherit!important;
}

.fancybox-skin {
  position: relative;
  padding: 0;
  margin: 0;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.fancybox-opened {
  z-index: 930;
}

.fancybox-opened .fancybox-skin {
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
  padding: 0;
  margin: 0;
  position: relative;
  outline: none;
}

.fancybox-inner {
  overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch;
}

.fancybox-error {
  color: #444;
  font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 10px;
}

.fancybox-image, .fancybox-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  vertical-align: top;
}

.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url('https://i.servimg.com/u/f45/17/45/19/77/fancyb10.png');
}

#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 920;
}

#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url('https://i.servimg.com/u/f45/17/45/19/77/fancyb10.gif') center center no-repeat;
}

.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 940;
}

.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  background: transparent url('https://i.servimg.com/u/f45/17/45/19/77/blank10.gif');
  /* helps IE */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  z-index: 940;
}

.fancybox-prev {
  left: 0;
}

.fancybox-next {
  right: 0;
}

.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 940;
  visibility: hidden;
}

.fancybox-prev span {
  left: 20px;
  background-position: 0 -36px;
}

.fancybox-next span {
  right: 20px;
  background-position: 0 -72px;
}

.fancybox-nav:hover span {
  visibility: visible;
}

.fancybox-tmp {
  position: absolute;
  top: -9999px;
  left: -9999px;
  padding: 0;
  overflow: visible;
  visibility: hidden;
}

/* Overlay helper */
#fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 910;
  background: #000;
}

#fancybox-overlay.overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

/* Title helper */
.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 950;
}

.fancybox-opened .fancybox-title {
  visibility: visible;
}

.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 930;
  text-align: center;
}

.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent;
  /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  font-weight: bold;
  line-height: 24px;
  white-space: nowrap;
}

.fancybox-title-outside-wrap {
  position: relative;
  margin-top: 10px;
  color: #fff;
}

.fancybox-title-inside-wrap {
  margin-top: 10px;
}

.fancybox-title-over-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, .8);
}

.fade {
  display: inline-block;
  background: -moz-linear-gradient(left, rgb(238,240,238) 0%, rgba(238,240,238,0) 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgb(238,240,238)), color-stop(1.00, rgba(238,240,238,0)));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#eef0ee, endColorstr=#00eef0ee, GradientType=1);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#eef0ee, endColorstr=#00eef0ee, GradientType=1)";
}

.blur {
  display: inline-block;
  color: #ddd;
  text-shadow: 0 0 2px #aaaaaa;
  text-shadow: 0 0 4px #aaaaaa;
  text-shadow: 0 0 6px #aaaaaa;
  -ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelradius=2)";
  filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=1,direction=310) progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}

.flipH {
  display: inline-block;
  -moz-transform: scale(-1,1);
  -o-transform: scale(-1,1);
  -webkit-transform: scale(-1,1);
  transform: scale(-1,1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix( M11=-1, M12=0, M21=0, M22=1, SizingMethod="auto expand");
}

.flipV {
  display: inline-block;
  -moz-transform: scale(1,-1);
  -o-transform: scale(1,-1);
  -webkit-transform: scale(1,-1);
  transform: scale(1,-1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=-1, SizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=0, M21=0, M22=-1, SizingMethod="auto expand");
}

Si quelqu'un s'y connaissant beaucoup plus que moi pourrait me donner un coup de main, ce serait grandement apprécié!

[Lixyr]

Bonsoir,

Bon, j'ai testé sur votre forum, et le résultat est un peu étrange. Deux solutions, qui concerne la même classe CSS :

Solution 1

.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 920;
overflow: inherit!important;
}

Vous enlevez ce que j'ai barré, ce qui donne :

Code:

.fancybox-wrap {
  position: absolute;
  z-index: 920;
  overflow: inherit!important;
}

Solution 2

Vous mettez une valeur à top et left pour que ça corresponde à peu près :

Code:

.fancybox-wrap {
  position: absolute;
  top: 90px;
  left: 125px;
  z-index: 920;
  overflow: inherit !important;
}

Après, je ne sais pas si ça change quelque chose d'un écran à un autre.

Essayez les deux solutions, bidouillez là où j'ai indiqué, jusqu'à ce que ça vous convienne.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[R.P. Gryphus]

Solution 1

.fancybox-wrap {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 920;
 overflow: inherit!important;
}

Désolé du retard et un grand merci Lixyr, cette solution a résous mon problème! Si simple en plus, moi qui a perdu tant d'heures á chercher dans le script!