August 31, 2011 / / 73 Comments

Meteor Slides 1.4 features a new slideshow design, support for the Members plugin, custom slideshow script support, and several new and updated translations.

Meteor Slides has been busy since version 1.3.3 was released. The number of downloads doubled to over 40,000 with nearly 80 ratings and many generous donors have also helped to keep my coffee cup full, thanks!

I recently created a GitHub repository for Meteor Slides; drop by if you’d like to fork, pull, watch, or otherwise fiddle with my plugin.

A new slideshow skin

The most noticeable change in version 1.4 is a new skin for the slideshow. The new navigation arrows and paged buttons improve the visibility on a wider range of backgrounds and just freshen things up a bit. See it in action on the plugin homepage.

These updates should enhance the navigation’s usability without being too drastic of a change visually. But no one has to switch the design of the slideshow on their site. I have packaged up the original design as a slideshow skin called Retrograde that you can drop into the theme to use the original design.

Keep an eye out for more slideshow skins, I have a few on the drawing board that I will release soon.

Members plugin support

You might be able to tell from my plugin, but I don’t like to add functionality to themes when there is an awesome plugin that could be used instead. The same goes for adding functionality to plugins!

Allowing users to control which roles have access to Meteor Slides has been on my GitHub issues list for a while now. This could be built into my plugin, but that adds complexity that most users don’t need and deviates pretty far from the plugin’s purpose. And there is already an awesome plugin for managing users and roles called Members.

Justin Tadlock’s Members plugin is one of the few plugins I use on nearly every site I build. With Members it is simple to customize a role for a client that has just the capabilities they need to create a better user experience.

I knew I wanted to extend those custom roles to include Meteor Slides capabilities as well. My first attempts at supporting Members didn’t work out, but thanks to Justin’s book, Professional WordPress Plugin Development, which he co-wrote with Brad Williams and Ozh Richard, I was able to get it working great!

Adding support for the Members plugin is the most noticeable improvement, but there are a lot more behind the scenes. I added uninstall functionality for plugin options, moved the admin functions to a separate file, re-organized the plugin, and really improved the code overall. If you want to write awesome WordPress plugins, this is the book to get!

Custom slideshow script

I have extended Meteor Slide’s support for custom stylesheets and templates to include slideshow scripts as well. This should rarely be needed, but is handy if you need to heavily customize the paged navigation. Check out the documentation on custom slideshow scripts to learn more.

More translations

Meteor Slides is now available in fifteen languages thanks to the kindness of these translators!

Hebrew: Translation by Ariel Klikstein
Japanese: Translation by COCOM
Polish: Translation by Marcin Pronobis
Portuguese: Translation by Hugo Baeta
Russian: Translation by Boris Homiakov
Updated Swedish: Translation by Simon Wämmerfors

Download Meteor Slides from WordPress.org
Category:
Meteor Slides, WordPress
Tags:
, ,

Join the conversation! 73 Comments

  1. dartisan

    Hi,

    It looks great, good work! I’m just getting it up and running for the first time, on a test site (using the Thesis theme) and I need to customize the slideshow template (to include an excerpt and title), however I see no sign of in the meteor-slides-plugin.php. Has something changed or am I misinterpreting the guidance on your site?

    Thanks.

    • dartisan

      …the answer is: yes, I am misinterpreting it, and opened the wrong PHP clearly! Apologies, thanks again for a great looking plugin.

      • Josh

        Thanks! That’s right you need to edit the meteor-slideshow.php file which is now hidden in the includes folder. Glad to hear you got it figured out.

  2. Ciprian

    Hi,

    Great plugin, thank you.
    I use “Meteor Slides” on many sites and work perfectly everytime, whenever the theme I use.
    I have a little question. Is there a simply way (a metadata or something to modify in CSS) to hide titles of images when hovering above the slide? I use “Meteor Slides” often in header of sites and I don’t wish to see titles of pictures here.

    I find a workaround and upload a transparent image positioned absolute with a z-index above the slideshow, but I wondering is’nt a simplier way.

    Thank You

    • Josh

      Hi Ciprian, thanks for the kind words! Yes, you can remove the title tooltip for the images using a custom slideshow template.

      The trick is that “the_post_thumbnail” function for the slide images loads the whole image tag, so it is difficult to edit. But if you get just the URL of the slide image, you can make your own image tag without a title to remove the tooltip.

      Here is the code you need to do this. This replaces everything within the “mslide” div container which starts on line 103:

      
<?php // Get just the URL for the slide featured image
						
$featuredslide = wp_get_attachment_image_src( get_post_thumbnail_id($GLOBALS['post']->ID), 'featured-slide' ); ?>
				
<?php // Adds slide image with Slide URL link
					
if ( get_post_meta( $post->ID, "slide_url_value", $single = true ) != "" ): ?>
					
	<a href="<?php echo get_post_meta( $post->ID, "slide_url_value", $single = true ); ?>"><img src="<?php echo esc_attr($featuredslide[0]); ?>" alt="<?php the_title(); ?>" /></a>
			
<?php // Adds slide image without Slide URL link
					
else: ?>
					
	<img src="<?php echo esc_attr($featuredslide[0]); ?>" alt="<?php the_title(); ?>" />
					
<?php endif; ?>
      • Ciprian

        Thank you very much Josh, working perfect. But is not the first time when I learn something for you – with Meteor Slide and Weaver I learn about z-index, the plugin is very well documented and maintained and your tutorials let me say just: “AHA, thats the way it works things” 🙂

        Best Regards,
        Ciprian

  3. jerry lucas

    I messed up and need help fixing it. I added a slideshow and them tried to make it a child of a parent but that not only didn’t work, but it gave me two slideshow categories with the same name and a “parent” tied to only one… but who knows which since they are the same. How cam I delete my slideshow categories (not the slides) and start over?

  4. myinthtwe

    Meteor Slides different dimensions?

    wordpress version 3.2.1
    meteor slides plugin version 1.4

    i using short code.

    but not change. How can i try?

    Best Regards,
    myint

    • Josh

      Hi, are you using metadata in the shortcode to resize the slideshow like this:

      [meteor_slideshow metadata="height: 100, width: 200"]

      • myint

        i need function_exists code

        inside width and height;

        • Josh

          Are you saying that you want to add metadata for height and width to the template tag, or am I misunderstanding you?

          • myint

            yeath, i want add metadata in customize width and height
            “( function_exists( ‘meteor_slideshow’ ) ) { meteor_slideshow(“test”,”width: 100 height: 150″);”

          • Josh

            Try it with the metadata options separated by commas:

            ( function_exists( ‘meteor_slideshow’ ) ) { meteor_slideshow(“test”,”width: 100, height: 150″);”

          • myint

            thank.

            my theme is twentyten.
            i put your plugin banner and sidebar on one page.
            banner size is use 980×198 plugin setting. sidebar size is 200×500.
            i also create two category slideshows.
            banner size can control plugin setting and customize metadata.
            i upload sidebar image 200×500 and using customize metadata
            function_exists( ‘meteor_slideshow’ ) ) { meteor_slideshow( “left-slideshow”,”width: 200, height: 500″);
            but display image is 200×198
            link is /uploads/leftside-200×198.jpg

          • Josh

            This is because the slide images are cropped to fit within the dimensions on the settings page. So if that page has the height set at 198px, any images taller than that will be cropped to 198px.

            If you want to have slideshows with different heights and widths, make sure that the settings match the highest and widest slideshows so that none of the images are cropped. However you will then have to set the height and width of each slideshow using metadata.

            Don’t forget to re-upload your images after changing the settings, the images are only cropped when they are uploaded.

          • myint

            Thank Josh.

            I try it?

          • myint

            Great plugin, I got it. thank you.

          • Josh

            Thanks, no problem!

  5. Bruce Scott

    Hi. It’s not very clear where this code should go in the 2011 template.
    Can you help?

    Cheers.

    • Josh

      Hi Bruce, it depends on where you want the slideshow. Do you want it to replace the header image? Just the homepage, or all pages?

      • Bruce Scott

        I want it to replace the header for all pages but I’m really struggling – the file sizes are 958×332

        Can you help?

        • Josh

          Sure, in the header.php file of Twenty Eleven, there is a chunk of code that loads the images. It starts on line 78, and ends on line 97, remove that code and replace it with the slideshow template tag:

          <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
  6. Angelo

    Hello Josh
    I appreciate your plugin. Congratulations.
    Could you add in the next version navigation with the numbers? Something like that http://img695.imageshack.us/img695/6666/asdasdfu.jpg
    It would be very useful!

    Thanks

    • Josh

      Thanks Angelo! The good news is, the paged navigation buttons are numbered, the default slideshow skin just hides the numbers and uses a graphic instead.

      If you inspect them with Firebug, you’ll see the numbers. You can use a custom stylesheet to reveal the numbers by removing this rule: 

      text-indent: -9999px;
      • Angelo

        Thank you.
        I tried but graphically the result is not very nice. The numbers are placed over the image and this is a problem. Ehm….I’m not very good with css.
        It would be nice if you could include this mode in the settings panel.

        • Josh

          Yeah you do need to play around with the CSS a bit. I’m planning to make some slideshow skins that could be used as a starting point for creating custom slideshows.

          Here is an CSS example that looks a little better with the numbers showing:

          
.meteor-buttons a {
    background: #333;
    color: #fff;
    display: block;
    float: left;
    height: 10px;
    line-height: 10px;
    margin: 0 3px 0 0;
    outline: none;
    padding: 3px;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    width: 10px;
}

.meteor-buttons a:hover,
.meteor-buttons a.activeSlide {
    background: #666;
}
  7. Brian M

    Wow, I’m glad I finally found this WordPress slider. It’s got great built-in features and I’m finding it mostly easy to customize.

    Hope you can help me with a question…

    I’m using this slider on a WordPress theme that I am designing to be completely mobile-friendly by setting max-width’s and then if the browser/device is smaller then the max width everything shrinks and adjusts to fit, even some images are set with variable width/height options.

    I’ve figured out how to make the slider width vary, and also the slider images width and height vary, but the height of the slider box is not varying. Any ideas how to get a variable height slider box.

  8. Anton

    Hi Josh,

    great plugin, I actually got it to work almost first time, I have bever done a website before so I am very very new to all this.

    I can put the slide show into the post, but i want it at the top of the page and not the bottom.
    I put the php code into the header PHP using the editor but can’t get it in the right place.

    Sorry to seem dumb, but just cant work it out.

    I would also like to put a wiget box on the right hand side of my site, but can only get it to work on the left.

    Once again thanks for the Plugin.

    Fron very Newbie

    Thanks

    Anton

    • Josh

      Hi Anton, thanks for trying my plugin! It looks like you got the PHP template tag working in the right spot, is that correct?

      You want a widget box on the right side, do you want to add a second sidebar to the right, or switch the sidebar from the left to the right?

  9. Mark Gason

    Hi Josh,
    I am the support person fro Storefront Themes. I used Meteor slides on some personal projects and loved it. I recently recommended it on the forums to someone. they ran into a problem and I am wondering if you can think of a solution so I can keep recommending Meteor.
    The theme has a slider on the frontpage already. It is a one instance Nivo slider coded into the theme. When meteor is installed its backend interface blends with the one for the existing slider and slides from Meteor slideshows get added to the Homepage slider.
    Not a big deal, just wondered if you had a simple fix?
    There is a test site I could give you a login to if you emailed me.
    mark

    • Josh

      Hi Mark, thanks for recommending my plugin! It sounds like the slides for Nivo are also created by a post type called slides? If this is the case the name of the post type for one of them would have to be changed.

      Feel free to email me the login at mail@jleuze.com if you’d like me to check it out.

  10. Alex

    Hello Josh.
    I have had no problem running your pulgin when wordpress is in the main directory and I looks great. However I am running WAMP and this time have WP installed in to a subdirectory. The header Div displaying blank and not showing the images.

    • Josh

      Hi Alex, I haven’t tried running it locally from a subdirectory, but I have used it locally a lot and on a live subdirectory, so that shouldn’t cause any problems.

      I would check the source code, make sure the code for the slideshow is loading and check the image URLs, confirm whether or not they are correct. It could be a script that isn’t loading, or a simple theme conflict.

  11. Anne Uy

    Hi Josh! I have a problem with Meteor Slides. I can’t seem to have it show on my blog. It’s supposedly under the Photoworks section in the footer on http://blog.anneuy.com/ Is it alright if you can tell me what I might be doing wrong? I Firebugged it and it shows the the visibility is hidden.

    Thanks in advance!

    • Josh

      Hi Anne, it looks like you have added some keywords in the metadata. The metadata is only changing the slideshow options, try leaving that blank.

  12. Abraham

    Hi Josh, you helped quite a while back with changing the default header for the Twenty Ten Theme, to use Meteor slides. Now I have a new (twenty eleven) and the header.php filea don’t seem to be the same.

    Please kidnly remind me from which line in my header.php, to which line do I delete so that I can insert the code:

    Thanking you in advance!!

  13. Josh

    Hi Abraham, this forum post explains how to add a slideshow to the header of Twenty Eleven.

  14. François

    Hi Josh,

    Is there a way to add css class to an existing slider using shortcode ?
    I’ve read about metadata but I can’t make it works…

    Could you give an example ? Thanks !

    • Josh

      Hi François, what exactly are you trying to do? If you create a specific slideshow, that slideshow with have a unique ID, so you could style that. Or the metadata does add classes that you could probably style, but those rules do other things too, not just add the classes.

  15. François

    Hi Josh,

    Yes, I have seen that every slideshow has its own id but I’d like to add the same class to every slider in my website to add a border around it. So, I’d like to add the same class to every slider I create. Is it possible to add the class from the shortcode ?
    If it’s possible to add a class using metadata, can you show me an example ?

    Thank you for your help and for your answer.

    • Josh

      OK, each slideshow has a unique ID, but all the slideshows have a “meteor-slides” class that is used to style them, you could use this same class.

  16. Martin

    Hello Josh, thank you for providing this great slideshow plugin.

    I am trying to float the meteor buttons right and have accomplished this with this:

    .meteor-buttons a{ float:right;}

    However, this reverses the the order of the buttons from right to left so that the first slide is the right most button. Is there a way to do this?

    • Josh

      Hi Martin, leave the buttons floating to the left, and instead move the whole meteor-buttons container to the right by changing the width to auto, and the left position to right:

      
.meteor-slides .meteor-buttons {
bottom: -15px;
height: 9px;
right: 0;
margin: 0;
padding: 6px 0 0;
position: absolute;
width: auto;
z-index: 999;
}
      • Martin

        Josh, thanks for the quick response. By “…left position to right” do you mean setting the left value to a pixel amount that will push the container to the right? If so, I’ve made the changes and it works for a predetermined number of slides but adding a slide will cause it to wrap, removing a slide leave a gap on the right so that it’s not right justified. I am over-riding the css in my css file as follows:

        .meteor-slides .meteor-buttons {
        bottom: 30px;
        height: 17px;
        margin: 6px 0 0 0;
        padding: 4px 0 2px 1px;
        top:357px;
        width: auto;
        left:911px;
        }

        .meteor-buttons a {
        padding:0 !important;
        margin: 0 0 0 0 !important;
        }

        .meteor-buttons a{
        background-image: url("images/meteorbuttons.png");
        width: 16px;
        height: 17px;
        }

        .meteor-buttons a:hover{
        background-image: url("images/meteorbuttons.png");
        }

        .meteor-buttons a.activeSlide{
        background-image: url("images/meteorbuttons.png");
        }

        Thanks again for your help with this.

        • Martin

          Josh, I got it to work with the following (perhaps this is what you meant):

          .meteor-slides .meteor-buttons {
          bottom: 30px;
          height: 17px;
          margin: 6px 0 0 0;
          padding: 4px 0 2px 1px;
          top:357px;
          width: auto;
          position:relative;
          float:right;
          }

          Thanks again for your help, i really appreciate it.

  17. Jason

    Curious if I could utilize a js like this one to generate the effect on my images??

    http://www.willmcgugan.com/blog/tech/2011/2/26/ken-burns-effect-with-javascript-and-canvas/

    • Josh

      Hi Jason, in theory you can create custom transitions for jQuery Cycle, the script that powers Meteor Slides, but I haven’t tried this and there isn’t very much documentation on how to do it.

      I would recommend using a specialized script or plugin like the example you posted that will do exactly what you want it to do.

  18. Jason

    cool, thanks. I tried one of your other examples (from a different post) that “zoomed” during the transitions. that was slick. I’m just trying to get the images (as they are sitting there for 5 seconds) to do that ken burns thing… I’ll mess around with it and see what i come up with. Thanks for a great plugin and the super-speedy response.

Comments are closed.