Wrong image displayed, despite the correct link - css

Question

Here is the very weird issue I'm dealing with at the moment: I am trying to implement a lightbox effect in my wordpress theme. Following this tutorial here (the CSS code used is this one: link). I tried it as it is, it works very well.
But I'm not looking for applying the effect to the featured image but to all images in a post. I have changed the code to match my need, it works if I have only one picture in the post but if I add another one (or more) that's when the problem starts:
when I click on a picture, no matter which one, it's only the first one that get displayed in the large version. But when I check the source code, the relevant picture is called for the large version of each picture.
Here's the bit of code I'am using for this lightbox effect:
<?php
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'post_mime_type'=> 'image',
'orderby' => 'ID',
'order' => 'ASC',
);
$attachments = get_posts( $args );
?>
<div class="nine columns">
<div class="about">
<h2><?php the_title(); ?></h2>
<?php foreach ( $attachments as $attachment ) :
$attachments = get_posts( $args );
$small_image = wp_get_attachment_image_src($attachment->ID, 'thumbnail');
$large_image = wp_get_attachment_image_src($attachment->ID, 'full');
?>
<img src="<?php echo $small_image[0]; >" alt="small">
<img src="<?php echo $large_image[0]; ?>" alt="large">
<?php endforeach ?>
</div>
</div>
Thanks in advance for looking into my request
With kind regards
Wanderer

Answer 1

Your code has three problems:
1. should not call $attachments = get_posts( $args ); in foreach
2. the href of the small image link is incorrect
3. the id of large image link is incorrect
Try this:
<?php
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'post_mime_type'=> 'image',
'orderby' => 'ID',
'order' => 'ASC',
);
$attachments = get_posts( $args );
?>
<div class="nine columns">
<div class="about">
<h2><?php the_title(); ?></h2>
<?php foreach ( $attachments as $attachment ) :
$small_image = wp_get_attachment_image_src($attachment->ID, 'thumbnail');
$large_image = wp_get_attachment_image_src($attachment->ID, 'full');
?>
<img src="<?php echo $small_image[0]; ?>" alt="small">
<img src="<?php echo $large_image[0]; ?>" alt="large">
<?php endforeach ?>
</div>
</div>