GalleryView binding for WP Gallery, without NextGen

Question

Is there a WP plugin that binds jQuery GalleryView to the stock WP Gallery?

I love the appearance of GalleryView, but I don't want to have to use an external image & gallery database like NextGen. I just want to use the stock WP Gallery, stock WP media library, and display images attached to a particular post or page with jQuery GalleryView.

Answer 1

I'm afraid there's no plugin, but using jQuery GalleryView is not that hard actually.

Download

Download jQuery GalleryView and put the css and js folders inside a new folder galleryview in your theme's folder.

---

Setting Up the List

jQuery GalleryView needs an unordered list so we have to alter the gallery output:

add_filter( 'post_gallery', 'my_post_gallery', 10, 2 );
function my_post_gallery($output, $attr) {
        global $post, $wp_locale;
        static $instance = 0;
        $instance++;
        if ( isset( $attr['orderby'] ) ) {
                $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
                if ( !$attr['orderby'] )
                        unset( $attr['orderby'] );
        }
        extract(shortcode_atts(array(
                'order'      => 'ASC',
                'orderby'    => 'menu_order ID',
                'id'         => $post->ID,
                'columns'    => 3,
                'size'       => 'thumbnail',
                'include'    => '',
                'exclude'    => '',
                                    'ids'        => ''  // WP gallery shortcode uses ids="1,2,3"
        ), $attr));
        $id = intval($id);
        if ( 'RAND' == $order )
                $orderby = 'none';
                    if ( empty($include) ) 
                                    $include = $ids;
        if ( !empty($include) ) {
                $include = preg_replace( '/[^0-9,]+/', '', $include );
                $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
                $attachments = array();
                foreach ( $_attachments as $key => $val ) {
                        $attachments[$val->ID] = $_attachments[$key];
                }
        } elseif ( !empty($exclude) ) {
                $exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
                $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
        } else {
                $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
        }
        if ( empty($attachments) )
                return '';
        $columns = intval($columns);
        $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
        $float = is_rtl() ? 'right' : 'left';
        $selector = "gallery-{$instance}";
        $output = apply_filters('gallery_style', "
                <style type='text/css'>
                        #{$selector} {
                                margin: auto;
                        }
                        #{$selector} .gallery-item {
                                float: {$float};
                                margin-top: 10px;
                                text-align: center;
                                width: {$itemwidth}%;                   }
                        #{$selector} img {
                                border: 2px solid #cfcfcf;
                        }
                        #{$selector} .gallery-caption {
                                margin-left: 0;
                        }
                </style>
                <ul id='$selector' class='gallery galleryid-{$id}'>");
        $i = 0;
        foreach ( $attachments as $id => $attachment ) {
                $image = wp_get_attachment_image($id);
                $output .= "<li class='gallery-item'>";
                $output .= $image;
                $output .= "</li>";
                if ( $columns > 0 && ++$i % $columns == 0 )
                        $output .= '<br style="clear: both" />';
        }
        $output .= "
                        <br style='clear: both;' />
                </ul>\n";
        return $output;
}

Note: Of course, you can/have to customize this to your liking.

---

Enqueue the Scripts and Stylesheets

Let WordPress know what JS and CSS files we need and where they can be found:

add_action('wp_enqueue_scripts', 'enqueue_galleryview_stuff');
function enqueue_galleryview_stuff() {
    wp_enqueue_script(
        'jquery-ui-min',
        'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js',
        array('jquery')
    );

    wp_enqueue_script(
        'jquery-timers',
        get_template_directory_uri().'/galleryview/js/jquery.timers-1.2.js',
        array('jquery-ui-min')
    );

    wp_enqueue_script(
        'jquery-easing',
        get_template_directory_uri().'/galleryview/js/jquery.easing.1.3.js',
        array('jquery-timers')
    );

    wp_enqueue_script(
        'jquery-galleryview',
        get_template_directory_uri().'/galleryview/js/jquery.galleryview-3.0-dev.js',
        array('jquery-timers', 'jquery-easing')
    );

    wp_enqueue_style(
        'jquery-galleryview',
        get_template_directory_uri().'/galleryview/css/jquery.galleryview-3.0-dev.css'
    );
}

---

Print the jQuery Code

In order for GalleryView to work, we have to bind the function to the desired galleries:

add_action('wp_footer', 'print_galleryview_jquery');
function print_galleryview_jquery() {
    echo <<<JQUERY
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('ul[class^="galleryid-"],ul[class*="galleryid-"]').galleryView();
        });
    </script>
JQUERY;
}

Note: I'm using the wp_footer hook here.

---

Customization

So far, you should have the basic functionality of GalleryView attached to your WordPress galleries. Now it's time to adjust the styling and the like, I guess...