webleads-tracker

JQuery Thumbs

Guillaume
Bonjour,

J'utilise le script JQuery Thumbs (http://ow.ly/5lD6c) sur cette page http://ow.ly/5lD6B afin de générer des vignettes élégantes pour ma galerie.

Ce script est optimisé pour IE mais je ne parviens pas à le faire fonctionner correctement avec e-majine.

J'ai testé le CSS, l'amorçage du script, d'éventuels conflits avec d'autres librairies, changer la version de Jquery utilisée, rien n'y fait, j'ai toujours le même problème sur IE7 et IE8 :

Le script "fonctionne" sur la première image uniquement, mais l'image n'est cependant pas centrée...

Je suspecte un problème au niveau du script mais mes compétences en JS sont limitées.
Vous pouvez le trouver à cette adresse : http://naturalis.s2965.m2.atester.fr/scripts/jquery.thumbs.js

Merci par avance pour votre aide !

Guillaume
Re,

Finalement, l'utilité de Javascript est toute relative puisque j'ai réussi à parvenir au même résultat grâce aux CSS.

Pour ceux que ça intéresse, voici la marche à suivre pour une galerie d'images :

1 - Définir une hauteur et une largeur maximum de vos images (format vignettes) à l'aide des propriétés max-width / max-height

2 - Dans votre template "media_gallery.html", entourez d'une div la balise <a> qui contiendra l'image et attribuer lui une classe "untel". Ce bloc sera celui dans lequel votre image sera vignettée.

3- Dans votre feuille de style, attribuez les dimensions voulues pour vos vignettes en indiquant un width et un height aux blocs ayant la classe "untel". Placez également, l'image au centre en jouant sur les margin négatifs et les valeurs en pourcentage.
Par exemple : .untel img {margin-left:-30%; margin-top:-25%;}
Vous pouvez placer les blocs en "float:left;" ou "display:inline;" afin d'obtenir des rangées de vignettes.
Enfin, pour que la magie s'opère, attribuez un "overflow:hidden;" à votre contenant "untel", qui aura pour effet de masquer les parties de l'image qui dépassent.

Et voilà !

Le résultat en situation : http://naturalis.s2965.m2.atester.fr/galerie/constructeur-maisons-ossature-bois-classique/

Une astuce simple, qui évite d'alourdir la page avec le chargement d'un script supplémentaire :)

Bon courage.