Référencement, Dépots de logo, Concours, Autres services
 
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  S'enregistrerS'enregistrer  Connexion  
Le Deal du moment : -27%
-27% sur la machine à café Expresso ...
Voir le deal
399.99 €

 

 Galerie d'image en onclik

Aller en bas 
AuteurMessage
Invité
Invité
Anonymous


Galerie d'image en onclik Empty
MessageSujet: Galerie d'image en onclik   Galerie d'image en onclik EmptyVen 26 Aoû - 17:02


   
     
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é
Anonymous


Galerie d'image en onclik Empty
MessageSujet: Re: Galerie d'image en onclik   Galerie d'image en onclik EmptyMar 30 Aoû - 3:22

Hello,

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

Sacha.

PS :: Votre bulle est en alignement justify, cela n'est pas recommandé, en effet voyez le code JS ou HTML, vous verrez alors des espaces entre certains mots, pour éviter cela, il est donc recommandé de mettre en alignement left ! Beaucoup de codeurs font l'erreur de mettre en justify dans leur codage.

Rechercher ceci dans la feuille de style CSS ::

Code:
#bulle {
    background-color: #F2F1F1;
    border: 5px solid #c3d79b;
    color: #000;
    font-size: 12px;
    min-height: 250px;
    padding: 15px;
    position: relative;
    text-align: justify;
    width: 700px;
}

Remplacer par ceci ::

Code:
#bulle {
    background-color: #F2F1F1;
    border: 5px solid #c3d79b;
    color: #000;
    font-size: 12px;
    min-height: 250px;
    padding: 15px;
    position: relative;
    text-align: left;
    width: 700px;
}

Vous n'aurez plus ce problème.
Revenir en haut Aller en bas
Le Maire

Le Maire

Messages écrits : 37892
Date d'inscription : 13/01/2009

Galerie d'image en onclik Empty
MessageSujet: Re: Galerie d'image en onclik   Galerie d'image en onclik EmptyMar 30 Aoû - 18:19

Merci beaucoup pour ce tutoriel, Sacha :merci:


Gains des animations :
Revenir en haut Aller en bas
Invité
Invité
Anonymous


Galerie d'image en onclik Empty
MessageSujet: Re: Galerie d'image en onclik   Galerie d'image en onclik EmptyMar 30 Aoû - 21:42

Hello,

Mais de rien Homer n'oubliez pas la petite recommandation ci-dessus.

Sacha.
Revenir en haut Aller en bas
Darth Revan

Darth Revan

Messages écrits : 7486
Date d'inscription : 12/08/2011

Galerie d'image en onclik Empty
MessageSujet: Re: Galerie d'image en onclik   Galerie d'image en onclik EmptyDim 11 Sep - 20:32

:coucou: On n'oublie pas.
Ravi qu tu as utilsé ce service.
:merci: de ta confiance.

Et : En cas de besoin, ou de nouveau service n'hesite pas de refaire appel à nous
Revenir en haut Aller en bas
Contenu sponsorisé




Galerie d'image en onclik Empty
MessageSujet: Re: Galerie d'image en onclik   Galerie d'image en onclik Empty

Revenir en haut Aller en bas
 
Galerie d'image en onclik
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Ma galerie de dessins et photos

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
The Simpsons Pub  :: La Centrale Nucléaire :: Corbeille-
Sauter vers: