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

[dolnar]

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:

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

[dolnar]

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

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

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;
        }

[dolnar]

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.