Question

I’m looking for an easy way to do a photo gallery on WordPress with a page indicator. I found the WP Nivo Slider http://wordpress.org/extend/plugins/wp-nivo-slider/screenshots/ but it is very restrictive in terms of what it can do and when one can use it.

Ideally I’d like to just include a bunch of images in the HTML and have some slider automatically pick up on the tags and combine them into one…any simple, but flexible API would be excellent!

Answer 1

I’ve not looked at the Nivo Slider WordPress plugin and it’s restrictions but the Standalone Nivo Slider can be used easily in a WordPress install and gives you lots of flexibility. I’m not sure what you mean by page indicator but you can pull info out of the page/post if you want. Just to give you an example, here’s some code below I used to create an image slider using a custom query pulling the featured images out of posts in a specific category.

     <!-- Slideshow -->
        <div id="nivowrapper">
          <div id="nivoslider">
            <?php 
            $featured_slide = new WP_Query('cat=4&showposts=-1');
            while ($featured_slide->have_posts()) : $featured_slide->the_post();
              ?>
               <?php 

                if (function_exists('has_post_thumbnail') && has_post_thumbnail()) {
                    $img_height = 293;
                    $img_width  = 960;

                    slider_image(thumb_url(),$img_width,$img_height);

                }
              ?>
            <?php endwhile; ?>
            <?php wp_reset_query(); ?>
          </div>
        </div>
    <!-- Slideshow End -->

This uses the method slider_image() which is in my functions.php along with the method thumb_url() – the reason for this is that it uses timthumb to make sure the whole thing doesn’t go south if the client uploads an incorrectly sized image to the featured post category.

In functions.php

 # This function returns the attached Featured image in the page / post
 function thumb_url(){  
   $thumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array( 960,960 ));
   return $thumb_src[0];
 }


# This function resizes the featured image to the requested proportions via timthumb. 
function slider_image($image_source,$width,$height) {
  global $post;

  echo '<img src="'.get_bloginfo('template_directory').'/timthumb.php?src='.$image_source.'&amp;h='.$height.'&amp;w='.$width.'&amp;zc=1" alt="" title="'.get_the_title().'" />';
}

I have kind of gone off Nivo Slider a bit as there were issues with captions disappearing in Firefox that never got resolved. Have you looked at Flexslider 2? I think it’s technically still in beta but it is awesome and is highly configurable. I’ve just used it on a site and it’s fantastic (especially the fact you can scroll on tablets and smartphones using finger swipe).

Hope this helps a bit.

EDIT

I realised I should add one last bit for anyone that reads this and hasn’t used the Nivo Slider standalone. You need to initialise Nivo Slider. Include the Nivo Slider Javascript file (enqueue it in your functions.php) and the CSS and place the following code in the head or before the closing body tag. You can change the parameters as required;

  <script type="text/javascript">
    jQuery(window).load(function($) {

      jQuery('#nivoslider').nivoSlider({
        effect:'fade',
        slices:15,
        animSpeed:700, 
        pauseTime:7000,
        controlNav: false,
        directionNav: true,
        directionNavHide: false,
        captionOpacity: 1
      });

    });
    </script>