WordPress Gallery on single page

Question

My current WordPress theme has a built in gallery. Each gallery displays the first / main thumbnail and once clicked opens the entire content of this specific gallery in a shadowbox. My ideal goal now is to find a way to alter this that instead of displaying the shadowbox directly it would direct to a single page with the specific galleries content.

As below my current gallery code:

    <div id="maincontentwrap">
        <div class="main-sep">
        </div><!-- .main-sep -->
        <div id="contentwrap">  
            <div id="content-gallery" role="main">
                <?php 
                $wp_query = new WP_Query();
                $wp_query->query( array( 'post_type' => 'galleries', 'posts_per_page' => of_get_option('le_gallery_items'), 'paged' => $paged, 'orderby' => 'menu_order', 'order' => 'ASC') );
                $mod = 1;
                while ( $wp_query->have_posts() ) : $wp_query->the_post(); 
                $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order') );
                if(has_post_thumbnail()) {
                    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
                    $src = $src[0];
                }
                else{
                    foreach ( $attachments as $id => $attachment ) {
                        $src = wp_get_attachment_url( $id );
                    }
                }
                 if ($mod % 3 == 0) {
                    echo ' <div class="gallery-entry-img-last">';
                 }
                 else{
                    echo ' <div class="gallery-entry-img">';
                 }
                 ?>
                <div class="gallery-entry-img-l"><a rel="next" href="<?php echo $src; ?>"><span class="rollover" ></span><img class="blog-entry-img" src="<?php echo get_bloginfo('stylesheet_directory'); ?>/library/tools/timthumb.php?src=<?php echo $src; ?>&amp;w=270&amp;h=198"  alt="<?php get_the_title(); ?>"/></a>
                    <span class="gallery-entry-img-tab"></span>
                </div>
                <span class="gallery-index-title"><?php the_title(); ?></span>
                <div class="hidden-gallery">
                    <?php 
                        $pic_count = 0;
                        foreach ( $attachments as $id => $attachment ) {
                        $pic_count++;
                        $others_src = wp_get_attachment_url( $id );
                    ?>
                        <a rel="next" href="<?php echo $others_src; ?>" title="<?php the_title(); ?>"></a>
                    <?php
                    }
                    ?>
                </div><!-- .hidden-gallery-->
            </div>
            <?php
            $mod++;
            endwhile;
            ?>
            <div style="clear:both;"></div>
            </div>  
        </div><!-- #contentwrap-->
    </div><!-- #maincontentwrap--> 

Would anybody have an idea how I can have this achieved? Some expert advise would be truly appreciated.

Answer 1

Use wp_get_attachment_link( $id, $size, $permalink, $icon, $text ); (see http://codex.wordpress.org/Function_Reference/wp_get_attachment_link). This outputs the link to the attachment page. So you just need to adapt your code with this function. Use value = 0 for the $permalink argument so your link brings you to the attachment page (value = 1 will bring you to the file itself). Beware, though, that the "shadowbox" is probably triggered by event binding (clicking on the anchor) in a JavaScript, so you might have to adapt your HTML code for the links. If the selector in the script for shadowbox uses a class name or an ID to detect the click, you will probably need to change the ID or class name of the container of your link in order to be sure that your target page does not get displayed within the shadowbox. You can also (and should, actually) use wp_deregister_script() to deregister the script that displays the shadowbox, considering you don't need it in this page.