[Plugin: Meteor Slides] Feature request – Replace paging with smaller thumbnails

Hi Christopher, you would have to make some customizations to your theme, but this wouldn’t be too tough to do.

Meteor Slides uses the jQuery Cycle plugin to power the slideshow. The paged links that are generated by default are just numbers that have been styled as icons.

These could be replaced with thumbnail images, there is an example of this on the jQuery Cycle site.

To do this, you would need to setup an additional featured image size in your theme’s function.php file for the thumbnail links.

You will also need to create your own loop to load the slideshow. There is a file in my plugin called meteor-slideshow.php which contains the loop. You could add that code right to the template you want the slideshow on, but it is kind of long so I’d suggest making a copy of the file in your theme and creating a function in your functions.php file to load it in your theme.

You could adapt the code from the theme to create the function, just give the loop file and function itself new unique names:

// Adds function to load slideshow in theme

	function meteor_slideshow($slideshow=NULL, $metadata=NULL) {

		include( 'meteor-slideshow.php' );

	}

Now you’d need to edit that loop to load a second loop after the slideshow loop which loads the thumbnail sized featured images as paged links for the slideshow.

To get that to layout right with the thumbnail links you’d also have to customize the CSS for the slideshow a bit. You can do that from your theme too:

Copy meteor-slides.css from /meteor-slides/css/ to your theme’s directory to replace the plugin’s default stylesheet. If you have navigation enabled, be sure to copy the buttons.png, next.png, and prev.png files to your theme’s images folder, or create new graphics to replace them.

Let me know if you run into any problems!

No problem Christopher, glad to hear you got it figured out!

@majorlee You could add a text field metabox, but it would take a lot of customization. You can simplify the process of adding text to the slideshow by using the slide title as the caption of the slide as shown in this example.

Adding a text field would use the same code from the plugin that adds the URL box, but you would want to add this to your theme’s functions.php file rather than editing the plugin. You can learn more about creating metaboxes like this in this tutorial.

Using the above info for adding thumbnail navigation, the thumbnails are automatically generated with the custom loop, you don’t have to create them separately.

Hi Sarah, the example I linked to above actually generates the thumbnail links for the pager dynamically.

Here is another example that uses existing markup, so you could use that with the thumbnail loop that you created, just make sure the thumbnails have anchors.

You shouldn’t have to do too much to the JavaScript in that example, just need to add this bit to the cycle function and change it to target the the correct anchors:

pagerAnchorBuilder: function(idx, slide) {
        // return selector string for existing anchor
        return '#nav li:eq(' + idx + ') a';
    }

And you’ll have to add this in after the cycle function and update it for your anchors:

$('#direct').click(function() {
    $('#nav li:eq(2) a').trigger('click');
    return false;
});

Let me know if you run into any problems with this, the next version of Meteor Slides will support custom slideshow scripts so that it is possible to make changes like this without hacking the plugin.

I’ve been building a slideshow with thumbnails and I figured out that the ‘activeSlide’ class is still there. But is being added to the container that the anchor is in instead of the anchor itself, so the CSS has to be updated to target that correctly.