Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

1 Answer

up vote 3 down vote accepted
+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...

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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