Jump to content

Image gallery in a row? (single image works)


Maverick
 Share

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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;
}
Link to comment
Share on other sites

  • 2 weeks later...

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. 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...