jQuery Image Warp script

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu jQuery Image Warp script

Message par A7medvirus le Sam 27 Aoû 2011 - 18:06

Comment de telles images pour un forum


Ceci est un exemple

http://www.dynamicdrive.com/dynamicindex4/imagewarp.htm

Cliquez sur les images

http://www.dynamicdrive.com/dynamicindex4/pool.jpg


Dernière édition par A7medvirus le Lun 29 Aoû 2011 - 18:30, édité 1 fois

A7medvirus
**

Messages : 82
Inscrit(e) le : 24/03/2011

http://forum.forumactif.com
A7medvirus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: jQuery Image Warp script

Message par Adam_sfp le Dim 28 Aoû 2011 - 10:53

Bonjour

Vous pouvez essayer ceci:
Allez dans modules -->Gestion des codes Javascript

- créer un nouveau javascript.
-mettez un titre par exemple: warp
-cochez sur toutes les pages et collez le code ci dessous et validez.

Code:
jQuery.noConflict(); jQuery.imageWarp={dsettings:{warpfactor:1.5,duration:1E3,imgopacity:[0.5,1],warpopacity:[0.1,0.5]},warpshells:[],refreshoffsets:function(e,a){var b=e.offset();a.attrs.x=b.left;a.attrs.y=b.top;a.newattrs.x=a.attrs.x-(a.newattrs.w-a.attrs.w)/2;a.newattrs.y=a.attrs.y-(a.newattrs.h-a.attrs.h)/2},addEffect:function(e,a,b){var d={},d=jQuery.extend(d,this.dsettings,b),f=this.warpshells.length,b={w:a.outerWidth(),h:a.outerHeight()},h={w:Math.round(b.w*d.warpfactor),h:Math.round(b.h*d.warpfactor)},g=a.clone().css({position:"absolute", left:0,top:0,visibility:"hidden",border:"1px solid gray"}).appendTo(document.body);a.add(g).data("pos",f);f=a.parents("a").eq(0);this.warpshells.push({$clone:g,attrs:b,newattrs:h,$link:f.length==1?f:null});a.click(function(a){var b=e(this).css({opacity:d.imgopacity[0]}),c=jQuery.imageWarp.warpshells[e(this).data("pos")];jQuery.imageWarp.refreshoffsets(b,c);c.$link&&a.preventDefault();var f=c.$clone;f.stop().css({left:c.attrs.x,top:c.attrs.y,width:c.attrs.w,height:c.attrs.h,opacity:d.warpopacity[0], visibility:"visible"}).animate({opacity:d.warpopacity[1],left:c.newattrs.x,top:c.newattrs.y,width:c.newattrs.w,height:c.newattrs.h},d.duration,function(){f.css({left:0,top:0,visibility:"hidden"});b.css({opacity:d.imgopacity[1]});if(c.$link)window.location=c.$link.attr("href")})})}}; jQuery.fn.imageWarp=function(e){var a=jQuery;return this.each(function(){var b=a(this);if(this.tagName!="IMG")return!0;parseInt(b.css("width"))>0&&parseInt(b.css("height"))>0?jQuery.imageWarp.addEffect(a,b,e):this.complete?jQuery.imageWarp.addEffect(a,b,e):a(this).bind("load",function(){jQuery.imageWarp.addEffect(a,b,e)})})};
jQuery(document).ready(function(a){a("img.imagewarp").imageWarp()});

Ensuite pour votre image il faut rajouter la class "imagewarp"

par exemple
Code:
<img src="http://www.dynamicdrive.com/dynamicindex4/pool.jpg" class="imagewarp" style="width:200px; height:150px" />

Cordialement.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: jQuery Image Warp script

Message par A7medvirus le Dim 28 Aoû 2011 - 11:05

J'ai vraiment essayé moi-même, mais n'a pas fonctionné !

@Adam_sfp a écrit:
Ensuite pour votre image il faut rajouter la class "imagewarp"

par exemple

Code:
        <img
src="http://www.dynamicdrive.com/dynamicindex4/pool.jpg"
class="imagewarp" style="width:200px; height:150px" />

Mais je ne veux pas l'image d'un seul

Je veux avoir un impact sur toutes les photos pour forum .

A7medvirus
**

Messages : 82
Inscrit(e) le : 24/03/2011

http://forum.forumactif.com
A7medvirus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: jQuery Image Warp script

Message par Adam_sfp le Dim 28 Aoû 2011 - 11:25

bonjour

et bien il faut rajouter la class "imagewarp" à toutes vos images Wink

Cordialement.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: jQuery Image Warp script

Message par A7medvirus le Dim 28 Aoû 2011 - 11:39


et bien il faut rajouter la class "imagewarp" à toutes vos images Wink
Comment ce ?

Pouvez-vous me donner le code complet < Fonctionne avec toutes les images pour forum >

Comme dans l'exemple ici

Il est en fait un complexe

A7medvirus
**

Messages : 82
Inscrit(e) le : 24/03/2011

http://forum.forumactif.com
A7medvirus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: jQuery Image Warp script

Message par Adam_sfp le Dim 28 Aoû 2011 - 12:07

Bonjour

Je vous ai donné le code complet...
dans l'exemple que vous donnez pour chaque image la class "imagewarp"
est rajouté comme dans l'exemple que je vous ai donné...

Cela ne peut pas fonctionner en mettant une image simplement sans rajouter la class....

Cordialement.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: jQuery Image Warp script

Message par A7medvirus le Dim 28 Aoû 2011 - 17:47

Mais comme j'ai essayé ici n'a pas travaillé

A7medvirus
**

Messages : 82
Inscrit(e) le : 24/03/2011

http://forum.forumactif.com
A7medvirus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: jQuery Image Warp script

Message par A7medvirus le Lun 29 Aoû 2011 - 15:06

Peut-on m'aider !!

A7medvirus
**

Messages : 82
Inscrit(e) le : 24/03/2011

http://forum.forumactif.com
A7medvirus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: jQuery Image Warp script

Message par Adam_sfp le Lun 29 Aoû 2011 - 16:21

bonjour

il faudrait un peu plus d'infos..
Le lien de votre forum et version..
Quel code avez vous essayé?
Cordialement.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: jQuery Image Warp script

Message par A7medvirus le Lun 29 Aoû 2011 - 17:53

phpbb2
Arabic Language pour Forum {Mais je pense que vous n'avez pas besoin d'un lien Forum}
Quel code avez vous essayé?
ici

A7medvirus
**

Messages : 82
Inscrit(e) le : 24/03/2011

http://forum.forumactif.com
A7medvirus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: jQuery Image Warp script

Message par Adam_sfp le Lun 29 Aoû 2011 - 18:13

Bonjour

Sans le lien du forum cela va être dur de vous aider...
les templates sont elles modifiés?
si oui voir


Pour les membres ayant un forum en version PhpBB2 ou PunBB avec le templates overall_header modifiés

Vous devrez mettre à jour vous-même votre template personnalisé en cherchant le code

Code:
<!-- BEGIN google_analytics_code -->

puis en rajoutant avant lui le code

Code:
{HOSTING_JS}


Cordialement.

*Ps

Arabic langage support forum.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: jQuery Image Warp script

Message par A7medvirus le Lun 29 Aoû 2011 - 18:29

Merci à la solution

Cordialement.

*Ps

Arabic langage support forum.

Je sais que le soutien arabe .

Mais personne ne connaît les codes en javascript


Donc recouru à l'aide française
J'aime le soutien français

A7medvirus
**

Messages : 82
Inscrit(e) le : 24/03/2011

http://forum.forumactif.com
A7medvirus a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum