Change code to display image attachment page

I have this code which displays images with their captions in a list.
On clicking caption, opens image in an attachment page, but clicking on image, opens that image with a dark-gray background. Is there a way to display image on attachment page on clicking on it?? I played alot with it, but no success.

$i = 0;
    $rand_id = mt_rand(1,1000);
    foreach ( $attachments as $id => $attachment ) {
        $image_attributes = wp_get_attachment_image_src( $id,'large' );


        $link = isset($attr['link']) && 'file' == $attr['link'] ? '<a href="'.$image_attributes[0].'"  rel="prettyPhoto[pp_'.$rand_id.']"><span class="mosaic-overlay"></span>'.wp_get_attachment_image($id, $size, false).'</a>' : '<a href="'.$image_attributes[0].'"  rel="prettyPhoto[pp_'.$rand_id.']"><span class="mosaic-overlay"></span>'.wp_get_attachment_image($id, $size, false).'</a>';
        $output .= "<{$itemtag} class="gallery-item">";
        $output .= "
            <{$icontag} class="gallery-icon">
                $link
            </{$icontag}>";

         if ( $captiontag && trim($attachment->post_title) ) {  //caption display
            $output .= "
                <{$captiontag} class="gallery-caption">
                " .wp_get_attachment_link($id, $size, true, false, wptexturize($attachment->post_title))  . "
                </{$captiontag}>";
           }

        $output .= "</{$itemtag}>";
        if ( $columns > 0 && ++$i % $columns == 0 )
            $output .= '<br style="clear: both" />';
    }

1. As pointed in the other answer, you should not have prettyPhoto part

2. The link should be changed to utilize the function get_attachment_link

Basically change this line in your code

$link = '<a href="'.get_attachment_link($id).'">'.wp_get_attachment_image($id, $size, false).'</a>';