Problème avec mon portfolio

Bonjour tout le monde,

Alors j'ai encore un problème avec cette galerie wordpress que je n'arrive pas à dompter du tout !

Sur mon portfolio en ligne : http://partikules.com/

Lorsque l'on est dans la partie "portfolio" et que l'on clique sur une image il y a un pop-up qui apparait avec de nouveau l'image, j'aimerais dans ce pop-up pouvoir ajouter d'autres images, car je trouve ça dommage de ne pas pouvoir afficher plus de détails sur le projet.

Ci joint une image de ce que j'aimerais réaliser.

J'espère que l'un de vous pourra que sortir de cette situation.

Un grand merci

Salut,
Après une grosse impression de déjà vu, c'est bon l'image ne passe plus dessous le menu maintenant ^^.

Je pense que ton post n'est pas dans la bonne section, c'est plutôt un problème de javascript que de css cette fois ci.

Et du coup pour résoudre ce problème ça va être plus difficile car ce n'est pas juste un petit bug de css mais une fonction javascript. A priori, lors du clique sur une image, j’aboutis à un appel d'une fonction à la ligne 14 du fichier http://partikules.com/optimized/87c08ea2a57b4fc93f3559b6971d66b5.js qui est particulièrement illisible ...

Il faudrait voir les fonctions d'origines pas les "optimized". A priori aux vues des classes css qui sont crées lors du clique, je suppose que tu utilises Magnific Popup .

Super merci

Je suis allée fouiller dans le JS, et voici le code appliqué à Magnific Popup :

/* Magnific Popup */

$('.portfolio-popup').magnificPopup({
type: 'image',

gallery: { enabled: true },
zoom: { enabled: true,
duration: 500
},

image:{
markup: '<div class="mfp-figure portfolio-pop-up">'+
'<div class="mfp-close"></div>'+
'<div class="mfp-img"></div>'+
'<div class="mfp-bottom-bar portfolio_title">'+
'<div class="mfp-title"></div>'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</div>',

titleSrc:function(item){
return item.el.attr('title');
}
}


});

Salut,
j'ai un peu regardé comment marche magnific popup.
A priori le plus simple semble de faire des "parties cachées" qui contiennent les différentes popups que tu veux afficher et d'y mettre un identifiant à chacune des parties. Ensuite il suffit de faire une balise <a> avec un href qui pointe vers l'identifiant (avec un dièse devant comme si c’était une ancre dans la page), et cela ouvre la popup voulue.

Petit exemple : https://codepen.io/anon/pen/KmBqym

Hello,

Merci beaucoup, j'ai commencé à faire des tests avec la solution que tu m'as indiqué, malheureusement j'ai aussi commencé à tout faire buguer, donc je suis pas sure d'avoir vraiment compris la marche à suivre....

Dans le Js, j'enlève tout ce qu'il y a dans magnific popup ?
$('.open-popup-link').magnificPopup({
// type:'inline', //type par defaut
});

Dans mon HTML actuel j'ai ceci pour afficher une image :

<div class="col-md-4 col-sm-6 col-xs-12 mix id">
<div class="item"><a class="portfolio-popup" title="Circles auto-apprentissage" href="http://partikules.com/wp-content/uploads/2017/03/circle-logo-design-entreprise-apprentissage.jpg"><img src="http://partikules.com/wp-content/uploads/2017/03/circle-logo-design-entreprise-apprentissage.jpg" alt="" /></a></div>
</div>

je remplace par le code que tu as écris ?

Merci

Salut,
(pour être clair sur la proposition faites l'autre jour: ) c'est une proposition qui me semble assez simple sans trop s'embêter, mais il y a certainement moyen de faire mieux en comprenant bien toute l'API.

Je vais déjà commencer par expliquer ce que j'avais compris de ton problème : Il y a actuellement une seule image pour chacun de tes projets. Tu souhaites pouvoir mettre plusieurs images pour chacun des projets, chaque image l'une en dessous de l'autre avec un Titre au dessus plutôt qu'en dessous.

Maintenant explication simple (pour UN projet) de la solution proposer.
Il y a 2 parties dans le code HTML : une partie qui est visible et qui affiche la première image du projet, une partie qui est invisible qui contient ce que tu veux afficher dans la popup. Cette partie invisible doit avoir un identifiant (supposons id="projet1").
Pour que la partie invisible s'ouvre dans une popup lorsque l'on clique sur l'image, il faut faire un lien vers cette identifiant (avec la supposition faite : <a href="#projet1">) et attribuer une classe à ce lien pour que la fonction javascript magnificpopup soit appelé (avec la supposition : <a href="#popup2" class="open-popup-link"> )

Exemple correspondant :

<!-- L'image visible du premier projet -->
<a href="#popup1" class="open-popup-link"><img title="Circles auto-apprentissage" src="https://i2.wp.com/partikules.com/wp-content/uploads/2017/03/circle-logo-design-entreprise-apprentissage.jpg"/></a>

<!-- le code de la popup du 1er projet, qui doit s'afficher lorsque l'on clique sur l'image visible et qui n'est pas visible au depart-->
<div id="popup1" class="popup mfp-hide">
  <span>Le titre de la 1ere image du 1er projet : Circles auto-apprentissage</span>
  <img src="https://i2.wp.com/partikules.com/wp-content/uploads/2017/03/circle-logo-design-entreprise-apprentissage.jpg"/>
<br/>
  
<!-- J'ai pris ici l'image d'un autre projet juste a titre d'illustration, dans le principe il faut mettre la 2e image du projet Circles auto-apprentissage --> 
  <span>Le titre de la 2e image du 1er projet : Art Digital pour Vagudivague</span>
  <img src="https://i1.wp.com/partikules.com/wp-content/uploads/2017/04/photomontage-art-digital-scaphandre-rouge.jpg"/>
</div>

Si ensuite tu veux mettre un 2e projet, il y a juste à adapter en modifiant le href du lien et le src de l'image pour la partie visible, et l'id du div et les titres et src des images.

Désolé pour la réponse tardive j'étais absente pendant un petit moment.
Merci en tout cas pour ta patience !
Je viens d'essayer ton code en l'adaptant :

<div class="col-md-4 col-sm-6 col-xs-12 mix web">
<div class="item">
<a class="portfolio-popup" href="#popup1"><img title="Circles auto-apprentissage" src="http://partikules.com/wp-content/uploads/2017/03/circle-logo-design-entreprise-apprentissage.jpg" /></a>

<div id="popup1" class="mfp-close">
<span>Img1</span>
<img src="http://partikules.com/wp-content/uploads/2017/03/circle-logo-design-entreprise-apprentissage.jpg" />
<span>Img 2</span>
<img src="http://partikules.com/wp-content/uploads/2017/03/circle-logo-design-entreprise-apprentissage.jpg" />
</div></div>
</div>

Mais j'ai un souci quand je clique sur l'image ça ne fonctionne pas il ne trouve pas l'image...
Il doit y avoir quelque chose que je fais mal sans doute ?

Merci