Wrong image displayed, despite the correct link

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');
?>
<a href="#<?php echo $attachments ?>"><img src="<?php echo $small_image[0]; >" alt="small"></a> 
<a href="#" id="<?php echo $attachments ?>" class="pressbox"><img src="<?php echo $large_image[0]; ?>" alt="large"></a>
<?php endforeach ?>
</div>
</div> 

Thanks in advance for looking into my request
With kind regards
Wanderer