caption en dessous image diaporama et pas dessus

16 juin 2017 à 16:50:13

Bonjour,

j'ai télécharger ceci :

je souhaiterai mettre le caption en dessous de l'image entre l'image diaporam et la galerie d'en dessous mais je n'y arrive pas j'ai mis en block le caption mit des margin et bottom mais rien n'y fait.

quelqu'un aurai une solution voici le css que j'ai trouvé et que je pense doit être modifié pour cela.

voici le code original css :

.pgwSlideshow .ps-caption {
    background: rgba(0, 0, 0, 0.5);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000')";
    text-align: left;
    font-size: 1rem;
    color: #fff;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    padding: 10px;
    display: none;
}

.pgwSlideshow .ps-caption span {
    padding: 7px;
    display: inline-block;
}

.pgwSlideshow .ps-list {
    border-top: 1px solid #555;
    box-shadow: 0 10px 10px -5px #333 inset;
    background: #555;
    overflow: hidden;
    position: relative;
}

.pgwSlideshow .ps-list ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    left: 0;
}

.pgwSlideshow .ps-list li {
    float: left;
}

.pgwSlideshow .ps-list li .ps-item {
    display: block;
    margin: 15px 8px;
    opacity: 0.6;
    filter: alpha(opacity=60);
}

merci

-
Edité par creationsites 16 juin 2017 à 16:51:51

Hsuissia

16 juin 2017 à 17:15:54

Bonjour,

Malheureusement, cela va être compliqué, car il va falloir modifier le l'HTML généré dans le javascript du plugin.

En effet le ps-caption est dans la div qui affiche l'image, et non entre :

<div class="pgwSlideshow wide" style="display: block;">
    <div class="ps-current" style="height: 600px;">
        <span class="ps-prev" style="display: block;">
            <span class="ps-prevIcon"></span>
        </span>
        <ul>
            <li class="elt_1" style="display: block; opacity: 1; z-index: 2;"><img src="http://static.pgwjs.com/img/pg/slideshow/san-francisco.jpg" alt="San Francisco, USA"></li>
            <li class="elt_2" style="display: none;"><img src="http://static.pgwjs.com/img/pg/slideshow/rio.jpg" alt="Rio de Janeiro, Brazil"></li>
            <li class="elt_3" style="display: none;"><img src="http://static.pgwjs.com/img/pg/slideshow/london.jpg" alt=""></li>
            <li class="elt_4" style="display: none;"><img src="http://static.pgwjs.com/img/pg/slideshow/new-york.jpg" alt=""></li>
            <li class="elt_5" style="display: none;"><img src="http://static.pgwjs.com/img/pg/slideshow/new-delhi.jpg" alt=""></li>
            <li class="elt_6" style="display: none;"><img src="http://static.pgwjs.com/img/pg/slideshow/paris.jpg" alt=""></li>
            <li class="elt_7" style="display: none;"><img src="http://static.pgwjs.com/img/pg/slideshow/sydney.jpg" alt=""></li><li class="elt_8" style="display: none;"><img src="http://static.pgwjs.com/img/pg/slideshow/tokyo.jpg" alt=""></li>
       </ul>
       <span class="ps-caption" style="display: inline;">   <------- Le caption
           <b>San Francisco, USA</b><br>Golden Gate Bridge
       </span>
       <span class="ps-next" style="display: block;">
            <span class="ps-nextIcon"></span>
       </span>
    </div>
    <div class="ps-list">  <--------------- LA liste
        <span class="ps-prev" style="display: inline;">
            <span class="ps-prevIcon"></span>
        </span>
        <ul class="" style="width: 1176px; margin: 0px 45px; left: 0px;">
                <li class="elt_1" style="cursor: pointer;"><span class="ps-item ps-selected"><img src="http://static.pgwjs.com/img/pg/slideshow/san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></span></li>
		<li class="elt_2" style="cursor: pointer;"><span class="ps-item"><img src="http://static.pgwjs.com/img/pg/slideshow/rio.jpg" alt="Rio de Janeiro, Brazil"></span></li>
		<li class="elt_3" style="cursor: pointer;"><span class="ps-item"><img src="http://static.pgwjs.com/img/pg/slideshow/london_mini.jpg" alt="" data-large-src="http://static.pgwjs.com/img/pg/slideshow/london.jpg"></span></li>
		<li class="elt_4" style="cursor: pointer;"><span class="ps-item"><img src="http://static.pgwjs.com/img/pg/slideshow/new-york.jpg" alt=""></span></li>
		<li class="elt_5" style="cursor: pointer;"><span class="ps-item"><img src="http://static.pgwjs.com/img/pg/slideshow/new-delhi.jpg" alt=""></span></li>
		<li class="elt_6" style="cursor: pointer;"><span class="ps-item"><img src="http://static.pgwjs.com/img/pg/slideshow/paris.jpg" alt=""></span></li>
		<li class="elt_7" style="cursor: pointer;"><span class="ps-item"><img src="http://static.pgwjs.com/img/pg/slideshow/sydney.jpg" alt=""></span></li>
		<li class="elt_8" style="cursor: pointer;"><span class="ps-item"><img src="http://static.pgwjs.com/img/pg/slideshow/tokyo.jpg" alt=""></span></li>
		<li class="elt_9" style="cursor: pointer;"><span class="ps-item"><img src="http://static.pgwjs.com/img/pg/slideshow/honk-kong.jpg" alt=""></span></li>
		<li class="elt_10" style="cursor: pointer;"><span class="ps-item"><img src="http://static.pgwjs.com/img/pg/slideshow/dakar.jpg" alt=""></span></li>
		<li class="elt_11" style="cursor: pointer;"><span class="ps-item"><img src="http://static.pgwjs.com/img/pg/slideshow/toronto.jpg" alt=""></span></li>
		<li class="elt_12" style="cursor: pointer;"><span class="ps-item"><a href="http://en.wikipedia.org/wiki/Monaco" target="_blank"><img src="http://static.pgwjs.com/img/pg/slideshow/monaco.jpg" alt="Monaco"></a></span></li>
        </ul>
        <span class="ps-next" style="display: inline;">
            <span class="ps-nextIcon"></span>
        </span>
    </div>
</div>

Donc le caption est dans un parent^^

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !

creationsites

16 juin 2017 à 18:19:44

Peut etre pourriez vous m'aider autrement je dois afficher une zone de texte assez longue pour chaque clic de l'image donc c'est pour cela que le caption me va mais pas au milieu de l'image car le texte sera long vous une idée ? Merci

Hsuissia

16 juin 2017 à 18:25:48

A part utiliser un autre plugin, ou écrire plus petit, je ne vois pas trop désolé :s

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !

ChrisLebure

16 juin 2017 à 18:54:07

Hello, pistes :

d'abord, descendre la liste de vignettes .ps-list, déclaration à ajouter, valeur 50px à régler:

.pgwSlideshowLight .ps-list {
    margin-top: 50px;}

on a ainsi l'espace dispo entre images et list

Ensuite, descendre la légende, elle est positionnée en absolu donc ajouter :

   .pgwSlideshowLight .ps-caption {
   	bottom: -50px;
   }

Mais là on ne voit rien car .ps-current est overflow: hidden; donc également :

.pgwSlideshowLight .ps-current {
    text-align: center;
    position: relative;
    min-height: 150px;
    /* overflow: hidden; */
    overflow: visible;
}

reste un dépassement du coup de la légende à droite, à corriger
Il faut intégrer le padding dans la largeur, soit :

   .pgwSlideshowLight .ps-caption {
   	box-sizing: border-box;
   }

-
Edité par ChrisLebure 16 juin 2017 à 19:08:35

creationsites

16 juin 2017 à 19:41:10

merci pour le code je l'ai insérer il y'a bien maintenant en tre la grande photo et les petites une bande grise mais pas de texte dedans voici l'imprim ecran est le code : compltet:

.pgwSlideshow .ps-current {
    text-align: center;
    position: relative;
    min-height: 150px;
    overflow: hidden;
}

.pgwSlideshow .ps-current > ul  > li {
   /* text-align: center;
    width: 100%;
    z-index: 1;
    opacity: 0;
    display: block;*/
	
	text-align: center;
	width: 100%;
    position: relative;
    min-height: 150px;
    /* overflow: hidden; */
    overflow: visible;
}

.pgwSlideshow .ps-current > ul  > li img {
    display: block;
    max-width: 100%;
    margin: auto;
}

.pgwSlideshow .ps-caption {
    background: rgba(0, 0, 0, 0.5);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000')";
    text-align: left;
    font-size: 1rem;
    color: #fff;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    padding: 10px;
	bottom: -50px;
    display: none;
	box-sizing: border-box;
}

.pgwSlideshow .ps-caption span {
    padding: 7px;
    display: inline-block;
}

.pgwSlideshow .ps-list {
    border-top: 1px solid #555;
    box-shadow: 0 10px 10px -5px #333 inset;
    background: #555;
    overflow: hidden;
    position: relative;
    margin-top: 50px;
}

.pgwSlideshow .ps-list ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    left: 0;
}

.pgwSlideshow .ps-list li {
    float: left;
}

merci pour votre aide.

ChrisLebure

16 juin 2017 à 19:45:53

Donne un lien qu'on puisse regarder en détail

tu t'es trompé, le overflow:visible doit se mettre sur .pgwSlideshowLight .ps-current

tu l'as mis sur :

.pgwSlideshow .ps-current > ul > li {

-
Edité par ChrisLebure 16 juin 2017 à 19:47:57

creationsites

16 juin 2017 à 20:25:06

le texte s'affiche mais le diaporama remonte et descend pas très esthetic voici le lien :

http://test3.webcreation66.com/index.php

merci pour votre aide.

-
Edité par creationsites 16 juin 2017 à 20:25:21

ChrisLebure

16 juin 2017 à 20:29:13

sur mon navigateur tout fonctionne bien, mettons des images de mêmes dimensions, et demandons l'avis des membres du forum !

-
Edité par ChrisLebure 16 juin 2017 à 20:29:52

creationsites

16 juin 2017 à 20:38:57

c'est sur mozilla qu'apparait ce bug, google chrome tout fonctionne bien

-
Edité par creationsites 16 juin 2017 à 20:44:47

ChrisLebure

16 juin 2017 à 20:44:03

Sinon j'ai fait ce que j'ai pu, je ne garantis rien,
sinon change de slider

creationsites

16 juin 2017 à 20:57:12

sur chrome nickel c'est sur mozilla qu'apparait ce peit bug.