Les créatures mythiques aussi ont le droit de faire leur pub
 
AccueilAccueil  PortailPortail  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  


Affichage jusqu'au 13.02.17
TITRE

Partagez | 
 

 Galerie d'image en onclik

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Invité
Invité
avatar
MessageSujet: Galerie d'image en onclik   Ven 26 Aoû - 15:12


   
     
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.

   
Revenir en haut Aller en bas
Invité
Invité
avatar
MessageSujet: Re: Galerie d'image en onclik   Mar 30 Aoû - 2:06

Hello,

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

Sacha.
Revenir en haut Aller en bas
 
Galerie d'image en onclik
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» **Galerie 2014 Pamela - mes crea et sujets varier
» Image défilante
» roll-over, zone réactive, image et son
» [résolu] Lien dans image survolée vers page html
» agrandir reduire une image en son centre

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Legend Pub :: 
The Inn of the unicorn
 :: 
Créations des membres
 :: Codage - tuto/libre service
-
Sauter vers: