PDA

Voir la version complète : [BBCode] Redimensionnement de l'image avec fondu (BETA)

BiOMECHANiK
07/07/2006, 13h41
Bonjour,

Voici une petite balise BBCode que nous nous sommes amusés à faire avec un pote, nous avons trouvé le script Javascript sur Internet : ici (http://www.webmonkey.com/06/08/index2a.html)

Et nous en avons fait une balise BBCode. Le but, un redimensionement de l'image afin de ne pas déformer le forum, et une jolie animation d'agrandissement lors du clic pour l'affichage dans les dimensions d'origine.

Donc rendez-vous dans votre AdminCP

Créer une nouvelle balise BBCode

******************************************
IMG FORMAT PAYSAGE
******************************************


Intitulé : imgb paysage
Balise : imgb
Code de remplacement :
<a href="{param}" class="livethumbnail"><img src="{param}" width="240" height="159" alt=""></a>

<script type="text/javascript">
<!--

var links = document.getElementsByTagName('a');

for (var i = 0; i < links.length; i++)
if (links[i].className == 'livethumbnail')
{
var img = links[i].getElementsByTagName('img')[0];
img.state = 'small';
img.smallSrc = img.getAttribute('src');
img.smallWidth = parseInt(img.getAttribute('width'));
img.smallHeight = parseInt(img.getAttribute('height'));
img.largeSrc = links[i].getAttribute('href');
img.largeWidth = '500';
img.largeHeight = '332';
img.ratio = img.smallHeight / img.smallWidth;
links[i].onclick = scale;
}


function scale()
{
var img = this.getElementsByTagName('img')[0];
img.src = img.smallSrc;

if (! img.preloaded)
{
img.preloaded = new Image();
img.preloaded.src = img.largeSrc;
}

var interval = window.setInterval(scaleStep, 10);
return false;

function scaleStep()
{
var step = 10;
var width = parseInt(img.getAttribute('width'));
var height = parseInt(img.getAttribute('height'));

if (img.state == 'small')
{
width += step;
height += Math.floor(step * img.ratio);

img.setAttribute('width', width);
img.setAttribute('height', height);

if (width > img.largeWidth - step)
{
img.setAttribute('width', img.largeWidth);
img.setAttribute('height', img.largeHeight);
img.setAttribute('src', img.largeSrc);
window.clearInterval(interval);
img.state = 'large';
}
}
else
{
width -= step;
height -= Math.floor(step * img.ratio);

img.setAttribute('width', width);
img.setAttribute('height', height);

if (width < img.smallWidth + step)
{
img.setAttribute('width', img.smallWidth);
img.setAttribute('height', img.smallHeight);
img.src = img.smallSrc;
window.clearInterval(interval);
img.state = 'small';
}
}
}
}
-->

</script>
Exemple : url de votre image
Description : Reduit et agrandi une image au format paysage grâce à un fondu.



******************************************
IMG FORMAT PORTRAIT
******************************************


Intitulé : imgc portrait
Balise : imgc
Code de remplacement :
<a href="{param}" class="livethumbnail2"><img src="{param}" width="240" height="320" alt=""></a>

<script type="text/javascript">
<!--

var links = document.getElementsByTagName('a');

for (var i = 0; i < links.length; i++)
if (links[i].className == 'livethumbnail2')
{
var img = links[i].getElementsByTagName('img')[0];
img.state = 'small';
img.smallSrc = img.getAttribute('src');
img.smallWidth = parseInt(img.getAttribute('width'));
img.smallHeight = parseInt(img.getAttribute('height'));
img.largeSrc = links[i].getAttribute('href');
img.largeWidth = '480';
img.largeHeight = '640';
img.ratio = img.smallHeight / img.smallWidth;
links[i].onclick = scale;
}


function scale()
{
var img = this.getElementsByTagName('img')[0];
img.src = img.smallSrc;

if (! img.preloaded)
{
img.preloaded = new Image();
img.preloaded.src = img.largeSrc;
}

var interval = window.setInterval(scaleStep, 10);
return false;

function scaleStep()
{
var step = 10;
var width = parseInt(img.getAttribute('width'));
var height = parseInt(img.getAttribute('height'));

if (img.state == 'small')
{
width += step;
height += Math.floor(step * img.ratio);

img.setAttribute('width', width);
img.setAttribute('height', height);

if (width > img.largeWidth - step)
{
img.setAttribute('width', img.largeWidth);
img.setAttribute('height', img.largeHeight);
img.setAttribute('src', img.largeSrc);
window.clearInterval(interval);
img.state = 'large';
}
}
else
{
width -= step;
height -= Math.floor(step * img.ratio);

img.setAttribute('width', width);
img.setAttribute('height', height);

if (width < img.smallWidth + step)
{
img.setAttribute('width', img.smallWidth);
img.setAttribute('height', img.smallHeight);
img.src = img.smallSrc;
window.clearInterval(interval);
img.state = 'small';
}
}
}
}
-->

</script> Exemple : url de votre image
Description : Reduit et agrandi une image au format portrait grâce à un fondu.

******************************************

Voilà c'est terminé, ca fonctionne aussi sous vBulletin 3.5 bien sûr.

Je pense qu'il est possible d'améliorer ce code, comme par exemple pour qu'il puisse prendre en compte les tailles d'origine de l'image et redimensionner en conscéquence.

Si vous avez la solution je suis prenneur ^^

Un grand merci à BUGG ;)

BiOMECHANIK. byby
Allan
07/07/2006, 13h47
Je trouve ca super !

Voici une page de test: http://diverged.org/thumbnail/

Bravo a toi, c'est extra et innovant, j'adore ;)
Allan
07/07/2006, 13h48
En agrandissant, ca éclate la taille du forum ?
BiOMECHANiK
07/07/2006, 13h50
Bah non si tu pousses pas trop sur la taille maximale de l'image en taille réelle.

Cette ligne permet de paramêtrer le truc :

largewidth="640" largeheight="480"

Mais malheureusement je suis plutôt nul en code et je n'ai pas trouvé le moyen de ne pas déformer les images. Je fais confiance à notre équipe et à nos membres pour trouver la solution :p
sony
07/07/2006, 13h57
sympa, bravo et merci

serait-il possible de le mettre en remplacement du bouton "Insérer une image" ?

se serait sympa si on savais le faire ;)


Mais malheureusement je suis plutôt nul en code et je n'ai pas trouvé le moyen de ne pas déformer les images. Je fais confiance à notre équipe et à nos membres pour trouver la solution

oui car chez moi si l'image est en largeur ça va, mais en hauteur elle est déformée, comment as tu fais Allan sur ton lien pour avoir des images en 480 x 360 et en 360 x 480 ? chez moi elle se mettent tous en même dimensions qu'elles soient en hauteur ou largeur, donc ca déforme
BiOMECHANiK
07/07/2006, 15h47
oui normal les dimensions de mon code sont statiques, il faut qu'un codeur y jète un oeil pour que le bbcode prenne en compte les dimensions originales de l'image.
G@MER
07/07/2006, 16h06
merci bio c'est terrible je vais essayer ca
BiOMECHANiK
07/07/2006, 17h02
:p de rien poto ^^
rl0075
07/07/2006, 17h45
C'est vachement bien, bravo bio !!!!!
Rom56
07/07/2006, 18h10
Super merci beaucoup bio :) je pense que ca + le hack qui empeche la surdimension des images ca doit le faire non ?
BiOMECHANiK
07/07/2006, 18h43
bah faudrait adapter les 2 oui :)
sony
07/07/2006, 22h13
oui se serait bien d'adapter les dimentions car c'est super, encore bravo ;)
WrestleMania
07/07/2006, 22h16
Ce hack est tout simplement génial !!! Merci et très beau taf'
0a$!s
07/07/2006, 23h46
Merci bien !
BiOMECHANiK
08/07/2006, 01h38
Le top du top serait d'adapter ce code pour y intègrer du texte à droite et à gauche et qu'il ne deforme pas les images.
foxys
09/07/2006, 10h59
merci c'est du plus bel effet :)
BiOMECHANiK
26/07/2006, 12h42
Petite MAJ de mon topic, je vous ai mis à dispo le BBCode pour une image au format Portrait.

Je n'arrive toujours pas à prendre en compte les dimensions d'origine dans le code. Personne n'a une idée ?
Kamatcho
18/09/2006, 18h20
Aucune idée désolé ...
Sinon prévoit tu une fusion entre ce Hack et celui de redimension d'images ???

PS : Aucune demande, juste question de savoir ...
rl0075
29/09/2006, 10h24
Petit soucis !

dans les deux cas ( portrait et paysage )

il affiche bien la miniature, il l'agrandit en cliquand dessus, au bout de deux secondes, l'image est partie et remplacée par une croix, et en cliquant dessus elle disparait avec l'effet fondu !!

si quelqu'un a une petite idée, merci
yod@117
16/10/2006, 21h38
merci pour ces balises je les utilise actuellement
Overdoz
17/10/2006, 13h21
Excellent, je l'installe de suite ;)
OlijO
17/10/2006, 16h54
Excellent!!!!! j'étais passé à côté en plus ppppfff je trouve cela super ;) Merci
LtD
02/03/2007, 23h12
impécable ca, merci bien :) moi jutilise cette image http://www.metalorock.com/v2/images/buttons/image.jpg
mickmimi
03/03/2007, 00h19
Bonjour..

Merci à toi, cela fonctionne bien
Blazman
03/03/2007, 15h52
ouaaaa c'est trop beau lol merci
pfoofen
06/05/2007, 12h51
Hello à tous, génial ce hack !

Cependant il ne fonctionne pas sous IE7... je sais pas d'où celà provient, quelqu'un pourait-il m'aider ?

Merci d'avance :D