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" />';
    }

Related posts

Leave a Reply

2 comments

    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>';
    
  1. Looks like you should remove the prettyPhoto parts, such as

    $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].'"  ]">'.wp_get_attachment_image($id, $size, false).'</a>' : '<a href="'.$image_attributes[0].'"  ]">'.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" />';
    }