Balise ou Bouton

[LADYQUEEN]

bonjours , j'ai une question :
J'aimerais créer un bouton ou une balise "thumb" , comme sur ce forum :



En même temps j'aimerais changer tout les boutons , est-ce possible ?

[LADYQUEEN]

up !^-^

[LADYQUEEN]

2°up!

[LADYQUEEN]

3° !

[LADYQUEEN]

up !
personne pour moi ?

[Threax]

Bonjour,

Nous sommes censés deviner à quoi devrait servir cette balise ?

[LADYQUEEN]

Merci de m'avoir répondu .
La balise thumbnail c'est une balise pour mettre des images en miniature et quand on clic dessus sa s'agrandit .

[LADYQUEEN]

up !

[Threax]

Bonjour,

Vous ne pouvez pas créer de nouvelles balises sur vos forums. Au mieux, vous pouvez généraliser l'effet souhaité à toutes les images supérieures à une certaine dimension, via un script.

[LADYQUEEN]

D'accord , merci de m'avoir répondu THREAX .
je veux bien le scrip , j'aimerais avoir un exemple du script , est-ce possible ?.

[LADYQUEEN]

up

[Wave]

Bonjour,

Dans un autre sujet Etana a fourni deux scripts: https://forum.forumactif.com/t325897-highslide-js-core#2820791

Cordialement

[LADYQUEEN]

Bonjour , j'ai était voir le sujet que tu ma passer .
J'ai mit ce script http://s301826463.onlinehome.fr/fdf/viewtopic.php?pid=33 et ce code de CSS http://s301826463.onlinehome.fr/fdf/viewtopic.php?pid=34 et sa ne fonctionne pas lorsque j'appuie sur mon images dans mes messages .
Pourtant j'ai bien éditer ma template overall_header comme ils disent dans le sujet que tu ma passer . Je voudrais savoir comment sa se fait que sa ne fonctionne pas ?.

[Wave]

Bonjour,

L'image est-elle supérieure à 500 px de hauteur ou largeur ?

Cordialement

[LADYQUEEN]

non , l'image est de 390 de largeur & de 146 de longueur .

[Wave]

Ah c'est pour ça le script ne redimensionne que les images supérieure à 500px

[LADYQUEEN]

d'accord , j'ai mis le premier script http://s301826463.onlinehome.fr/fdf/viewtopic.php?pid=76#p76 du sujet que tu ma passer au lieu de deuxième car le premier c'est ce que je veux .
Alors maintenant ça marche , mais j'aimerais que mes image dans les message soit de la taille 200 sur 100 . Est-ce possible ? .

[Wave]

C'est possible, il suffit de remplacer le CSS par celui-ci:

Code:

.postbody img { max-width: 200px; max-height: 100px; }
.postbody img.nomax { max-width: none; max-height: none; }

Et le code javascript par celui-ci:

Code:

(function(a){a.fn.fz=function(){function t(d){if(d.ctrlKey)return!0;if(e)return!1;e=!0;var b=a(this),m=o,g=window.innerWidth||window.document.documentElement.clientWidth||window.document.body.clientWidth,h=window.innerHeight||window.document.documentElement.clientHeight||window.document.body.clientHeight,i=window.pageYOffset||window.document.documentElement.scrollTop||window.document.body.scrollTop,n=g,l=h,g=(p||+b.attr("title").replace(/^Taille : ([0-9]+)x[0-9]+$/,"$1"))+60,h=(m||+b.attr("title").replace(/^Taille : [0-9]+x([0-9]+)$/,
"$1"))+60,m=Math.max(l/2-h/2+i,0),n=n/2-g/2,i=d.pageY,d=d.pageX;c.attr("curTop",i);c.attr("curLeft",d);c.attr("scaleImg",j?"true":"false");a("#zoom").hide().css({position:"absolute",top:i+"px",left:d+"px",width:"1px",height:"1px"});q();c.hide();r&&a("#zoom").click(k);j?(f.html(b.html()),a("#zoom_content img").css("width","100%")):f.html("");a("#zoom").animate({top:m+"px",left:n+"px",opacity:"show",width:g,height:h},500,null,function(){!0!=j&&f.html(b.html());s();c.show();e=!1});return!1}function k(){if(e)return!1;
e=!0;a("#zoom").unbind("click");q();"true"!=c.attr("scaleImg")&&f.html("");c.hide();a("#zoom").animate({top:c.attr("curTop")+"px",left:c.attr("curLeft")+"px",opacity:"hide",width:"1px",height:"1px"},500,null,function(){"true"==c.attr("scaleImg")&&f.html("");s();e=!1});return!1}function l(d){a("#zoom_table td").each(function(){var b=a(this).css("background-image").replace(/\.(png|gif|none)\"\)$/,"."+d+'")');a(this).css("background-image",b)});var b=c.children("img"),e=b.attr("src").replace(/\.(png|gif|none)$/,
"."+d);b.attr("src",e)}function q(){a.browser.msie&&7<=parseFloat(a.browser.version)&&l("gif")}function s(){a.browser.msie&&7<=a.browser.version&&l("png")}var p,o,j,r;r=j=o=p=void 0;var e=!1;if(0==a("#zoom").length){var b=a.browser.msie?"gif":"png";a("body").append('<div id="zoom" style="display:none;"> <table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> <tbody> <tr> <td class="tl" style="background:url(http://i45.servimg.com/u/f45/11/25/65/35/tl10.'+b+') 0 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> <td class="tm" style="background:url(http://i45.servimg.com/u/f45/11/25/65/35/tm10.'+
b+') 0 0 repeat-x; height:20px; overflow:hidden;" /> <td class="tr" style="background:url(http://i45.servimg.com/u/f45/11/25/65/35/tr10.'+b+') 100% 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> </tr> <tr> <td class="ml" style="background:url(http://i45.servimg.com/u/f45/11/25/65/35/ml10.'+b+') 0 0 repeat-y; width:20px; overflow:hidden;" /> <td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> <div id="zoom_content"> </div> </td> <td class="mr" style="background:url(http://i45.servimg.com/u/f45/11/25/65/35/mr10.'+
b+') 100% 0 repeat-y;  width:20px; overflow:hidden;" /> </tr> <tr> <td class="bl" style="background:url(http://i45.servimg.com/u/f45/11/25/65/35/bl10.'+b+') 0 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> <td class="bm" style="background:url(http://i45.servimg.com/u/f45/11/25/65/35/bm10.'+b+') 0 100% repeat-x; height:20px; overflow:hidden;" /> <td class="br" style="background:url(http://i45.servimg.com/u/f45/11/25/65/35/br10.'+b+') 100% 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> </tr> </tbody> </table> <a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; left:0;"> <img src="http://i45.servimg.com/u/f45/11/25/65/35/closebox10.'+
b+'" alt="Close" style="border:none; margin:0; padding:0;" /> </a> </div>');a("html").click(function(b){0==a(b.target).parents("#zoom:visible").length&&k()});a(document).keyup(function(b){27==b.keyCode&&0<a("#zoom:visible").length&&k()});a("#zoom_close").click(k)}a("#zoom");a("#zoom_table");var c=a("#zoom_close"),f=a("#zoom_content");a("td.ml,td.mm,td.mr");this.each(function(){a(this).addClass("nomax");var b=a(this).width(),c=a(this).height();a(this).removeClass("nomax");a(this).wrap('<a target="'+
escape(a(this).attr("src"))+'" title="Taille : '+b+"x"+c+'" href="'+a(this).attr("src").replace(/(\\|")/g,"\\$1")+'" />').parent().click(t)});return this}})(jQuery);
$(window).load(function() {
  $(".postbody img").filter(function() {
    return $(this).parent().not("a[href]").length && (200 == $(this).width() || 100 == $(this).height())
  }).fz()
});

Si vous avez ajouter des options sur votre code javascript actuel, vous pouvez les rajouter avec le code ci-dessus. Il en va de même pour le CSS

Cordialement

[LADYQUEEN]

Merci beaucoup FLO-73 pour ton aide .
Ça faisait longtemps que je chercher a faire ça .
Problème résolut , ça fonctionne très bien .