Galerie d'image en onclick

     Voici le code HTML à placer sur un sujet ::

Code:

<div id="Amispub-galerie">
    <div id="Amispub-galerietitre">Galerie de PSEUDO</div>
    <div id="Amispub-originale">
    <span>Titre de la photo 1</span>
    <div id="Amispub-miniimage"><ul id="Amispub-minigalerie"><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 1"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 1" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 2"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 2" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 3"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 3" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 4"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 4" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 5"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 5" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 6"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 6" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 7"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 7" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 8"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 8" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 9"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 9" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 10"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 10" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 11"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 11" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 12"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 12" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 13"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 13" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 14"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 14" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 15"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 15" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 16"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 16" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 17"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 17" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 18"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 18" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 19"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 19" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 20"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 20" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 21"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 21" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 22"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 22" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 23"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 23" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 24"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 24" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 25"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 25" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 26"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 26" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 27"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 27" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 28"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 28" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 29"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 29" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 30"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 30" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 31"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 31" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 32"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 32" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 33"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 33" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 34"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 34" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 35"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 35" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 36"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 36" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 37"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 37" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 38"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 38" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 39"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 39" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 40"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 40" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 41"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 41" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 42"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 42" /></a></li>
    </ul></div>
    <div id="Amispub-cadrage"><img id="Amispub-cadre" src="http://i35.servimg.com/u/f35/19/02/80/43/psd-ga10.jpg" alt="Image par défaut" /></div></div>
    <div style="float: right; color: #990033; font-weight: bold; margin-right: 10px; margin-top: -10px;">Codage galerie image by Sacha <a TARGET="_blank" href="http://www.never-utopia.com/" style="background-color: #4682B4; color: #DAE6F0; font-weight: bold; text-decoration:none;">Never Utopia</a></div></div>

   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 ::

Code:

<li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 1"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 1" /></a></li>

   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 s'agit de ceci :

Code:

<div id="Amispub-cadrage"><img id="Amispub-cadre" src="http://i35.servimg.com/u/f35/19/02/80/43/psd-ga10.jpg" alt="Image par défaut" /></div>

   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 ::

Code:

/* *********************Debut galerie image onclick by Sacha******************** */
    #Amispub-galerie {
    background: #dcdcdc;
    border: 6px solid #666;
    border-radius: 50px;
    padding: 15px;
    margin: 15px 30px;
    text-align: center;
    }
    #Amispub-galerietitre {
    background-color: #ccc;
    width: 450px;
    color: #404040;
    font-weight: bold;
    font-size: 40px;
    border-radius: 100px 30px/30px 100px;
    border: 6px solid #666;
    padding: 20px;
    margin: auto;
    }
    ul#Amispub-minigalerie {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    ul#Amispub-minigalerie li {
    float: left ;
    }
    ul#Amispub-minigalerie li a img {
    height: 32px;
    width: 32px;
    padding: 1.5px 1.5px 3px;
    font-size:0px
    }
    #Amispub-cadre {
    max-width: 500px;
    max-height: 300px;
    }
    #Amispub-originale {
    clear: both;
    margin: 0 auto;
    }
    #Amispub-originale span {
    color: #404040;
    font-family: Georgia,serif;
    font-size: 12px;
    font-weight: bold;
    display: block;
    background: #ccc;
    border: 6px solid #666;
    text-align: left;
    padding: 4px;
    min-height: 40px;
    }
    #Amispub-cadrage {
    background-color: #ccc;
    height: 300px;
    margin-left: 230px;
    padding: 5px;
    width: 500px;
    margin-top: -18px;
    border: 4px solid #666;
    }
    #Amispub-miniimage {
    background-color: #ccc;
    height: 300px;
    width: 210px;
    padding: 5px;
    border: 4px solid #666;
    float: left;
    overflow: auto;
    }
    #Amispub-originale img {
    margin: auto;
    }
    /* *********************Fin galerie image onclick by Sacha******************** */

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

Code:

function displayPics(){var photos=document.getElementById("Amispub-minigalerie");var liens=photos.getElementsByTagName("a");var big_photo=document.getElementById("Amispub-cadre");var titre_photo=document.getElementById("Amispub-originale").getElementsByTagName("span")[0];for(var i=0;i< liens.length;i++){liens[i].onclick= function(){big_photo.src= this.href;big_photo.alt= this.title;titre_photo.firstChild.nodeValue= this.title;return false}}}window.onload= displayPics;