AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Galerie d'image en onclick

    Sacha73
    Sacha73
    MasculinAge : 39Messages : 67

    le Ven 26 Aoû 2016 - 17:31


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Hello,

    Voici une proposition de LS, je vous laisse le découvrir.

       
       
         
    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




         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;

         
    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.

       


    Sacha.
    Onyx
    Onyx
    FémininAge : 25Messages : 3267

    le Jeu 22 Déc 2016 - 5:36

    Salut!

    Tout fonctionne bien alors je valide ce LS qui sera bientôt déplacé dans la section appropriée.

    Merci du partage!



    Loralei
    Loralei
    FémininAge : 27Messages : 7

    le Sam 24 Juin 2017 - 22:11

    Merci beaucoup :)
    Kelalin
    Kelalin
    FémininAge : 26Messages : 2069

    le Sam 24 Juin 2017 - 22:43

    Merci pour le partage :)
    Loralei
    Loralei
    FémininAge : 27Messages : 7

    le Lun 26 Juin 2017 - 5:23

    J'ai une petite question :)
    Y a-t-il un moyen de remplacer l'image de base de la galerie (avec le fond blanc et les deux photos) ? Sinon ce n'est pas grave, je ferais avec !
    Merci beaucoup par avance de votre attention !
    Sacha73
    Sacha73
    MasculinAge : 39Messages : 67

    le Dim 2 Juil 2017 - 17:11

    Hello Loralei,


    J'ai pas trop bien compris ta question ???

    Y a-t-il un moyen de remplacer l'image de base de la galerie (avec le fond blanc et les deux photos) ?

    Peux-tu m'éclairer davantage ?

    Sacha.
    benficagirl
    benficagirl
    FémininAge : 33Messages : 395

    le Ven 23 Mar 2018 - 22:29

    Merci je vais l'essayer sur mon forum Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Jeu 20 Juin 2019 - 8:56