1

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.

1 Answer 1

3
+50

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...

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.