Rokbox : Affichage d'un bloc d'image à l'intérieur d'un popup

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Rokbox : Affichage d'un bloc d'image à l'intérieur d'un popup

    Bonjour à tous et à toutes,

    Je suis entrain de réfléchir depuis plusieurs jours sur un casse-tête avec le plug-in RokBox.
    J'ai créé un lien qui dois m'afficher une série d'images (cinq) avec des titres en dessous. J'ai créé mon lien puis de ce lien doit s'afficher une série de cinq images à l'intérieur de ce popup.

    Voici le lien que j'ai écrit :
    Code:
    Code:
    <div class="row">
    <div class="formation-button-popup"><a href="#" data-rokbox="" data-rokbox-element=".popup-formation">Mes formations</a></div>
    <div class="popup-formation">
    <!-- Debut - Module 01 -->
    <div class="formation-module-01">
    <div class="picto-01"><a href="formations/formation-module-01/"> <img src="images/illustrations/formation-module-01.jpg" alt="Formation Module 01" /></a></div>
    <div class="title-formation">
    <p><a href="formations/formation-module-01/">Formation Module 01</a></p>
    </div>
    </div>
    <!-- Fin - Module 01 -->
    <!-- Debut - Module 02 -->
    <div class="formation-module-02">
    <div class="picto-02"><a href="formations/formation-module-02/"> <img src="images/illustrations/formation-module-02.jpg" alt="Formation Module 02" /></a></div>
    <div class="title-formation">
    <p><a href="formations/formation-module-02/">Formation Module 02</a></p>
    </div>
    </div>
    <!-- Fin - Module 02 -->
    <!-- Debut - Module 03 -->
    <div class="formation-module-03">
    <div class="picto-03"><a href="formations/formation-module-03/"> <img src="images/illustrations/formation-module-03.jpg" alt="Formation Module 03" /></a></div>
    <div class="title-formation">
    <p><a href="formations/formation-module-03/">Formation Module 03</a></p>
    </div>
    </div>
    <!-- Debut - Module 04 -->
    <div class="formation-module-04">
    <div class="picto-04"><a href="formations/formation-module-04/"> <img src="images/illustrations/formation-module-04.jpg" alt="Formation Module 04" /></a></div>
    <div class="title-formation">
    <p><a href="formations/formation-module-04/">Formation Module 04</a></p>
    </div>
    </div>
    <!-- Fin - Module 04 -->
    <!-- Debut - Module 05 -->
    <div class="formation-module-05">
    <div class="picto-05"><a href="formations/formation-module-05/"> <img src="images/illustrations/formation-module-05.jpg" alt="Formation Module 05" /></a></div>
    <div class="title-formation">
    <p><a href="formations/formation-module-05/">Formation Module 05</a></p>
    </div>
    </div>
    <!-- Fin - Module 05 -->
    </div>
    </div>
    Alors mon problème est le suivant, lors de l'affichage sur certains mobiles cela ne s'affiche pas correctement. J'ai un bug dans l'affichage des éléments du popup. Sur Desktop cela s'affiche verticalement au d'être horizontal. Et sur mobile l'affichage est n'est pas nickel non plus, le texte déborde et les images sont disproportionnelles les unes des autres.

    Merci d'avance pour votre aide, Dolnar.
    Dernière édition par dolnar à 13/07/2017, 11h50 Raison: Fautes d'othographes
    Yes We Can...Change The Web With JOOMLA...

  • #2
    Re : Rokbox : Affichage d'un bloc d'image à l'intérieur d'un popup

    Voici le code css que j'applique sur mon popup :

    Code:
    div.row{
    		width: 100%;
    	}
    
    	div.popup-formation{
    		display: none;
    	}
    
    	div.formation-module-01, div.formation-module-02, div.formation-module-03,
    	div.formation-module-04, div.formation-module-05{
    		display: inline-block;
    		width: 100%;
    		float: left;
    	}
    
    	div.title-formation{
    		position: relative;
    	}
    
    	.picto-01, .picto-02, .picto-03, .picto-04, .picto-05{
    	  padding: 8px 12px;
    	}
    
    	.picto-01 img, .picto-02 img, .picto-03 img, .picto-04 img, .picto-05 img{
    		display: block;
    	  width: 40%;
    	  margin: 0 auto;
    	  -webkit-transform: scale(1) 0.3s ease-in-out;
    	  -moz-transform: scale(1) 0.3s ease-in-out;
    	  -o-transform: scale(1) 0.3s ease-in-out;
    	  transform: scale(1) 0.3s ease-in-out;
    	}
    
    	.picto-01 img:hover,
    	.picto-02 img:hover,
    	.picto-03 img:hover,
    	.picto-04 img:hover,
    	.picto-05 img:hover{
    	  transform: scale(1.2);
    	}
    
    	div.title-formation p{
    	  margin-top: 15px;
    	  font-size: 1rem;
    	  text-align: center;
    	  font-weight: bold;
    		line-height: 1.2;
    		color: $orange-color;
            }
    Yes We Can...Change The Web With JOOMLA...

    Commentaire


    • #3
      Re : Rokbox : Affichage d'un bloc d'image à l'intérieur d'un popup

      J'ai finalement réussi à l'adapter au contenu de mon popup rokbox. Pour cela j'ai du agir sur les blocs rokbox-content et rokbox-content-element de ce plug-in via le css.
      Yes We Can...Change The Web With JOOMLA...

      Commentaire

      Annonce

      Réduire
      Aucune annonce pour le moment.

      Partenaire de l'association

      Réduire

      Hébergeur Web PlanetHoster
      Travaille ...
      X