Colorbox multiple diaporama image en cliquant sur une image

Question

S'il vous plaît jeter un oeil à ce site comme référence: http://www.philsalesses.com/place-pulse/

Sur la gauche, vous verrez une capture d'écran d'une image. Si vous cliquez sur l'image, elle ouvrira une boîte de couleur pour cette image. J'utilise wordpress, donc associé à ce poste il y a 4 autres captures d'écran, le tout dans une galerie. Ce que je veux faire est quand vous cliquez sur cette image, pour faire défiler toutes les images dans la galerie associée à ce poste.

Je suis flambant neuf à wordpress, alors s'il vous plaît parlez-moi.

Answer 1

J'ai utilisé NextGen Gallery, importé les images en utilisant cela, désactivez l'option "Effet" dans les options. Puis je suis allé à la source nextgen et j'ai ajouté colorbox-1 en tant que classe sous chaque img. Style le CSS et j'ai terminé. 4 heures de plus.

Jetez un oeil à http://www.philsalesses.com/seaswarm pour une démo.

Answer 2

Pas besoin de parler à tout le monde commence quelque part. Comme pour montrer vos autres images, la façon dont le plug-in colorbox est configuré sur votre page est comme si (pseudo-code):

for all links that contain an image { 
    if the link is to an image { 
     if the image has a CSS class of "colorbox-[0-9]+" { 
      group it with all other images with the same CSS class 
     }  
     if the image has a CSS class of "colorbox-manual" or no CSS class { 
      don't group it with any other images 
     }  
    } 
} 

regardant votre page Je vois deux problèmes:

1. Votre un lien d'image a la classe CSS "colorbox-manual".
2. Il n'y a qu'un seul lien sur votre page qui répond aux critères ci-dessus :)

La meilleure façon de le fixer serait d'ajouter les 4 autres images à votre message afin qu'ils apparaissent sous forme de vignettes, mais je pense ce n'est pas ce que tu veux. Comme un hack, ce que vous pouvez faire est d'ajouter les 4 autres images et ensuite leur donner un style display: none. De cette façon, le plugin colorbox les trouverait et les regrouperait avec votre image principale, mais ne montrerait pas réellement les vignettes sur le post.

Quelque chose comme cela pour les quatre images:

<a href="image1.jpg" style="display: none;"><img src="image1-thumb.jpg" /></a> 
<a href="image2.jpg" style="display: none;"><img src="image2-thumb.jpg" /></a> 
<a href="image3.jpg" style="display: none;"><img src="image3-thumb.jpg" /></a> 
<a href="image4.jpg" style="display: none;"><img src="image4-thumb.jpg" /></a> 

Si cela ne fonctionne pas, vérifiez dans votre balisage pour le class que le plugin colorbox ajoute à vos images. Il devrait être sous la forme colorbox-[0-9]+ (c'est-à-dire colorbox-123).