Forums Développement Multimédia

Aller au contenu

Plugin frameIt

plugin jquery zoom image frame CODE Ajax JQuery EaseJs

  • Vous ne pouvez pas répondre à ce sujet
Aucune réponse à ce sujet

#1 XueFang

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 77 messages

Posté 28 November 2012 - 13:45 PM

Salut à tous,

Etant en ce moment même en train de développer un site web pour un photographe j'ai du développer certains outils par moi même parce qu'on est jamais aussi bien servit que par soit même dit-on :mrgreen:

J'avais testé quelques plugins pour zoomer sur des images, ils sont pour la plupart ultra sofistiqué, très bien développé... mais au final sa ne me convenait pas, un poil trop complexe à mettre en place car la plupart propose cette structure.

-Importer plugin pour zoomer
-Créer une classe pour chaque image qui peut être zoomé
-Je paramètre mes dimensions de div max, etc... etc...

Moi je voulais la version inverse, rendre toutes les images cliquables car sur un site photo il y en à beaucoup :mrgreen: et interdire certaine photo d'être zoomé, comme par exemple bannière, boutons, etc...dans mon cas je trouvais ça plus rapide.

Et comme mon code est assez généralisé je vous le partage, il n'est certe pas optimisé comme un développeur démoniaque le souhaiterai mais moi ça me va, sa fonctionne et s'est fluide :mrgreen:

Voilà donc c'était pour la petite histoire, maintenant mon plugin je l'ai simplement baptisé "frameIt", son import et utilisation sont des plus simple.
Je vous explique:


<body>


<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> <!-- Une version jQuery parmit tant d'autre -->
<script type='
text/javascript' src='js/frameIt.js'></script> <!-- Plugin de la mort -->
<script type='
text/javascript'>

  $(document).ready(function(){

        frameIt('
img');

  });

</script>
</body>
Dans ce cas les images sont absolument TOUTES cliquables... ce qui est génial mais aussi enquiquinant car cliquer sur un bouton et vous aurez droit à une belle image zoomé :oops:

:mrgreen: Pas de panique, j'ai mit en place cette ligne de code:


frame_allow = 'false'
 

Celle-ci se place dans la balise image à l'endroit que vous désirez, ça y est votre image n'est plus zoomable.

Vous trouverez dans le fichier zip ci-joint:
-Le fichier css compressé
-Le fichier js compressé
-Un html d'exemple avec images à l'appui

Et c'est compatible sur la majorité des navigateurs y comprit mobile car le plugin se redimensionne tout seul.


Voilà en espérant que sa aide certaines personnes qui auraient pu ressentir la même chose que moi en voyant ses magnifiques plugins pour zoomer qui demandent une organisation un poil différente.

Fichier(s) joint(s)

  • Fichier joint  frameIt.zip   174.66 Ko   0 téléchargement(s)




1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP