[Plugin: Meteor Slides] Center slideshow within div and move buttons

The template tag (<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>), and the shortcode([meteor_slideshow]), both do the same thing. The template tag is for adding the slideshow directly to a theme file and the shortcode is for adding it to a post or page in the visual editor.

For what you want to do, use just the template tag, like this:

<div id="main">
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
</div>

Thanks for such a quick response! Ah, so I didn’t need to include the extra [meteor_slideshow]in there as I showed in the post above. you’ll most likely see me post up questions on some other topics you’ve covered, I just need a bit more clarification. I’m also interested in running it as a back ground. Just want to keep options open. The topic was posted here but was vague in answer as you pointed out it’s more involved. Any other posts here or information you could point me to would be much appreciated. Again, thanks for the quick response, this plugin works well out of the gate you can add function as needed. Awesome!

No problem, glad that helped! The best place to start would be in the Meteor Slides documentation.

Hi JLeuze,

What great support! and what a great plugin. thanks for all your work and contributions.

I’m having problems trying to get the nav buttons to display outside the actual slides. I’ve tried changing the main overflow as descried above to

.meteor-slides {
    margin: 0;
    overflow: visible;
    padding: 0;
    position: relative;
    z-index: 1;
}

but it doesn’t seem to be working. they still disappear when i place the outside. The other thing is i’ve got the slider at a lower z-index than an image I’m using over it as a frame. Is there any way to have just the nav buttons at a higher z-index, and the slides lower?

here’s the page: https://www.bouncemedia.ca

Thanks!

The overflow is set to hidden in the jQuery, so you need to set it to important to override it with CSS:

.meteor-slides {
    margin: 0;
    overflow: visible !important;
    padding: 0;
    position: relative;
    z-index: 1;
}

One issue with this is that the overflow is intended to crop the slides in some the transitions like “scrollRight”, to use this effect you have to use a simpler transition like “fade”.

To get the layers right with the z-index, they image frame would have to be at the same level in the markup as the slide navigation by adding it to the slideshow using a custom slideshow template. This way you can stack the navigation, then the image frame, and finally the slides. The way it is setup now, the frame has to be stacked above or below the whole slideshow.

Great thanks for the help. It appears that the fact that it was sliding and not fading was the issue.

I’ll look at adding the image in the template. The one thing i’m confused about is creating a custom css style sheet. In the instructions you provide, you say to copy meteor-slides.css into my theme folder. I have copied it there (in the root of u-design folder) but the plugin doesn’t seem to be pulling from there. Am I missing a step?

Thanks again and keep up the great work ??

oops! i got it working – was just a matter of moving the image files and re-pointing to them in the new css file within my theme folder.

thanks!

Okay So i’m working on stacking the image slides, navigation, and the frame i designed. This is a bit advanced for me, but I’m going to give it a shot.

here’s my approach:
To change the stacking order – would i do this by inserting the image within the template, then give the class for each element (nav, slides, frame) the appropriate z-index within the css file?

it looks like you have it working great. That’s exactly right, you need to set the frame to the highest z-index, the nav just below that, and the slides will automatically start at 1 and work their way up with each slide.