Remplacer "Agrandir l'image" par une petite loupe
+4
Bad_girls
Mat
lilas
Chamois
8 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 2 sur 2 • Partagez
Page 2 sur 2 • 1, 2
Remplacer "Agrandir l'image" par une petite loupe
Rappel du premier message :
Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://maroc-campingcar.com/
Sur ce forum, au survol d'une image par la souris, il apparaît une petite loupe (disque avec + à l'intérieur) : un clic sur l'image agrandit l'image.
Le survol par la souris, de l'image agrandie, fait apparaître une petite loupe (disque avec -) : un clic sur l'image la ramène à sa taille initiale.
C'est ce que je voudrais créer sur mon forum. Actuellement, figure la mention "Agrandir l'image" que, perso, je ne trouve pas très esthétique (bien que fonctionnelle).
J'avais trouvé sur ce forum, un code à mettre en place pour cela. Je l'ai installé, mais il ne fonctionne pas....
Auriez-vous une solution ???
D'avance, je vous remercie.
Chamois.
Détails techniques
Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://maroc-campingcar.com/
Description du problème
Bonsoir à tous !Sur ce forum, au survol d'une image par la souris, il apparaît une petite loupe (disque avec + à l'intérieur) : un clic sur l'image agrandit l'image.
Le survol par la souris, de l'image agrandie, fait apparaître une petite loupe (disque avec -) : un clic sur l'image la ramène à sa taille initiale.
C'est ce que je voudrais créer sur mon forum. Actuellement, figure la mention "Agrandir l'image" que, perso, je ne trouve pas très esthétique (bien que fonctionnelle).
J'avais trouvé sur ce forum, un code à mettre en place pour cela. Je l'ai installé, mais il ne fonctionne pas....
Auriez-vous une solution ???
D'avance, je vous remercie.
Chamois.
Dernière édition par Chamois le Ven 9 Déc 2016 - 0:12, édité 1 fois
Re: Remplacer "Agrandir l'image" par une petite loupe
En effet, je l'ai enlevé pour le moment.R-max a écrit:cloo >> je ne vois pas le code sur votre forum ?
Je peux le remettre si vous désirez examiner quelque chose, vous le dites...
Re: Remplacer "Agrandir l'image" par une petite loupe
Merci, ça marche pour la version PC mais le problème c'est que les images ne sont plus redimensionné sur la version mobile :
hum , je n'utilise pas la version mobile ...
enlever ce code css pour voir , si le problème est résolu , vous aurez le double affichage , (normal et la loupe )
- Code:
.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*/
}
En effet, je l'ai enlevé pour le moment.
Je peux le remettre si vous désirez examiner quelque chose, vous le dites...
oui vous pouvez ..
Invité- Invité
Re: Remplacer "Agrandir l'image" par une petite loupe
Mea maxima culpa... j'avais oublié que j'avais désactivé les Javascript après avoir testé la déco "Bottes de Noël" sur la page d'Accueil.
Je l'ai réactivé, ça fonctionne bien. Merci!
Par contre... regardez ici, mon post de photos du jardin:
http://accrosjardin.forumactif.ws/t827-d-aout-a-decembre-2016-chez-cloo
Si je clique sur une photo qui est en format 600x800... avec la loupe, elle est redimensionnée à 473px × 651px... donc plus petit!
En fait, mon paramètre de taille max dans le PA est de 1000 px x 800 px. Donc, avec 600 px x 800 px, elle n'est pas redimensionnée du tout dans le post, c'est sa taille originale. Mais je m'attendrais à ce que, en cliquant avec la loupe, on obtienne la même taille, pas une taille plus petite!
Je viens de le tester avec une photo plus grande que 1000x800, ça fonctionne, ça l'affiche en plus grand, mais pas à la taille initiale de la photo... mais c'est déjà bien!
Je l'ai réactivé, ça fonctionne bien. Merci!
Par contre... regardez ici, mon post de photos du jardin:
http://accrosjardin.forumactif.ws/t827-d-aout-a-decembre-2016-chez-cloo
Si je clique sur une photo qui est en format 600x800... avec la loupe, elle est redimensionnée à 473px × 651px... donc plus petit!
En fait, mon paramètre de taille max dans le PA est de 1000 px x 800 px. Donc, avec 600 px x 800 px, elle n'est pas redimensionnée du tout dans le post, c'est sa taille originale. Mais je m'attendrais à ce que, en cliquant avec la loupe, on obtienne la même taille, pas une taille plus petite!
Je viens de le tester avec une photo plus grande que 1000x800, ça fonctionne, ça l'affiche en plus grand, mais pas à la taille initiale de la photo... mais c'est déjà bien!
Re: Remplacer "Agrandir l'image" par une petite loupe
le but de cette outils , comme l'outils d'origine de Forumactif , et de réduire les images dans les postes (gain de place ,moins de scrolling avec le roulette , sujet raccourcie )..et de les agrandir soient au clic soit avec la loupe comme ici , et d'avoir un aperçu en taille réel.
vos images sont très grande resulta >> http://forum-test-r-max.forumactif.org/t17-test-zoom-image#125
avec un réglage de 500x500 dans le PA elle ne s'affiche pas complètement avec le zoom ...
dans le css ont dois pouvoir ajusté pour chaque besoin ..
vos images sont très grande resulta >> http://forum-test-r-max.forumactif.org/t17-test-zoom-image#125
avec un réglage de 500x500 dans le PA elle ne s'affiche pas complètement avec le zoom ...
dans le css ont dois pouvoir ajusté pour chaque besoin ..
Invité- Invité
Re: Remplacer "Agrandir l'image" par une petite loupe
Oui, merci... je vais ajuster la dimension max dans le PA, la réduire un peu.
Re: Remplacer "Agrandir l'image" par une petite loupe
Bonjour juste au passage ne mettez pas le code sur toutes les pages, car sur la version mobile sa enlève le menu de navigation, le code est à mettre dans les sujets et sous forum mais sur toutes les pages
amicalement serge
amicalement serge
Re: Remplacer "Agrandir l'image" par une petite loupe
Il a bien été spécifié plus haut de le mettre uniquement sur les pages des sujets.
Re: Remplacer "Agrandir l'image" par une petite loupe
Oui, oui, pas de problème pour moi... c'était juste suite au message précédent
Re: Remplacer "Agrandir l'image" par une petite loupe
en fait, le code fonctionnait, je ne voyais plus le texte Agrandir l'image mais en cliquant sur l'image, elle s'agrandissait.R-max a écrit:la version n'a rien a voir , c'est toutes version ,
pour Lilas >>
c'est actif sur votre forum , il faut juste mettre le code a jour donné içi https://forum.forumactif.com/t389302-remplacer-agrandir-l-image-par-une-petite-loupe#3269592
J'ai pu la refermer avec la petite croix.
Je m'attendais à voir une loupe au dessus de l'image pour indiquer qu'il était possible de l'agrandir...
Étant sous Internet Explorer, je ne vois pas les loupes.
Par contre, je les vois sous Firefox et Chrome.
Donc OK pour moi et un gros merci R-Max pour votre boulot.
Re: Remplacer "Agrandir l'image" par une petite loupe
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 » |
Re: Remplacer "Agrandir l'image" par une petite loupe
Bonjour à tous.
Voici les dernières news...
J'ai dû désactiver ce JS (loupe) qui semait la perturbation dans les liens sur images qui ne fonctionnaient plus !!
Tout comme, d'ailleurs, le JS permettant de limiter automatiquement le nombre d'images/messages.
Il y a manifestement un conflit entre ces JS et les liens sur images.....
Voir ce sujet qui en traite : https://forum.forumactif.com/t389536-pb-lie-au-script-limiter-automatiquement-le-nombre-d-images-dans-un-message?highlight=PB+nombre+images
Dommage !
Joyeux Noël à tous ! :Noel:
Voici les dernières news...
J'ai dû désactiver ce JS (loupe) qui semait la perturbation dans les liens sur images qui ne fonctionnaient plus !!
Tout comme, d'ailleurs, le JS permettant de limiter automatiquement le nombre d'images/messages.
Il y a manifestement un conflit entre ces JS et les liens sur images.....
Voir ce sujet qui en traite : https://forum.forumactif.com/t389536-pb-lie-au-script-limiter-automatiquement-le-nombre-d-images-dans-un-message?highlight=PB+nombre+images
Dommage !
Joyeux Noël à tous ! :Noel:
Re: Remplacer "Agrandir l'image" par une petite loupe
Qu'appelles-tu "liens sur image"?
Pour le moment, c'est installé chez moi, et je n'ai pas eu de retour négatif de la part des membres du forum.
Pour le moment, c'est installé chez moi, et je n'ai pas eu de retour négatif de la part des membres du forum.
Re: Remplacer "Agrandir l'image" par une petite loupe
si les liens sur image ne fonctionne plus remplacé le js par celui ci
il vous faudra alors entouré le lien de l'image directe et de l'entourer de balises comme ceci
- Code:
$(function() {
$('.postbody div img, .postbody .content img, .entry-content img, .post-entry div img').each(function () {
$(this).not('a>img').not('img[src*="/smiles/"]').wrap('<a href="' + $(this).attr('src') + '" class="fa_fancybox"></a>');
});
$(".fa_fancybox").fancybox();
});
/*!
* 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
*
* Copyright 2012 Janis Skarnelis - janis@fancyapps.com
*
*/
/*! 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);
il vous faudra alors entouré le lien de l'image directe et de l'entourer de balises comme ceci
- Code:
[img]image[/img]
Invité- Invité
Re: Remplacer "Agrandir l'image" par une petite loupe
Je me réponds à moi-même... j'ai constaté le problème aujourd'hui. J'ai installé le nouveau script donné par R-max ci-dessus, et ça fonctionne bien!Cloo a écrit:Qu'appelles-tu "liens sur image"?
Pour le moment, c'est installé chez moi, et je n'ai pas eu de retour négatif de la part des membres du forum.
Merci, R-max!
Re: Remplacer "Agrandir l'image" par une petite loupe
Le code marche, mais il fait disparaitre le menu sur la version mobile
Re: Remplacer "Agrandir l'image" par une petite loupe
celui que j'ai donné en derniers et le code fournie par FA..( l'original)
la je peut rien pour vous..
la je peut rien pour vous..
Invité- Invité
Re: Remplacer "Agrandir l'image" par une petite loupe
Bonjour R-max.
Chez moi, cela ne fonctionne pas...
J'ai dû faire une erreur !
En tout cas, merci pour cette nouvelle proposition.
Bonne année 2017 !
Chez moi, cela ne fonctionne pas...
J'ai dû faire une erreur !
En tout cas, merci pour cette nouvelle proposition.
Bonne année 2017 !
Re: Remplacer "Agrandir l'image" par une petite loupe
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 » |
Re: Remplacer "Agrandir l'image" par une petite loupe
Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses des différents intervenants. |
Page 2 sur 2 • 1, 2
Sujets similaires
» Agrandir titre d'un sous-forum et/ou le remplacer par une image
» titre qui depasse sur limage du sujet
» problème de l`apparence de limage dans votre Annuaire F.A
» Page d'acceuil ..façon loupe
» Image coulissante sur les descriptions: qu'ai-je loupé ? :p
» titre qui depasse sur limage du sujet
» problème de l`apparence de limage dans votre Annuaire F.A
» Page d'acceuil ..façon loupe
» Image coulissante sur les descriptions: qu'ai-je loupé ? :p
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 2 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum