Sure, you can do that. If you don’t add links to the slides they won’t be clickable.
To position the buttons above the slideshow, put the slideshow template tag and buttons inside a container to wrap around the whole thing like this:
<div id="meteorslides-wrapper">
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
<a class="meteorslides-button meteorslides-button-1" href="#">Button 1</a>
<a class="meteorslides-button meteorslides-button-2" href="#">Button 2</a>
</div><!-- #meteorslides-wrapper -->
To style that, you’ll need to position the buttons absolutely with a high z-index to layer them above the slideshow, and set the position of the #meteor-slides-wrapper
container to relative so that the buttons stay within that container:
#meteor-slides-wrapper {
height: (Same as slideshow);
position: relative;
width: (Same as slideshow);
}
.meteorslides-button {
bottom: 10px;
position: absolute;
z-index: 9999;
}
.meteorslides-button-1 {
right: 100px;
}
.meteorslides-button-2 {
right: 50px;
}
You can change the bottom and right values of the buttons to position them exactly where you want them.
I’ll give that a shot. Thank you so much for your quick response!!
It’s working beautifully! Thanks so much!
Unrelated question, but how do I rearrange the order of the slides. Seems like it should be obvious, but I can’t find it.
Sorry..in the midst of trying to finish this and had a couple other questions…Does z index work on mobile devices? I set the z-index to show perfectly in Firefox, but it is off in Safari. Is there a way to tell Safari to add more pixels so that it’s aligned correctly?
The slides are sorted chronologically like blog posts, so you can change the published date to sort them, or there are plugins that will add drag and drop sorting functionality.
The z-index layering should work on every browser and device. Are the buttons layered incorrectly, or positioned in the wrong spot? I can take a look if you want to post a link.
The buttons were in the wrong spot, but we were able to fix the positioning now. Realized we had to set the buttons images to “relative” in the CSS.
Cool, good to hear you got it figured out.