Help with the Sliders API – need image slider similar to Post Grid Slider

[mharpen]

I need a slider that displays like the Post Grid Slider, but for images, not posts. This seems doable using the include Flexslider and TB’s Sliders API (awesome api – thank you for including!).

Flexslider’s “Basic Carousel” slider capability is described here: http://flexslider.woothemes.com/basic-carousel.html

Here’s what I have so far. Please help me with settings for $media_positions and $slide_elements or any suggested html needed to get a similar effect as the Post Grid Slider. I also need to enable specifying a link URL for each image in the slider admin. TIA for any help!

// Slide types
$slide_types = array('image');
 
// Media positions - Full Width only, and because we're not using images, we'll leave crop size blank.
$media_positions = array('full' => 'medium');
 
// Slide elements - none
$slide_elements = array();
 
// Options
$options = array(
    array(
        'id'        => 'fx',
        'name'      => 'How to transition between slides?',
        'std'       => 'slide',
        'type'      => 'select',
        'options'   => array(
            'fade'  => 'Fade',
            'slide' => 'Slide'
        )
    ),
);
 
// Add Slider type
themeblvd_add_slider( 'thumbnails_slider', 'Thumbnails Slider',
	$slide_types, $media_positions, $slide_elements, $options, 'display_thumbnails_slider' );

// Display slider
function display_thumbnails_slider( $slider, $settings, $slides  ) {
 
    // For development
    // Enqueue Flexslider script
    wp_enqueue_script( 'flexslider' ); // will be added to wp_footer()
    ?>
    <script>
    jQuery(document).ready(function($){
        $(window).load(function() {
            $("#<?php echo $slider; ?>").flexslider({

		            animationLoop: false,
			    itemWidth: 350,
			    itemMargin: 5,

                controlNav: false,
                slideshow: false,
               animation: "<?php echo $settings['fx']; ?>"

            });
        });
    });
    </script>
 
    <div id="<?php echo $slider; ?>" class="flexslider">
        <ul class="slides">
            <?php foreach( $slides as $slide ) : ?>
                <li><img src="<?php echo $slide['image']['display']; ?>"></li>
            <?php endforeach; ?>
        </ul>
    </div>
    <?php
}

Topic

[mharpen]

I figured it out. Here’s a “film-strip” / “horizontal thumbnails” type slider if anyone is interested. Similar to the Post Grid Slider, but for Images. Images can link to any URL, and can have Title text below.

Add the code to the bottom of your functions.php (in your child theme).

Thanks Jason for including the Slider API and the docs. Took me a while to wrap my head around it, but finally the light bulb went off. One small suggestion please: Add a parameter to the add_slider() method to allow specifying ‘custom_size’ = true. So the slide editor will allow selecting from multiple crop sizes instead of just one. Or maybe add a function to the sliders API class to allow modifying the private $client_sliders array. Not a big deal, but it would prevent having to add another copy of a custom slider in order to provide an alternate $media_positions setting.

Thanks again. Theme Blvd ROCKS!

// Slide types
$slide_types = array('image');
 
// Media positions
$media_positions = array('full' => 'grid_3');
	//grid_3 = 240x150 hard crop
 
// Slide elements
$slide_elements = array('image_link', 'headline');
 
// Options
$options = array();


// Add Slider type
themeblvd_add_slider( 'thumbnails_slider', 'Thumbnails Slider',
	$slide_types, $media_positions, $slide_elements, $options, 'display_thumbnails_slider' );


// Display slider
function display_thumbnails_slider( $slider, $settings, $slides  ) {
 
   // Enqueue Flexslider script
    wp_enqueue_script( 'flexslider' ); // will be added to wp_footer()
    ?>
    <script>
    jQuery(document).ready(function($){
        $(window).load(function() {
            $("#<?php echo $slider; ?>").flexslider({

				slideshow: true,
				animation: "slide",
				animationLoop: true,
			        itemWidth: 270			// 270= crop width (240) + right padding below (20) + pretty class (10). note: can be smaller than 270, but not larger

            });
        });
    });
    </script>
 <div class="slider-wrapper standard-slider-wrapper">
  <div class= "slider-inner" style="min-height:200px">
  <div class= "slides-wrapper">
    <div id="<?php echo $slider; ?>" class="flexslider">
        <ul class="slides">
			<?php
			foreach( $slides as $slide ) {
				$slide[image][title]= '';
				$media_atts = themeblvd_sliders_get_media_atts( $slider, $slide, $settings );
				echo 
					'<li>' .
					'<div class="pretty" style="margin:0 20px 0 0">' .
					themeblvd_sliders_get_image( $media_atts) .
					'<p style="text-align:center; margin:0">' .
					$slide[elements][headline] .
					'</p></div></li> ';
            }
			?>
        </ul>
    </div>
   </div>
   </div>
  </div>
 <?php
}

[Jason Bobich]

Hi! Awesome, I’m glad to hear you figured it out. Is this anything you can post a live link to so people can see what it looks like? Or maybe you can come back and post a link after you’ve finished the live site with it.

[Author]

Replies