[Plugin: Meteor Slides] Replace paging with smaller thumbnails

Hi kairi, the problem is that you have changed the pager from using the “#meteor-buttons” container to using the “.nav” container. By doing this, that class is used for the nav on each slideshow and they are generic so the script tries to dynamically insert the pager links into each slideshow.

The reason this is setup with an ID is because the ID is unique, each time you add a new slideshow with different slides, it dynamically generates navigation for the slideshow with that slideshow’s unique ID so that the slideshow script can add the right nav to the right slideshow and the controls of one slideshow don’t affect another.

You could recreate this using IDs instead of a class if you add to, but this is already setup for you in the plugin, so I’d try to avoid do that if you can.

Why are you creating a new nav element instead of using the existing one? Let me know what you want to achieve, you should be able to tweak the template or stylesheet to get it.

Hello JLeuze !

thank you for your answer ^^
I changed the code because it doesn’t work =(

When I put this code I manage to have thumbnails in my pager
[meteor_slideshow]

But when I put lots of slideshows and when I want to integrate a specific slideshow like this

[meteor_slideshow slideshow=”insolite-jeu-video-chaussures-jeux-video-jamie-ferraioli”]

There is not any more thumbnails in my pager =(

I don’t know how I can do to have thumbnails in my pager for a specific slideshow

thank you very much !!!

do you have an idea ?

PS : If you really need I can send you the url of my article ^^

You won’t be able to use multiple slideshows with a generic class, they have to have unique IDs. I tested it with the original code and it worked for me. Try using the original version and posting a link so that I can see what the problem is.

If you only want the thumbnails on certain slideshows, you could use a conditional check in the slideshow template, but using CSS to hide the slideshow would be the easiest way to handle that.

hello JLeuze

I come back to the original plugin and I only change the code of
slideshow.js

var $slidetransition = meteorslidessettings.meteorslideshowtransition;

$j(document).ready(function() {

    $j('.meteor-slides').before('<ul id="nav">').cycle({ 

		height: $slideheight,
		width: $slidewidth,
		fit: 1,
		fx: $slidetransition,
		speed:  'fast',
		timeout: $slidetimeout,
		pause: 1,
		prev: '#meteor-prev',
		next: '#meteor-next',
		pager:  '#nav',
		pagerEvent: 'click',
		cleartypeNoBg: 'true',
		slideExpr: '.mslide',
		pagerAnchorBuilder: function(idx, slide) {
  return '<li><a href="#"> <img src="' + jQuery(slide).find('img').attr('src') + '" width="90" height="90" /> </a></li>';
}

And when I use that code [meteor_slideshow] it’s always good but not with
[meteor_slideshow slideshow=”insolite-jeu-video-chaussures-jeux-video-jamie-ferraioli”]

do you have an idea please =( ?

You can see that at this url :

https://www.casualgamer.fr/insolite-jeu-video/insolite-jeu-video-des-chaussures-rendant-hommage-a-nos-jeux-video-preferes

Thank you very muchhhh

The thumbnail images are in the pager, they are just being hidden by the CSS in the stylesheet for those buttons.

Aside from adding the “pagerAnchorBuilder” option, you don’t have to change anything else in the script. The “pager” option’s value should be “#meteor-buttons” instead of “#nav”.

You don’t have to add the container for the pager manually like this:

$j('.meteor-slides').before('<ul id="nav">').cycle({

The default will work:

$j('.meteor-slides').cycle({

The container for the pager is generated in the slideshow template and has a unique ID, like “#meteor-buttonsinsolite-jeu-video-chaussures-jeux-video-jamie-ferraioli”, based on your slideshow slug. jQuery Cycle then dynamically populates this container with the pager links, but with specific slideshows, it does this using metadata from the template so that it can target that unique container’s ID.

Take your CSS that you are using to style that nav you added manually, and set it up to style the nav that is being generated by jQuery Cycle.

Like leave the .meteor-buttons stuff, that is the generic class that will style any slideshow’s nav. But add more like that with your other styling that is just for the slideshows you want thumbs on and use the ID of that slideshow to override the default class setting, like “#meteor-buttonsinsolite-jeu-video-chaussures-jeux-video-jamie-ferraioli a” instead of “.meteor-buttons a”.

Based on your current CSS, it might look something like this:

#meteor-buttonsinsolite-jeu-video-chaussures-jeux-video-jamie-ferraioli { width: 500px; margin: 15px }
#meteor-buttonsinsolite-jeu-video-chaussures-jeux-video-jamie-ferraioli a { width: 90px; float: left; margin: 8px; padding: 3px; display: block; border: 1px solid #ccc; }
#meteor-buttonsinsolite-jeu-video-chaussures-jeux-video-jamie-ferraioli a.activeSlide { background: #88f }
#meteor-buttonsinsolite-jeu-video-chaussures-jeux-video-jamie-ferraioli a:focus { outline: none; }
#meteor-buttonsinsolite-jeu-video-chaussures-jeux-video-jamie-ferraioli img { border: none; display: block }

Thank you very much JLeuze !

Now I have thumbnails in my pager

https://www.casualgamer.fr/insolite-jeu-video/insolite-jeu-video-des-chaussures-rendant-hommage-a-nos-jeux-video-preferes

Just the CSS changed and became not pretty, do you know why?

if I understand, each time I add a slideshow I have to put a news css ? ^^

Kairi

You’re welcome Kairi! The pager buttons are wrapped in
<li> tags, but there isn’t a
<ul> tag. You shouldn’t need these in a list, try setting them up like this instead:

return '<a href="#"> <img src="' + jQuery(slide).find('img').attr('src') + '" width="90" height="90" /> </a>';

One other thing, the button anchors need the height set to match the width, and removing the background image:

#meteor-buttonsinsolite-jeu-video-chaussures-jeux-video-jamie-ferraioli a {
    background: none;
    border: 1px solid #CCCCCC;
    display: block;
    float: left;
    height: 90px;
    margin: 8px;
    padding: 3px;
    width: 90px;
}

That should get the get them closer to looking right.

If you only want thumbnails on a few certain slideshows then you’d have to add them as targets in your CSS. But if you want most of them to have thumbs, it might make more sense to make the thumbnails the generic class, and target and slideshows you want to use the “dot” pager on instead.

Either way, add the extra slideshows by adding more IDs, rather then reiterating the rules:

#meteor-buttonsinsolite-jeu-video-chaussures-jeux-video-jamie-ferraioli a,
#meteor-buttonsnew-slideshow a {
    background: none;
    border: 1px solid #CCCCCC;
    display: block;
    float: left;
    height: 90px;
    margin: 8px;
    padding: 3px;
    width: 90px;
}

Hello JLeuze !

Thank you very much !!! it’s just amazing what you have done !
your plugin it’s just awesome and you give me lots of help !
Thanks to you !!! my poor little blog can continue !

Thank you for your kindness and your availability !

Kairi

You’re welcome Kairi, glad to help!

sorry if i bump this post but i would like to embed the thumbnail but i have no idea how to do it. neither this post helped me.

could me explain better? thanks a lot