Les créatures mythiques aussi ont le droit de faire leur pub
 
Le Deal du moment :
Funko POP! Jumbo One Piece Kaido Dragon Form : ...
Voir le deal

 :: The Inn of the unicorn :: Créations des membres :: Codage - tuto/libre service Voir le sujet précédent Voir le sujet suivant Aller en bas
Galerie d'image en onclik
Anonymous
Invité
Invité

   
     
Galerie d'image avec effet onclick
Voici un moyen de rendre les galeries de vos membres beaucoup plus esthétiques, cette galerie est réalisée avec un effet onclick possédant 42 emplacements et réalisé de manière a évité un effet d'overflow.
Voir
Statique :: www
   En action :: www


     
Un petit merci rendra le code visible.

     Voici le code HTML à placer sur un sujet ::

   Remarque :: Le code présenté ne se poste qu'une seule fois par page, si le code est posté une nouvelle fois sur la même page ou si vos sujets sont paramétrés avec un rappel de la première publication du sujet sur la page suivante, le code ne fonctionnera pas, il ne prendra qu'en compte le premier code de la page, le suivant code aura pour effet au clic d'afficher l'image sur l'onglet actif de votre navigateur plutôt que dans le cadre alloué à cet effet.

Il est donc, nécessaire de faire un espace galerie des membres avec une demande d'ouverture d'un sous-forum de la part de vos membres et ainsi pouvoir ouvrir des nouveaux sujets sur leur galerie.

   

   Fonctionnement :: Chaque emplacement est réaliser de cette manière ::

   

   Comme vous le remarquerez, il y a donc sur chaque emplacement 2 URL, il vous faudra remplacer cette URL par la vôtre et ces deux fois par emplacement.

   Votre image se redimensionnera pour la miniature à 32X32PX quelle qu'en soit sa taille d'origine, ensuite, au clic, votre image se redimensionnera avec un max width et height de 500X300PX, pourquoi max, simplement que votre image gardera des proportions d'affichages correctes lors de son redimensionnement.

   Vous remarquerez également sur chaque emplacement, qu'il y a un title, celui-ci vous servira à mettre une description de votre image qui s'affichera sur l'emplacement au-dessous du titre de votre galerie, de même il y également alt qui vous permet de mettre un titre à votre image qui sert au passage de votre souris à afficher une infobulle contenant le titre de votre image.

   Vous avez également la possibilité de mettre une image par défaut, elle peut être la première image de votre galerie.

   

   Il suffit juste de remplacer l'URL par l'URL de votre première image de votre galerie où une autre qui servira d'image par défaut à l'arrivée d'un membre sur votre galerie.

   Il est déconseillé de faire des sauts de ligne dans la structure HTML, sans quoi, vous risquez de fausser son paramétrage, n'oubliez pas, le code HTML est installé sur un sujet et non sur une page HTML !

   Le code CSS a placer :: Affichage -> Images et couleurs -> Couleurs -> Feuille de style ::

   

   Le code JS a placer dans :: Module -> Codes Javascript -> Créer un nouveau Javascript -> Mettre un titre explicite -> Placer sur les sujets ::

   

     
Les codes ont été proposée par Sacha (Co Fondateur des Amis de la pub).
     Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI.

   
Ven 26 Aoû - 15:12
Revenir en haut Aller en bas
Anonymous
Invité
Invité
Hello,

Petite correction pour Chrome pour éviter la scrollbar de la liste des images.

Sacha.
Mar 30 Aoû - 2:06
Revenir en haut Aller en bas
Sauter vers: