Image gallery in a row? (single image works)

[Maverick]

Hi there guys,

I'm trying to make a little gallery using simplel css lightbox effect. I'm able to display a single image, but I can't figure out how to make a gallery out of it.

What I've already done to get the single image working:

Created a filed image_single and added it to the template, uploaded an image in the field

and then in my tamplate it looks like this:

<div class="col-md-4">
<a href="#image_single">
<img src="<?=$page->image_single->url ?>"  class="img-responsive center-block">
</a>

<!-- this is the lightbox part, hidden with css -->
<a href="#image" class="lightbox" id="image_single">
<img src="<?=$page->image_single->url ?>" class="img-responsive center-block">
</a>
</div>

I'm using bootstrap as my css framework

For the gallery I have tried creating Image_gallery field and adding it to the template and then in the template file I've tried this:

<div class="col-md-4">
<div class="row">
  <?php foreach($page->Image_gallery as $image) { ?>
<div class="col-md-6">

  <a href="#image_gallery">
  <img src="<?=$image->url ?>"  class="img-responsive center-block">
</a>
<!-- this is the lightbox -->
<a href="#gallery" class="lightbox" id="image_gallery">
  <img src="<?=$image->url ?>"  class="img-responsive center-block">
</a>
</div>

<?php } ?>
</div>
</div>

The result I'm getting is that I'm seeing all the pictures from Image_gallery field which is good, but it doesn't matter which image I click on, only the first image from the Image_gallery field shows up in the lightbox

[diogo]

If you see al the images, the problem is with the lightbox implementation. Which one are you using? And why do you need repeated images for the lightbox?

[Maverick]

The lightbox effect which I use, is purely css, didn't want to use any javascript for this, but I guess this is the problem then? or can I still get it to work somehow?

.lightbox {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
        display: none;
}

.lightbox img {

	margin-top: 5%;
}

.lightbox:target {
	outline: none;
	display: block;
}

[tpr]

In your foreach gallery loop you are creating many lightboxes with the same ID:

<a href="#gallery" class="lightbox" id="image_gallery">

ID's should be unique, only one per page is allowed with the same name. Try something like 

// before the loop:
<?php $counter = 1; ?>

// in the loop:
<?php $currentID = "image_gallery_" . $counter; ?>

<a href="#<?php echo $currentID; ?>">

<a href="#gallery" class="lightbox" id="<?php echo $currentID; ?>">
<?php $counter++; ?>

Then you will have IDs like "image_gallery_1", "image_gallery_2", etc.