[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!

Can’t believe I never came back to say Thank You! This worked perfectly. Enormous apologies and thanks so much for your help.

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

I have a question as well, how would you go about adding a text field to the options for it to display over the image?

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

Thanks mate, d but if I wanted to implement and add a text field how would I go about that within the plugin. Also is there a way to create thumbnails to click on to slide to the appropriate slide?

Thanks again for a great plugin it helps out a lot.

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.

Hello,

I’m trying to follow the guidelines above to create a Meteor slideshow with thumbnails. I’ve managed to create a new thumbnail size and added a loop directly after the slideshow loop to generate the thumbnails.

But… I’ve come unstuck with creating the thumbnails as paged links, so the slide changes when thumbnail clicked on. I’m guessing I need to add a chunk of javascript somewhere, but js is not my strong point!!

Can anyone point me in the right direction?

Many thanks,
Sarah

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.

Hello,

I have a problem with the Slide Height. When I setup the size from 200px to 377px the picture in the page doesn’t show in that size. I mean it still showing the picture with 2OOpx, but the box is in 377px
Here the link:
https://www.cadedental.com/cadedental/?page_id=5

Please help me to resolve this issue.
Thanks,
Lili

Many thanks for the quick response, that worked a treat – I just added the first chunk of code to slideshow.js, changing the anchors to my containing ul id. (I think the second is for if you want a separate link to change the slides too??)

One thing that’s not working though, and I can’t work out… the ‘activeSlide’ class doesn’t appear any longer – meaning I can’t highlight the current thumbnail. Any ideas?

Thanks again, and for the plugin too – it’s brilliant!

No problem, glad to hear you are making some progress on it! I think that if you manually create the pager, you might need to manually specify the active slide functionality as well: https://jquery.malsup.com/cycle/pager7.html

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.

Hi JLeuze,

Thank you so much for such an awesome plugin, I keep coming back to pick meteor slides over the other galleries ??

I was wondering if there’s an easy way to assign a specific css class to the paged navigation option – currently the active slide gets an “a.activeSlide” class, but is there a way to assign a unique css class to all the paged <a> buttons? Perhaps have them echo their respective slide’s title?

I have been looking through the source codes for the plugin but could not find a function that defines the paged navigation…pardon me as I am not well versed with php ??

Any help would be greatly appreciated!

Kayla

Ah I got it sorted out, it’s not very pretty but it will work –

Since the slideshow is powered by jquery.cycle.all.js found in the plugin’s js folder, I figured out that the slideshow navigation is built upon pagerAnchorBuilder, so around line 725 is where the paged navigation option is build –

line 732:
a = '<a href="#">'+(i+1)+'</a>';

Change to something like:
a = '<a href="#" class="'+(i+1)+'">'+(i+1)+'</a>';

I honestly don’t know any jquery but I needed the class to be dynamically generated, so I just used the same ‘+(i+1)+’ so that the class will increase by 1 number at a time, so that in css it will be:

a.1
a.2
a.3

and so on depending on how many slides you have in the slideshow. I needed this to assign each thumbnail to a slide and to be able to style each thumbnail specifically with a custom image (WordPress’ automatic thumbnail generation always gives you a smaller image of your main slider image, which is not what I was after)