Loupe sur image et Lien sur image cliquable : PB

[Roza]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous.

Afin d'avoir comme ce forum, la petite loupe qui apparaît au survol des images et qui permet de les afficher à leur taille réelle (si ce n'est pas le cas), j'ai mis en place  2 codes trouvés sur ce forum.

Si le résultat est OK pour les images avec la présence de la loupe active, un PB apparaît pour les liens sur images cliquables, liens qui ne fonctionnent plus...
Le lien est ignoré, c'est la fonction loupe qui prend le dessus.

Y aurait-il un moyen de palier ce désagrément ?

Merci d'avance pour votre aide !

PS : impossible d'insérer les codes dans ce message, je les mettrai dans le suivant.

[Roza]

Voici donc les codes (Pour pouvoir les poster, j'ai dû supprimer une adresse email présente dans un des codes... ???) :

- JS sur les sujets :

Code:

$(function() {
  $('.postbody div img, .postbody .content img, .entry-content img, .post-entry div img').each(function () {
      $(this).not('.img-R_max').not('img[src*="/smiles/"]').wrap('<a href="' + $(this).attr('src') + '" class="fa_fancybox"></a>');
  });    
  $(".fa_fancybox").fancybox();
});
$('.fancybox-image').live('click',function(){
    $.fancybox.close();
    return false;
});

/*!
 * fancyBox - jQuery Plugin
 * version: 2.0.6 (16/04/2012)
 * @requires jQuery v1.6 or later
 *
 * Examples at http://fancyapps.com/fancybox/
 * License: www.fancyapps.com/fancybox/#license
 */

/*! fancyBox v2.0.6 fancyapps.com | fancyapps.com/fancybox/#license */
(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:400,height:200,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:

 /*zoom image revue par R_max*/
/**modif ont efface agrandir cette image**/
.resizebox {
    background-color: #369ffc;
    border: 3px solid #f2f2f2;
    cursor: default;
    display: block;
    line-height: 1.1em;
    margin: 0;
    max-width: 100%;
    padding-top: 15px;
    text-align: center;
  display:none;/**ont efface le redimentionnement de l'image voir a sa taille reel*/
}
 
/** zoom**/
a.fa_fancybox img{
   cursor: pointer;
   cursor: -webkit-zoom-in;
   cursor: -moz-zoom-in;
}
/* 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;
}
 
.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;
  /***/
  max-width: 95%;
    max-height: 100%;
    top: 50px;
}
 
.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: 97%;
   max-height: 100%;
      cursor: pointer;
   cursor: -webkit-zoom-out!important;
   cursor: -moz-zoom-out!important;
}
 
#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);
}
 

J'ai donc dû les supprimer... car les liens sur images cliquables ne fonctionnaient plus.

[Roza]

Up....

[Roza]

Bonjour à tous.

Voici un exemple de mon PB, ici :

Code:

<a href="https://forum.forumactif.com/f74-probleme-avec-un-script-un-code" target=_"blank" title="Clic G pour accéder à la rubrique Problème avec un code, un script"><img src="https://i.servimg.com/u/f93/20/05/25/84/2020-027.png" /></a>

<a href="https://forum.forumactif.com/f74-probleme-avec-un-script-un-code" target=_"blank" title="Clic G pour accéder a rubrique Problème avec un code, un script"><img src="https://i.servimg.com/u/f93/20/05/25/84/2020-027.png" /></a>


Hélas, ce code HTML de lien sur image cliquable, ne s'affiche pas sur ce forum...  alors qu'il s'affiche et fonctionne sur le mien.

Quelqu'un aurait-il une idée ?
Merci ...

[Roza]

Up !

[Roza]

Up....

[Roza]

Up !

[Invité]

Hello Roza,
le code HTML sur les messages ici ne fonctionne pas , c'est purement désactivé .
Ensuite, le script agit sur toutes les images sauf les smileys natifs.

Si tu désires bloquer l'effet sur le code html suivant:

Code:

<a href="https://forum.forumactif.com/f74-probleme-avec-un-script-un-code" target=_"blank" title="Clic G pour accéder à la rubrique Problème avec un code, un script"><img src="https://i.servimg.com/u/f93/20/05/25/84/2020-027.png" /></a>

Il faut ajouter une class "M14_not_resize" à l'image:

Code:

<a href="https://forum.forumactif.com/f74-probleme-avec-un-script-un-code" target=_"blank" title="Clic G pour accéder à la rubrique Problème avec un code, un script"><img src="https://i.servimg.com/u/f93/20/05/25/84/2020-027.png" class="M14_not_resize" /></a>


Puis on dit au script de ne pas prendre en compte les images ayant la class:
"M14_not_resize"


Remplaces donc dans un message le code html donné et édites ton script et
remplaces tout le contenu par celui-ci:

Code:


$(function () {
 
var getFancy = function () {
  $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
  $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
    $.fancybox.defaults.hideScrollbar = false;
  });
  getFancy = function () {};
};
var contents = $('.content');
contents.find('img').not('.M14_not_resize').css({maxWidth:'100%'}).load(function () {
if (100 < this.naturalWidth || 100 < this.naturalHeight) {
$(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
    
    getFancy();
  }
}).load();
  
 
 
});


La CSS mentionnée dans ton message ne sera plus nécessaire.
a++

[Roza]

Bonjour Milouze14.

Merci de t'intéresser à nouveau à un de mes PB !

Je regarde ça de plus près et je reviens vers toi.

En tout cas, quel que soit le résultat, merci à toi.

[Roza]

Me revoilà...

J'ai fait exactement ce que tu m'as indiqué :
1- supprimé la CSS correspondante
2- remplacé l'ancien JS par celui que tu m'as donné
3- ajouté class="M14_not_resize"  dans les codes HTML des images cliquables.

Résultat : les liens sur images cliquables fonctionnent parfaitement, les images dont la taille est limitée (700 px X 600 px) apparaissent à leur taille originale par clic G sur celles-ci.
C'est exactement ce que je souhaitais !  
A noter que la façon dont elles s'affichent est sympa.

Cependant, il reste encore un petit quelque chose à rectifier, si c'est possible : il y a toujours  ceci qui apparaît pour les images dont la taille est supérieure à la norme Maxi fixée :

Je trouve que ce n'est pas très esthétique.
Je souhaiterais donc que cela disparaisse et soit remplacé, au survol de l'image, lorsque c'est le cas, par la petite loupe comme cela se passe sur ce forum ou mieux encore, par une infobulle personnalisée.

D'avance merciiiiiiiiiiiiiiiii !

[Invité]

Re,
remplacer ce sera assez compliqué dans l'ensemble, mais pour le masquer, tu peux ajouter ceci dans ta feuille de style:

Code:

.resizebox
{
background-color: transparent!important;
font-size:0px!important;
}

Edit:

tu peux mettre un texte de remplacement avec ce style:

Code:

.resizebox:before
{
content:"Image réduite" ;
 color:black!important;
  font-size:13px!important;
      height: 20px;
    line-height: 20px;
        margin-left: 3%;
    background-color: orange;
    width: 97%;
    display: inline-block;
    text-align: center;
    padding: 2px 0px 2px 0px;


}


a++

[Roza]

Merci Milouze14 !

Ca marche !!! Ce bandeau a bien disparu.

Mais maintenant, quand je clique sur l'image, elle apparaît à sa taille réelle, dans un nouvel onglet "Servimg", avec toutes les infos sur l'image.
Je préférais nettement l'affichage précédent (comme sur ton forum) ! C'est beaucoup plus sympa.

En ce qui concerne la petite loupe, je ne fais pas une fixation  
Une infobulle au survol, ce serait super.
Mais si c'est trop compliqué, on laisse tomber.

[Invité]

Re,
on ne touche à rien avec le style(que j'ai donné plus haut sur mon message (d'ailleurs édité) et amélioré).

Pour la petite loupe, tu peux ajouter ceci dans ta feuille de style:

Code:

.postbody .content img:hover
{
    cursor: pointer;
   cursor: -webkit-zoom-in;
   cursor: -moz-zoom-in;
  
}

Edit, remplaces le script pour l'infobulle par celui-ci:

Code:

$(function () {
var getFancy = function () {
  $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
  $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
    $.fancybox.defaults.hideScrollbar = false;
  });
  getFancy = function () {};
};
  //ON AFFICHE UNE INFOBULLE AU SURVOL
var information="Cliquer pour afficher";
var contents = $('.content');
contents.find('img').not('.M14_not_resize').attr('title',information).css({maxWidth:'100%'}).load(function () {
if (100 < this.naturalWidth || 100 < this.naturalHeight) {

$(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
   
    getFancy();
  }
}).load();
 
 
 
});

Il suffit de remplacer le texte de l'infobulle dans le script ici entre les parenthèses:

Code:

  //ON AFFICHE UNE INFOBULLE AU SURVOL
var information="Cliquer pour afficher";

a++

[Roza]

Super, tout fonctionne au poil !!!

En fait, je viens de m'apercevoir, que c'est dans le message prévisualisé, que l'image à la taille réelle s'affiche dans un autre onglet !
Une fois le message posté, tout est nickel et avec la petite loupe !!!

Merci beaucoup à toi.
A bientôt...

Edit : je vais essayer avec l'infobulle et ensuite, je choisirai entre les deux...

[Invité]

Re,
de rien Roza .
Les deux sont compatibles .

a++

[Roza]

Ah.... OK !

Merci et à demain pour le résultat !

Bonne nuit !

[Roza]

Je n'ai pas pu attendre à demain, trop pressée de voir le résultat.
C'est SUPER !
Il y a à la fois la petite loupe et l'infobulle !!!

Allez, encore un petit détail... Oui, je sais j'abuse de ta patience !!! Excuse-moi !
Mais quand on a affaire à un PRO, on en profite  

Serait-il possible que la loupe et l'infobulle apparaissent au survol, exclusivement dans le cas où la taille de l'image a été réduite (car taille Maxi configurée) ?
Pour le moment les deux apparaissent, même si la taille de l'image n'a pas été réduite. Ce qui ne sert à rien, dans ce cas-là.

Merciiiiiiiiiiiii !

[Invité]

Hello Roza,

Serait-il possible que la loupe et l'infobulle apparaissent au survol, exclusivement dans le cas où la taille de l'image a été réduite (car taille Maxi configurée) ?

Par l'effet du script oui, par contre .

Change le script ainsi:

Code:

$(function () {
var getFancy = function () {
  $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
  $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
    $.fancybox.defaults.hideScrollbar = false;
  });
  getFancy = function () {};
};
var information="Cliquer pour afficher";
var contents = $('.content');
contents.find('img').not('.M14_not_resize').css({maxWidth:'100%'}).load(function () {
if (100 < this.naturalWidth || 100 < this.naturalHeight) {

$(this).addClass('M14_cursor').attr('title',information).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
   
    getFancy();
  }
}).load();
 
 
 
});

Puis modifier le style:

Code:

.postbody .content img:hover
{
    cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
 
}

Par:

Code:

.postbody .content img.M14_cursor:hover
{
    cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
 
}

a++

[Roza]

Bonjour Milouze14 !

On progresse !

J'ai modifié le JS et la CSS comme tu l'as indiqué ci-dessus.

Résultat : il n'y a que pour les images cliquables (donc avec liens) que la loupe n'apparait plus et c'est absolument parfait ainsi.
Rien à changer en ce qui les concerne

Par contre, cela ne change rien pour les images disons, "ordinaires" (sans lien):  la loupe et l'infobulle associée à la loupe, apparaissent au survol, même si la taille de l'image ne peut pas être agrandie (= lorsque la taille réelle de l'image est inférieure ou égale à la norme maxi fixée).

Il n'y a pas le feu... Les choses ont déjà beaucoup évolué positivement !
Prends ton temps et passe d'abord un bon dimanche.

[Invité]

Re,
hum je crois que tu n'as pas saisi la fonction du script Roza.
Il a pour but de donner l'effet sur toutes les images. Donc difficile de filtrer tout cela.
Bon dimanche à toi également.
a++

[Roza]

Bonjour !

hum je crois que tu n'as pas saisi la fonction du script Roza.

C'est certain  !!
Car je n'y comprends pas grand-chose à tous ces "langages"... Désolée !

Vu que, avant les modifications, ceci ...

... n'apparaissait que pour les images qui pouvaient être agrandies et pas pour les autres, je pensais, bêtement, que ce serait possible pour la petite loupe et l'infobulle qui va avec.

Mais bon, c'est déjà bien comme ça et je ferai avec.

En tout cas, merci beaucoup à toi.
Bonne journée.