Create responsive slideshows with Meteor Slides 1.5

April 26, 2012 by Josh

Meteor Slides 1.5 adds responsive slideshow support, touch navigation, an improved slideshow widget, new translations, and updates jQuery Cycle.

Responsive Slideshows

I have been building more responsive websites lately and receiving more and more requests from users for responsive slideshows, so I have updated the slideshows to scale automatically.

If you are using a fixed width theme the slideshows will remain unchanged at their original dimensions. But if you are using a fluid or responsive width theme those are used as the maximum dimensions and the slideshow will scale, shrinking to fit the theme on smaller screens and devices.

Any custom slideshow templates, stylesheets, or scripts you are using would have to be updated from the default versions in 1.5 to add this responsive functionality.

Try resizing the Meteor Slides homepage in your browser to see the responsive slideshow in action!

Touch Wipe Navigation

Another mobile friendly update in Meteor Slides 1.5 is support for touch navigation. I added the jQuery Touchwipe plugin which allows previous and next navigation with the swipe of a finger. This works on many touch devices including the iPad, iPhone, and Android mobiles and tablets.

Built In Support

The contextual help feature has been updated to use the new help functions in WordPress 3.3 and expanded with more information and links to relevant documentation.

Click the help tab in the upper right corner of any Meteor Slides admin page for more information.

Improved Slideshow Widget

The Meteor Slides Widget has been updated with a new slideshow selector. This option only displays if you have created one or more slideshows, allowing you to easily choose a slideshow from a dropdown without having to enter the slideshow’s slug.

Even More Translations

Thanks to these translators, Meteor Slides is now available in twenty languages!

Belarusian: Translation by Alexander Ovsov
Czech: Translation by Ondřej Carda
Danish: Translation by Kim Hansen
Dutch: Translation by Leon Buitendam
German: Translation by Maximilian Brandl
Persian: Translation by Peyman Asadi

A Five Star Year

Since 1.4 was released last year the downloads have more than doubled to 93,000, and it has zoomed up to a 145 ratings.

I have gotten so many awesome comments, tweets, emails, and even donations from Meteor Slides users this year, thanks everyone for your feedback and generosity!

If you want to keep up with and participate in the development of Meteor Slides, check out the project on Github.

Comments

214 Responses to “Create responsive slideshows with Meteor Slides 1.5”
  1. Josh, my heart has just sank!
    I updated to the latest version (1.5) to discover it no longer supports single slides. You need more than one slide to make the script work.

    Being able to have just one slide was a great feature because it meant you could just upload a single picture and use it as a panel for promotional information throughout one’s site.

    Josh, please bring this feature back, give me a link to download the old version or tell me how I can get just one panel to show.

    I’m a theme developer and I’m recommending directing people to your plugin as an enhancement to one of my themes.

    Please help!

    Rich

    • No worries Rich I’m not dropping support for this, you can still use a single slide, there is just a bug in 1.5 with slideshows that have only one slide.

      I will be releasing Meteor Slides 1.5.1 soon, which will have a fix for this bug. In the meantime, you can download the master from Github, which already includes this fix.

      Thanks for recommending my plugin, I’d love to check out some of your themes!

  2. Phew, that’s great news. Thanks Josh.

    I managed to find an older version of the plugin i had, but I’ll head on over to Github for the master.

    I’ll send you a link to the theme once I’ve ironed out a few creases so you can see it in its Meteor Slide glory :))

    Rich

  3. Josh, this is a fantastic plugin! The depth you’ve gone into developing it is admirable.

    My question is: is there a way to add captions to the images that show up on the slideshow vis a vis this non-wordpress site? In reviewing that site and the notes of the underlying jquery cycle plugin, it appears that the jquery can handle any type element as the slideshow, not only pictures, so I know the capability exists, but I haven’t seen any wordpress jquery cycle based plugins that do anything but images, so I don’t know if there’s some inherent limitation in incorporating it into WordPress that I don’t know about.

    Long story short, I’m happy to buy you several cups of coffee if you can either a) add the capability to the native functionality of your Meteor Slides plugin or b) show me how I might customize it myself. :-) I’m not afraid of digging into code, but I wouldn’t classify myself much past the newbie level.

    Thanks for your work!

    • Thanks Dion, coffee is always appreciated, but I better not drink several at once!

      You can easily add captions using a custom slideshow template. The example in the documentation shows you how to use the slide title as a caption, if you need a title and description you could add excerpts to the slide post type and add the excerpt to the slideshow template.

      • Thanks, Josh,

        I bought you a cup of coffee (or two, depending on what you drink) just for replying. :-)

        From the “customize template” page I see how in your example we’re adding the title to the actual slideshow, but the Title is already in the custom post type.

        Buy you a few more cups of coffee for showing me just what code would go where to include an excerpt box (or generic meta box) in the slide custom post type that would then show up on the slide in the slideshow. :-) :-) If you take a look at that moving company page I referenced in my first comment, you’ll see that the headline and caption are inside another div, so that the parent div and the child title and caption can all be styled independently with a custom stylesheet.

        Really appreciate your time and help!

        • Thanks, I raise my cup to you!

          Adding excerpt support to the slides post type is really easy, you can either drop this bit of code into your theme’s functions.php, or create a meteor-excerpts.php file with this code and install it as a plugin.

          Now that you have a title and excerpt to work with for each slide, add something like this to your custom slideshow template before the closing .mslide tag.

          You should be able to style that markup to match the example you posted or however else you want the captions to look.

          • Well Josh,

            I was all excited. The information you provided was comprehensive and well detailed. I made all the changes and configured my CSS. I just now went to upload my first slide “From URL.” I inserted the URL, the title, and the alt tag. Clicked the “Insert into Post” button and … nothing. Nothing happens. No “working” spinner, no error message. Just … nothing.

            Any ideas?

          • You have to upload the slide image when you add it as a featured image, it won’t work with the “From URL” option.

  4. Hi!

    I just upgraded to 1.5 and there seems to be a small glitch in the image positioning when you hover over the image. Also the positioning of the “navigation dots” are off.
    See examples below:

    Version 1.5 (bug):
    http://testing.swipeware.com/big-fat-goalie-2

    As you can see the image jumps down when hovered over.

    Version 1.4 (works fine):
    http://www.swipeware.com/big-fat-goalie

    Regards,
    Ingemar

    • Hi Ingemar, the hover nav display is conflicting with a few themes, add this to your theme’s stylesheet to fix the problem:

      
      .meteor-slides.navhover ul.meteor-nav {
      	display: inline !important;
      }
      
      • Hey Josh, my slide show is moving down on hover as well I have being trying several of these fixes including

        .meteor-slides.navhover ul.meteor-nav {
        display: inline !important;}

        but no luck so far. Greatly appreciate any help you can offer.

        Cheers

        • Hi, could you post a link to the page you’re working on?

          • Your theme is adding some line height to the list for the slideshow navigation, you can fix this by adding this rule to your theme’s stylesheet:

            #content .meteor-nav { line-height: 0; }

            Also, you are using the slideshow name, “Main” to specify a slideshow, make sure you use the slideshow slug instead, like “main”.

          • Hey Josh, Thank you for looking into this for me, i Sincerely appreciate this. The problem is rectified on safari and in google chrome, unfortunately it is still moving down on hover on firefox and explorer. Would be great if you can look into this for me as well. much appreciated.

          • Your theme is adding some padding to the list items in the slideshow nav, try removing that like this:

            #content ul.meteor-nav li { padding: 0; }

          • Thank you Josh, amazing! appreciated that!

  5. Hi Josh,

    I’ve added that to my CSS an now it’s much better.
    The navigation dots are still below the containing div instead of below the slides, but that’s something I can live with.

    Thanks!

    • No problem, you should be able to play around with the positioning of the paged nav to get it how you want it, let me know if you have problems with it.

  6. Hey Josh,

    Well man, your plugin is brilliant and your support phenomenal. Once I went in and started paying attention to all the individual trainings, I discovered you had already described exactly how to add the featured image (before I returned and saw your reply). Well, everything’s working perfectly, got my captions going (just formatting details remain) and I am a happy camper.

    Enjoy a few more cups of coffee on me, but not all at once. But clearly if you’re up as late as I am, you could probably use them. ;-)

    Thanks for everything.

  7. Hey Josh, I cannot get your code to work on my site. Perhaps you can see where I went wrong:

    $themeslug = ‘if’;

    $root = get_template_directory_uri();

    $slider_default = ‘meteor_slideshow’;

    The slider works in the sidebar, but I have tried all sorts and cannot get it to work. Please can you help? Great site BTW!

    • Hi Neil, can you post a link to the site you’re working on? I’m not sure what this means: $slider_default = ‘meteor_slideshow’;

      Are you using the template tag or shortcode to add the slideshow?

  8. Hey Josh!

    Oh, got me a whole new can of worms. I’ve pulled the meteor slides php and css into my child theme and edited them both to get showing just what I wanted in Firefox. Then I checked on my Android smartphone and in Chrome and … there’s no slideshow! There’s a blank space big enough for the slideshow, but no photos, no error message, nuthin.

    Suggestions?

    • I can take a look if you want to post a link.

      • The site is here. Let me know if you need anything else. And thanks!

        • The slideshow markup looks fine on the page, the problem is that the scripts that power the slideshow are missing from your head. I think your cache is messing with them, try disabling the cache and testing the slideshow. If that is the problem, clear the cache or see if you can exclude those scripts.

          • Thanks Josh. After some wriggling and wrestling with W3 Total Cache, it all looks like it’s working. There’s something else that confuses me though. The effect appears differently in Firefox than Chrome, IE, or Android. Do you know why that might be? Frankly I think the effect is way cooler in Firefox and probably the way it’s *supposed* to look (curtainX).

            Any thoughts?

          • The effect looks the same to me in Firefox and Chrome, did you get it figured out? Some of the effects work better for certain content than others, like with the curtain effects only the image is re-sizing, not the caption, so that could cause it to work differently than it would with just an image. You might want to experiment more, uncover or scrollHorz might work better with captions.

  9. Hey Josh,

    Yah, I checked them again the next morning and they all looked great, so I think it was just delayed in refreshing the cache or something. I actually really like the fact that the caption doesn’t resize; makes for a mesmerizing, complex effect I think.

    Anyhoo, you’ve been brilliant through this whole process. Really appreciate your skills and support!

  10. Hi…excellent work ;) Thank You very much.

    I have one questions Josh: can I transform navigation-list under images into buttons with titles of slides?

    rgrds

    • You’re welcome Cezary! It is possible to use the slide titles in the pager instead of just numbers, but it is kind of complicated so I added this to the documentation on customizing the slideshow script. Take a look at the new section on building custom paged navigation to learn how to do this.

  11. Thanks Josh, Your tutorial is great.
    It was easy and fast process.

    Everything looks perfetctly ;)

    Once again: Big Thanks.

  12. Hello Josh
    I wonder if you could help with some custom border styles I have on my sidebar slideshow. The bottom border is not showing after I updated the stylesheet in the child theme. I don’t have access to an ipad to see how it displays at the mo but suspect it may also cut off the border on the right.
    I have enjoyed the instructions on your site as it has helped greatly with a custom page template I am working on to include in the site.
    thanks
    Mark

    • Hi Mark, the problem is that the slideshow is sized to fit just the slides, so borders or padding added to the slides can get cropped off. Remove the border and BG from the slide container, and added it to the slideshow container, I also had to add a bit of padding to make the slideshow tall enough to show the bottom frame:

      
      div.meteor-slides {
          background: none repeat scroll 0 0 #89BDF1;
          border: 1px solid #89BDF1;
          height: 100% !important;
          line-height: 0;
          margin: 0;
          max-width: 100%;
          overflow: visible !important;
          padding: 0 0 4px;
          position: relative;
          z-index: 1;
      }
      
  13. Hi Josh,
    Thanks again for your remarkable plugin, it is truly great, easy and fun to use.
    I have a suggestion: How about giving the option to add video to the slideshow?
    Since video is such a big thing now and every site owner has video on his site I think this feature will ramp up Meteor slides.
    It can be video from youtube, vimeo or a self hosted video, and the slideshow has to stop while the video is playing.
    What do you think?
    “Meteor Slideshow Pro (with video!)”

    Thanks again,
    Dan

    • Thanks Dan, that’s an interesting idea, I haven’t added video to any custom slideshows yet, I’ll have to give it a try!

  14. Hello Josh
    thank you
    Mark

  15. Hi, I’ve got a friend who’s using your plugin and after he updated to version 1.5 he is getting some weird behavior on the slides. They show up before starting their entering transition. Also the nav buttons (the circle ones) have changed position, but that’s fixable as I know.

    Would you be kind to guide me where to look so I can try and help him? This is his blog: http://www.rodonasifsalum.com.ar/

    I’ve read though the Support Forums in WordPress DOT org but could not find anybody with the same issue. Any hint you can give me will help us. Thanks in advance.

    Mirkko

    • Hi Mirkko, it looks like he is using a custom slideshow template, but not a custom stylesheet. So the template is 1.4 and the stylesheet is 1.5, which will cause some issues like this because the markup is a bit different.

      It doesn’t look like the custom template is needed, maybe he was going to use captions and decided not to? If it’s not needed, delete it and that should fix the problem. Otherwise if it is needed I would start from the slideshow template in 1.5 and reapply your customizations so that it is compatible.

  16. Rock on, Meteor Slides! I’m only a month late with my props here.

  17. Hi Josh love this plugin, just having a bit of trouble with the pictures in the slide. I’m using it in a widget and some pic’s show and some don’t. I’ve tryed messing about with the pic’s, but they don’t all show, any help would be appreciated.

  18. Thanks Josh it was a plugin messing with the slide.

  19. Hi Josh,

    I have used your plugin on other web sites and love it, but have a problem on this one. Here is my test page: http://theguibordcenter.org/test-slide-show/ where I have a widget over the [shortcode] and all that shows is empty space in both of them I am using Weaver Pro II and want to replace the Iframe flash presentation on the home page with a slideshow that will show up on an iPad. Since I have other slideshow plugins on the site I am wondering if they might be interfering with the slides displaying? But before I start disabling plugins I thought you might have some insight on this.
    Thanks in advance,
    Christine

    • Hi Christine, the JavaScript for the slideshow isn’t running, this is likely due to a plugin conflict. The only error I see if for the “fw-vimeo-videowall” plugin, I’d try deactivating that one first and testing the slideshow.

  20. Thanks Josh,

    I started deactivating plugins this morning and found it with the “profile-viewer” plugin. The plugin is no longer supported, so that really should have been my first clue. Now I can’t wait to rebuild those profiles so I can get this slideshow working on the home page. It looks beautiful! I just LOVE this plugin!

    I will send coffee!
    Christine

  21. Hi Josh,

    Thanks for your plugin! Just recently I started using the W3 Total Cache plugin as well and since then the two slideshows I have with your plugin here only show the first slide. What would be the solution (except of course deativating…) to see all slides again?

    -JB

    • Hi JB, Meteor Slides will work with W3 Total Cache, but it depends on your settings. Right now I see some JavaScript errors, so the slideshow scripts are breaking because W3 Total Cache is minifying them. Try disabling just the Minify option, clear the cache, and test the slideshow.

  22. Hi Josh, disabling the jsminify worked out fine. Thanks!

  23. On my blog
    http://www.mydevhost.net/arnold
    slider is not scaling to mobile devices.
    I am already using responsive theme.
    Pls suggest?

    • Hi James, this is because the “widget-wrap” container that the slideshow is in is floated to the left and doesn’t scale.

      You need to disable this float in the media query for the mobile view:

      
      .widget-wrap {
          float: none;
      }
      
  24. Hi Josh, great slider! Saved my bacon on a theme whose slide deck wouldn’t do what I needed it to do on a client’s gallery page.

    2 questions (I’m a WP newbie, btw): On the theme I’m working on, everything appears to be operating just fine when viewed on a desktop machine, however, when viewed on an ipad and iphone (it is a responsive theme), when the slides transition, there is a noticeable white gap between the transition. Not a horrible problem in and of itself, however, the drop shadow under the slider that is part of my theme’s design appears in the white space. Viewing it you’ll see what I mean: http://rschmidtconstruction.com

    The other problem I’m noticing is that I can’t do a vertical scroll on my mobile devices when I touch the slide deck. I have to touch above or below it to scroll. Not an issue on the gallery page featured images but once I get into the pages with sliders, I experience this problem. Is this fixable?

    Thanks so much for your help!

  25. Josh, thanks for the great tool! We’re putting this a domain (as given in your Reply form) and want to allow words to appear and disappear by using two identical images with and without words. The cross fade therefore gives the impression of word animation as well as slide animation. We have the slight problem that the fade out and fade in duration is the same and that therefore the image intensity drops during the transition. Is there a way to make the image that is being superseded have no fade out while the new image does it’s fade in?

    Hope it’s sunny where you are – in a good way! Warm here in Glastonbury. :)
    Regards,
    Sam.

  26. Hi Josh, this is a great plug-in (thanks!). I just updated to 1.5 and something seems to have happened to the position of the slideshow. It is supposed to be under the menu buttons, above the 3-column elements.

    http://www.ehlsprogram.org

    Can you tell what is going on here? I’m noodling around with the code but I am not too proficient in CSS/PHP, so any diagnosis you might be able to provide would be awesome!

    Cheers,
    Kat

    • Hi Kat, just spotted your comment. The problem is that the slideshow is positioned absolutely and is hiding behind the page content, needs to be positioned differently to show up inline with the rest of the content. The elements before the slideshow are floated and these floats need to be cleared for it to layout correctly.

      Try styling it like this:

      
      div.meteor-slides {
          clear: both;
          height: 100% !important;
          line-height: 0;
          margin: 0;
          max-width: 100%;
          overflow: visible !important;
          padding: 0;
          position: relative;
          z-index: 1;
      }
      
  27. Hello Josh,
    My heart missed a few beats when I installed today MeteorSlides from the WordPress extension repository, and added a SINGLE slide to a single slideshow, just to discover that it did not display a thing.
    Then, I found this thread, and the mention that version 1.5.1 fixes the issue…on May 4th.
    I understand your schedule has certainly been busy…would you still think about finding some time to upload 1.5.1 to the WordPress plugin repository? That would certainly help unsuspecting users like me ;-)
    Thanks for the awesome work anyway !
    Best regards

    • Sorry to give you palpitations, single slide slideshows don’t come up too often. It has been a busy summer for me but I am working on an update for Meteor Slides that fixes a few bugs and has a few handy new features too :)

  28. Hey Josh,
    I’m working with a Responsive Child Theme and I have to mention that this is my first time actually working with word press. First time putting a website together. I added slides properly but can’t seem to get a slideshow together so it shows when I add the Meteor widget to the featured content or header. I would appreciate your help on this matter and if also you could get back to me ASAP PLEASE.

  29. Hi Isaac,
    As you already run a child theme let’s assume you’re not afraid of changing a tiny bit of code!
    Just apply the patch in home.php that I described there : http://themeid.com/forum/topic/2238/patch-include-any-shortcode-in-the-featured-contents/
    Then, you can edit your home contents from the WordPress backend, going to Appearance->Theme Options , and include any shortcode.
    Specifically, you will want to include the proper MeteorSlides shortcode : if you created a single slideshow, then I believe the following should do : [meteor_slideshow] . Otherwise, select the slideshow you want by specifying its name , such as in [meteor_slideshow slideshow="home-featured"] .
    That should run beautifully.
    Don’t forget that if you only have a single slide, you must install version 1.5.1 ;-) (Josh, no pun intended!)
    Hope this helps you run in no time.
    Cheers

  30. Thanks Palijn! I will try that in a day. I’m slowly starting to understand how the whole game works. I don’t want to just build a website but I also want to understand the system and codes are up next for me. Just trying to get my site quickly as possible so I can sell some T-shirts and record more music. Starving artist here doing all the work myself.

    Cheers bro!

  31. I’m using the latest version of your plugin with a Responsive Layout. It works fine in Chrome, but in Firefox, it only shows up when I resize the browser window to 860px or less. Any ideas as to why this would be happening? I’m using the latest version of Firefox.
    Thanks in advance for your time.
    -Amy

  32. Hi Josh I have been using Meteor slides for a while now but on my most recent site when I try ‘set featured image’ it hangs on saving (this might be a WordPress problem?) I am using WP 3.4.2
    It would be a pity if I end up having to use a different slideshow as this one is great!

  33. Hey Josh,

    First of all, thanks for such a great plugin and awesome support/forums. I’m using meteor slides and I’ve made some updates to make the slideshow on the front page size and move the way I want it to. It works very well in Chrome/Safari/Firefox, but in IE it’s having some problems. It’s not responding at all and the image seems to be stuck at the size it was uploaded. Will not get smaller or bigger. Any advice would be a super big help. Hopefully it’s just a css issue.

    howarddesign.com/devsites/palmer

  34. Hi Josh,

    I’d like to say thank you for your great plugin from bottom of my heart!
    I was making a web site for an Android App last April
    and it was really helpful that you put a link to the beta version which contained responsive slideshow support.

    I really appreciate your awesome work!

  35. On the website below, the slides are working correctly but the navigation arrows don’t show. The settings are set for Slideshow Navigation Previous/Next. They showed before but then they stopped showing. I navigation images are in the meteor-slides/images folder. Any ideas on how to fix this?
    I also want to make sure I understand about child themes and the stylesheet, if I put the meteor-slides.css stylesheet in with my child theme, and then if I update the Meteor Slides plugin or the Main Theme or WordPress will my custom Meteor Slides css remain unaffected?
    Thanks

  36. Hi Josh great plug in, I am using it as a widget but I would also like to use it as my header to. i am not an expert on coding but I have a basic understanding. Can I use it for this purpose and still use it as a widget? I am using a template, sliding door, which I have modified a bit and I don’t know if I am using a child theme. Thanks in advance for any help. URL is http://www.mycarvaletingservices.co.uk

  37. Thanks for the fast reply Josh, I take a look and send over a few cups of coffee for you ;) I did get the header up but the images didn’t show. So I have a good read of that thread and get it just right!

  38. The Meteor Slides plugin is working great on our website. Josh is amazing with help and support. I wish all WordPress plugins worked as well as Meteor Slides. Thank You Josh for all your hard work.

  39. Hey Josh,

    I was playing with your slider in WordPress 3.4.2, and noticed that using the “Prev/Next” navigation caused the slider image to jump a distance equal to it’s height on hover. Took a look at your CSS and I found the issue. In meteor-slides.css, there’s a line:
    .meteor-slides.navhover ul.meteor-nav {
    display:block;
    }

    that should really be:
    .meteor-slides.navhover ul.meteor-nav {
    display:inline;
    }

    Easy fix. Thought some other people might be having the same issue. Thanks for the great plugin! I’m really enjoying how simple it is! Cheers!

    • Thanks for sharing, it varies depending on the theme, for most you want this to be block, but for a few you want inline. I’m working on setting this up differently to work for all situations.

  40. Mr. J Leuze,

    Thank you for your great contribution to community netizen’s, am a bit confused am using the Responsive Theme, and would like to create a form of picture slide catalog of items for sale, I would appreciate it very much if you can direct/point out a tutorial in how to go about using “Meteor Slide” to accomplish this?.

    Thank you in advance.

  41. He Josh,

    It’s me again brother! Please take a quick look at this website and tell me how I can fix the wide gap below the meteor slides. It’s quite obvious something is not right here.

    My appreciations for your brilliant plugin.

    • Hi Rich, this is probably caused by the code tags that are wrapped around the shortcode. Switch to the HTML view of the post editor and try removing those tags.

      • Josh, I switched to HTML view and removed everything codes and tags from the home page, except for the meteor shortcodes [meteor_slideshow], remaining, yet nothing changed.

        I even went further and create a new page and inserted only this shortcode: [meteor_slideshow] on the entire page and then previewed the page, the huge bottom blank space is still there.
        Oh and the slides are set Width 820 x H 328.

        • I can still see the code tags and a lot of extra paragraph tags on the site, maybe you’ve got a cache on there or something?

          The slideshow is set to 810×328, but the space for the slideshow is only 619px wide, so the slideshow is shrinking to fit this, but keeping original height of 328px. Try setting the slideshow dimensions to 619×251, that should remove most of the gap. To get the best quality, re-size your images to 619×251 in Photoshop or another image editor and re-upload the slide images after changing the slideshow size.

  42. I have just re-sized the images to 619×251 and very slight to non improvement. I can give the password to the site so you can remove the tags. Can I get a secure email address sent to me so I can send the login info?

    Thanks

  43. Oh by the way, I noticed that the more images I upload to the slider, the more the blank space got even bigger.

    • each slide has another paragraph tag, so it is adding more and more space. You can use the email or form on my contact page.

      • Hey Josh, Thanks a million for your dedication and support to help me out brother!

        I truly appreciate your efforts and excellence in your work. You are my HERO!!!

        To all that is following this discussion:

        ISSUE: “Conflicts with Ultimate shortcodes plugin it’s adding paragraphs tags to the slideshow” causing the big blank space below my slideshow.

        SOLUTION: Josh “removed the codes around the slideshow and also added a rule to the theme stylesheet that zero out padding and line height of all extra paragraphs in the slideshow.”

        ISSUES RESOLVED.
        This discussion is now closed.

  44. Josh,

    I am a newbie to website development and thanks to pioneers like you I am able to make good progress in developing a free website for local preschool. I tried meteor slider with ThemeID responsive theme and it works wonderfully.

    I have defined only one slider (slider1 with 3 images) and dropped the short code [meteor_slideshow] in the content section of the home page. This is working but I am bit confused. I have not specified slider1 anywhere in the short code. I guess it is picking up slider1 since it is the only one.

    Suppose if I create another – slider2 and want to use it in footer, how do I do it usin short code?

    Regards,
    Murty

    • Hi Murty, when you use the shortcode without specifying a slideshow it loads all the slides, doesn’t matter what slideshow they are in. So if you only have one slideshow you can just create some slides and add the shortcode to your site you don’t have to create a slideshow or add the slides to it.

      But if you do want multiple slideshows, you don’t want to use just the shortcode, you’ll always want to load a specific slideshow. You do this using the slideshow’s slug, take a look at the documentation on multiple slideshows for examples of how the shortcode should look.

  45. Josh,

    I recently updated both WP to 3.5 and Weaver II theme to 1.27

    Meteor Slides no longer shows. In a panic, I replaced the slideshow on the homepage with another plug-in, I want Meteor back (it’s the best!!!)

    Here is a link to a page with shortcode on it. (http://luxping.info/test). Any help would be appreciated. I disabled all plug-in, etc. to no avail.

    Thanks for a great plug-in and outstanding support.

    David

  46. Hi Josh, I love this plugin. It’s brilliant. Thx :)

  47. Hi Josh, I’m looking to take my existing website into a WordPress approach and your plugin looks like it is very close to what I need to show my work. I have a question: is there an option for the slideshow to respond not just to width but also to window height? If so, how do I activate it? Thanks!

    • Hi John, not really but generally this isn’t an issue, depending on the format of the slides and the size of the screen most of the time the width will shrink and the height along with it to fit.

      Do you have an example of a situation you don’t think it will work in, or a different slideshow on existing site that does work like this?

  48. Hi Josh. I’m from Madrid and… I don’t speaking english. Sorry for that. Someday… I’ll try. So, excuseme for my bad english, ok?. Thanks. Well,

    (1) Your plugin is great. Congratulations!!!.
    (2) My problem is with the sizes.

    Apparently … the size of the images have the last word. I did everything you said to do, but … I still have the same problems of size … the tree.

    For example, if the image is larger than the box … then the box takes up all the space it can. To reach the bandwidth limit and all you can high. No matter having values ​​configured in the box.

    Conclusion … first you have to scroll through images on photoshop, give their values ​​(height and width) and then create the slides. That said … I wonder … configuration and metadata are useless?.

    Because I set the box and also the metadata embedded in the page (as you counseled). But … nothing.

    I apologize for both text and misspelled above. Thanks for your time. I await your comments and advice.

  49. Where I wrote “the tree” or “the box”… I wanted to write “slideshow”. Sorry Josh.

  50. Hi Josh, another question. Is there a way to configure, in the navigation menu, pause and play?.

    Because it never stops … and maybe there are people who want to stop moving. Then, that person may want the slides were again set in motion again.

    Thank you.

    • No worries Sergio, I don’t speak Spanish, so we’re even!

      If you can post a link to the site you are working on, that will help me. The plugin will crop slide images to fit the slideshow if they are too large. It is a “maximum” size. But you will get the best results of you size images to Photoshop first to match the slideshow size.

      Also, make sure you set the size in the slideshow options first, and then upload your slide images.

      You can use metadata to have the slideshow paused by default, pause after one rotation of the slides, or you can customize it to have pause and play buttons.

  51. Wow Josh, thanks for answering so fast.

    1. The website at which I am working … not yet online. Anyway, I did what you said you’d do: delete slides, set the size of the slideshow, re-create the slides, etc.. That’s why I came to the conclusion that the maximum size puts the size of the slide, not the size of the slideshow. That’s why I think the only solution will be to generate the scale of the images in photoshop and then create slides.

    2. I would like the buttons to pause and play. What do I do?. I’ve checked all the settings but I have not seen anything.

    Thanks for your help.

  52. Hi Josh… again… The problem (size) is only with the height. With the width… I have not a problem.

    For example, if the slideshow has configured a height of 450 px and the slide has a height of 700 px, then the slideshow will expand to 700 px on the slide.

    That problem does not exist with the width.

    Thank you for your time.

    • It depends, if the slideshow is set to 450px high and you a slide images that is 700px, it will be cropped to fit the slideshow. It is not meant to size the slide images, only to prevent them from breaking it by being too large, and also to help with the layout of the slideshow. When you set the size of the slideshow, you are telling the plugin that is how big your slides are, when they don’t match the results can vary. It is best to size your images correctly first in Photoshop and then match the slideshow to that size.

      Pausing the slideshow by default is easy, you can set the Slide Duration to “0″, and that will disable the auto-advance. If you enable the slideshow navigation, users can use that to cycle through the slides.

      Adding actual pause and play buttons is harder, you have to customize the slideshow template and add the buttons, and edit the slideshow script to activate them. Here is an example of jQuery Cycle that uses the pause and play button.

  53. Hi Josh like this plugin, I’ve pluged in a mobile theme, if I put a slide in the main site would it show up in the mobile site? Our do I have to build the mobile site with the slide in it. URL

    Thanks

    • I don’t know how you have your mobile theme setup, but if it is different than your desktop theme, you’d have to add the slideshow to the mobile theme using the template tag. Most of the time it is used in responsive themes, so the theme and slideshow scale for mobiles and there is only one theme. If you can tell me more about how you have that setup and I maybe be of more help.

  54. Thanks for the fast reply Josh! I’m not to sure how it is pluged in. As someone did it for us, I know it is on a template that as been messed around with, and the mobile is just a plug in I think. Because when I write txt or put images on the main site they show up on the mobile site, but the header from the main site isn’t showing in mobile version and the blog page don’t show up as well. The URL is http://www.mycarvaletingservices.co.uk

    Thanks
    Gary

    • If the mobile plugin loads it’s own theme, you’d have to edit that mobile theme to add a slideshow. It depends on the plugin, some switch the theme, so it would be standard WordPress theme in your theme folder, others have their own custom theme built into the plugin.

      Either way, look into the mobile plugin some more, the documentation will tell you how to create a custom mobile theme, once you have that adding the slideshow should be simple.

  55. Thank you Josh, I take a look at the files and see if they have messed with them. And then try and get a slide in there as I do like your plugin.

    Proberly be buying you lots of coffee to get it there :)

    Thanks
    Gary

    • Cheers Gary, I’d look up the mobile plugin, it should have some documentation either on WordPress.org or on their own site and that will tell you how to make a custom mobile theme. Then you should be able to check and see if you have a custom one you can edit, or if you need one.

  56. Hi Josh, thank you for your comments and your help.

    I’ll see what I do. I’ve seen what you indicated but for now, it’s very difficult for me.

    Well, now let me send a big hug and thank you for being there.

    Oh, and as I see you’re in Minnesota … if you look at Ricky Rubio … send him greetings from Madrid. Up the Timberwolves … :)

  57. Hi Josh, Thank you for the useful plugin! I was looking for responsive slideshow to use it up on the site header. I knew about Meteor as the WP Theme (Weaver 2) that I use, talk about it somewhere in its documentation.
    Well, I installed your plugin but it seems that it not work as it’s supposed.
    I tried to use the Meteor widget in the Header Horizontal Widget Area .
    1 – I don’t know if plugin do crop or enlarge images but it seems that the high is not took but width.
    2 – with my theme, which is responsive and have set a max width, Meteor is not responsive.

    I’ve read above about something aprox similar and you told James on replay to its July 6, 2012 at 8:09 am post to modify
    .widget-wrap {
    float: none;
    }

    Well, I don’t know if this is my situation, too but I wanted to try modifying it…only that I don’t know where is the code line to do it.
    Please tell me what I can do to get that responsive feature working.
    Here’s my website http://www.danielchiriac.com
    Thank you,
    Daniel
    PS. I’ve just remembered that I can insert short codes in header area directly from weaver 2 admin page and I inserted [meteor_slideshow] and also I uploaded new images to slideshow (cose I remembered, too that you wrote somewere to use images uploaded AFTER the plugin install to avoid any problems …
    Well, using short code the plugin works thoroughly! Thank you very much!

    • Hi Daniel, glad to hear that you got it figured out. The site looks great, you’ve got some amazing art on there!

      • Oh, thank you for appreciations, Josh!

        I really like your widget even that using it is not very natural :)
        Before Meteor I used “Slideshow” plugin which I think it has a better interface (is it the right word?) but it don’t fit to my needs
        I was quite confused of the Meteor setting up at the first use.

        Well, I thought that this is so because you wanted to write a “slim” plugin that it simply does its job without a stuffy interface….. and as my PC run on Gentoo Linux, I realy appreciate a simple code that just work.
        Best, Daniel

  58. Hello,Thank you Josh.Good post,I have some questions?
    1:Meteor Slides and W3t will be Conflict?
    2:Especially W3t the minify!
    thank you again!

    • Hi, Meteor Slides is compatible with most caching plugins, including W3 Total Cache. Sometimes minifying the JavaScript can cause problems, but the latest version of Meteor Slides fixes some of these issues so minification should work better.

  59. Hi, I was wondering how do i change the size of the plugin on my home page. i want it to be smaller

    • Hi Erica, in the slideshow settings you can change the height and the width. To fit that spot in the Responsive theme, the slideshow should be set to 440×300. After you update the dimensions, make sure you size the slide images to match that exactly in an image editor, and then re-upload them to WordPress.

  60. I uploaded the plugin and activated it. I set up the settings with the biggest slideshow dimensions before uploading any images. I wanted a caption so I uploaded, to my child theme, meteor-slideshow.php and I placed this code:

    <?php // Get the featured image's description

    $ms_thumb_id = get_post_thumbnail_id($id);

    $ms_description = esc_attr( get_post_field( 'post_content', $ms_thumb_id ) );

    echo '’ . $ms_description . ”;

    ?>

    above the

    I created a slideshow and then placed this code: [meteor_slideshow slideshow="step-by-step-guide" metadata="height: 346, width: 546"] into a page.

    I added this code to my css:

    .meteor-slides p {
    background: rgba(0,0,0,0.5);
    bottom: 0;
    color: #fff;
    left: 0;
    line-height: 20px;
    margin: 0;
    padding: 2%;
    position: absolute;
    text-align: center;
    width: 96%;
    }

    div.meteor-slides {
    margin: 0 auto !important;
    }

    The images look great, the caption looks good, but it appears I have a background showing that is bigger than the slideshow and when you hover or try to click on the slideshow it actually moves and has a scroll bar. Have no idea what I’ve done wrong. Help please?

    I’ll deactivate my maintenance mode if you want to take a look and see what suggestions you can give me.

    http://hometownchatter.com/help/

  61. *above the closing div of .mslide
    don’t know why that didn’t show up

  62. Hey Josh..thanks. I’ve disabled the maintenance mode. :)

    • Sorry, I didn’t have a chance to look into it yesterday and now the site is in maintenance mode again.

      • Hey Josh, don’t know if you’re around right now, but I’ve taken the site off maintenance mode again. Sorry I missed your earlier message. If you can’t tonight, maybe you could let me know a time that works for you and I can shut it off for you tomorrow. I’m central time zone. Thanks so much for getting back with me. :)

  63. Hi Josh

    Great Plug-in, just having what I hope is a small issue.

    The slider is for a 1 col page, and is set to a size that is smaller than the page width.

    When I publish the slider it alligns to the left leaving empty space. I want it centred.

    Have tried , and tried positioning it within the visual WP edit page, but with no effect.

    Any help is appreciated.

  64. Hi Josh.

    I just want to link the slides to an outside url and nothing seems to work.
    Tried the 301 redirect – nope.
    Tried the slide URL link – end up with http://wp15.wp.riefmedia.com/www.websitename.com on the tool bar.

    Suggestions please.

  65. Hi Josh, I’m really sorry to bother you but I’m not able to see it through. I’m coding a website (fully responsive) but my slides aren’t following the responsiveness.

    I’ve read every comment on this thread and the .widget-wrap { float: none; } doesn’t seem to be my solution. I’m just using the shortcode in my home page.

    This is my demo site: http://demos.martincesare.com/theblowoutbar/

    Can you see if there’re any problems with it? My settings on the WP panel are 380px by 1065px and I was expecting it to automatically scale. I’m a little new to responsive web design but not that new. :(

    Any help in pointing me to the right direction would be great! Thanks a lot!

    • Hi Martin, the issue is that one of the containers that the slideshow is in isn’t scaling properly, try updating the theme’s stylesheet like this:

      
      #main {
      width: 90%;
      padding: 50px 5% 0px 5%;
      }
      
      • Magic! :)

        Thanks a lot. I didn’t see anything wrong with having my width set to “auto”, clearly I was mistaken.

        And thanks not only for the solution but for taking some time to look into my issue. That’s why I’ve been following every email that shows up in this thread since I’ve met this plugin. As soon as I can get a few $$$ on my PayPal account I’ll buy you a cup of coffee! ;-)

        Martín

        • You’re welcome Martin, thanks, coffee is always appreciated!

          • Josh, I couldn’t get any money into my PayPal account but my dad had a few bucks left so I asked him to donate for me. We can’t really use Paypal here in Argentina but there’s always a workaround. :)

            As soon as I get some $ I’ll send you a bigger cup of coffee, you were very helpful!

            Thanks again!

          • Thanks a lot Martin, I appreciate the coffee!

  66. Hi Josh,

    Great plugin and simple to use, but I was wondering if you could help me?

    I’ve inserted a test slide into my website http://www.apriltrowbeauty.com and it works great with IE10 and on ipad, but on my iphone, and I’ve just noticed in firefox too, that if I scroll to a dropdown menu on my site, the slide is on top of the menu so it cant be seen.

    Is there a way to set it to background?

    I’ve tried

    div.meteor-slides {
    z-index: 99999;
    }

    but this doesn’t seem to work

    Any advice is much appreciated

    Regards

    Ryan

  67. Hi Josh,

    Thanks alot for getting back to me.

    Yeah I sorted it with Firefox but its just the mobile (iPhone) where it still shows on top of my drop down menu.

    I don’t really understand the indexes, is there a way I can get the mobile menu to display above the slide?

    Regards

    Ryan

    • The trick is to raise the z-index of the dropdown menu to be on a higher layer than the slideshow, like this:

      .nav-collapse, .nav-collapse.collapse {
      	overflow: hidden;
      	height: 0;
      	z-index: 9999;
      }
  68. Thanks alot Josh,

    I’ll have a play later on

    Regards

    Ryan

  69. Hi Josh,
    Love the plugin, except I cant seem to get the responsiveness to work, the slide remains the same size on phone and ipad screens. I have read through the comment threads and tried a few of the CSS options, but it doesnt seem to make a difference on my site. I am using Weaver Pro II and using a shortcode in the “Header gadgets” section in weaver if that helps. Site is Thanks so much for a great, and easy to use plugin, I look forward to your response.

    Angela

  70. Dont know what happened to the link in previous thread. The site is: engagingebooks.com.

    Thanks!
    Angela

    • The slideshow scales to fit the space it is in. Typically you’d have the slideshow in it’s own column that scales as you need it to. So try setting a size for the container it is in, like this:

      
      .wvr_gadget {
      width: 20%;
      }
      
  71. Thanks Josh! It worked! Excellent. Will buy you a coffee now :>

  72. Bought you a book instead, great idea for donations!

  73. Hi Josh,

    Is it possible to create a slide show using your plug-in where the “previous” slide and the “next” slide are semi-visible? I want the visible slide to be bordered by the slide before it and the next in line, but both of them be slightly transparent.

    Thanks!
    Steve

  74. Hi Josh!

    Very nice slider! Okay, I was wondering if I could add video to the slider, especially on the Homepage so guest could just click on the video in the slider?

    Thank you Josh for your work!
    Christine :)

    • Thanks Christine, Meteor Slides doesn’t support video by default, you would have to use a custom slideshow template. I like to use a screenshot of the video in the slideshow and link to the video from there, loading it in a lightbox so it is easier to watch.

  75. Hi, Josh

    Thanks for giving wonderful plugin!
    I have a question. I make your slider to swipe with mouse with next/previous navigarion like this plugin.
    http://dimsemenov.com/plugins/royal-slider/
    How can I do it or I can’t?

    Thanks
    Akashi

    • Hi Akashi, you could probably do something custom, but Meteor Slides doesn’t have support for mouse swiping. I would say this is pretty uncommon, you’re relying on the user know they can drag the slides, or guess from the hand cursor. A UI like this is pretty rare and people just won’t be looking for it, they will be taking their cues from the buttons on the screen, whether they are prev/next arrows or text, pager buttons, or tabs like the example slideshow.

      However, Meteor Slides does support touch swiping when you are on a touch device, which is the expected UI there, so people will be trying to do that on a mobile or tablet.

  76. When you change the page size slider to stop ,
    sensitive to the size of the page is changed, I want to stop slider

  77. Hi. Great slideshow, but I want it to be in the header. How to do this?

    • Hi, this really depends on your theme. Some themes have a widgetized header, so you can add the Meteor Slides Widget, with other themes you would have to edit the header.php file and add the slideshow template tag.

  78. Wow. Thank you.
    But when I just used a “normal” header, I made it to be: which means, that is is filling all the screen.

    I assume that I can rule with the header in the following code in the style.php:

    .column:first-child, .columns:first-child, .alpha, .omega { margin-left: 0px; }
    [class*="column"] + [class*="column"]:last-child { float: left; }

    I tried different variations instead of writing “column” but did not get it to work. I know, that the slideshows pictures are reacting on this code, because I here could make it float right.

    But maybe you need more information about my codes.

    • Your theme must have some dynamic CSS, so it is using style.php instead of style.css, but your stylesheet should only have CSS in it. To add a slideshow to your header, you have to use the slideshow template tag, which is PHP and should go in your header.php file.

      I can give you more info if you can post a link to the site you’re working on and let me know where exactly you want the slideshow to go.

  79. Josh,

    I love your slideshow! I use it on several websites. I love how it is very responsive… However, I’ve got slider in my header on one site with a banner behind it as a background. In order to make the banner shrink to screen size I have to do @media queries to replace the banner with a smaller sized banner. I can get it all to work reasonably well down to about 600px across and then I can’t get the banner any smaller. My thought is that my slider is causing size problems. Perhaps padding, margins, or width of the slider won’t allow for the banner to go down to 320px. My thought was to somehow have to slider hide after 600 px, but I can’t seem to do that.

    Would you have a trick to get this to work more efficiently. I’m ok with the slider disappearing for small screens. I’m using Thesis theme and have set up the header with two areas to go over the banner.

    Thanks again,
    Heidi

    • I forgot to mention that the slider is a widget in the header.

    • Thanks Heidi, it can be tricky getting background images to scale, I’d recommend using regular inline image instead with the proper CSS to make it responsive. You can stack inline image and slideshow at the same level, and then absolutely position the whole slideshow over the image you want behind it.

      If you want to post a link to the page you’re working on, I might be able to be more specific.

      • Thanks for your reply, Josh. Here’s the link to the website I’m working on. However, I am working on it locally with new code. I can’t show that yet, of course. But when you see the site, you’ll know what I’m working with. When you say “stack inline images” do you mean create smaller images of the banner and have them load for different screen sizes? (@media queries) That’s what I’ve started to do, but the slide show is a problem for the smaller screen size. I do see that I may need to realign the slider with absolute dims so that it stays where I want it. I can do that… but my problem is when a smartphone loads the site, I can’t seem to get the small banner to load. I don’t understand what the problem is at this point.

        • By stack, I just mean, have one on top of the other in the code, like the image and then the slideshow, on the same level inside a container:

          
          div
          image
          slideshow
          /div
          

          Though if you have the slideshow in a widget and that image is outside of the widget area, then you could have the whole widget area below the image in the code like this:

          
          div
          image
          slideshow widget area
          /div
          

          What you want to try to do is just get your image scaling properly, and then try to stick the slideshow in there. Is the image that you want to scale the jd-logo.jpg file? Instead of using different background images at different sizes, you can using the full size image as a regular inline image with the img tag, and style that to be responsive. This doesn’t work so well with background images, but is easy to do with regular images.

          Once you have that working, you can add the slideshow over the top of that image by positioning it absolutely. Basically it would work like how the slideshow captions can be positioned over the slide images if you use a custom slideshow template.

          Does that make sense? It’s tough to be more specific without seeing your local version.

  80. Hi Josh, Is it possible to keep the slides moving when you mouse over a slide? Right now a mouse over stops the rotation.
    Thx! Patricia

  81. Josh, thanks for the great plugin! I’ve used it on several website.

    Quick question: I’ve got a responsive Genesis theme but the slider isn’t responding. All of the elements see to be set to 100% except the IMG, which contains a fixed width and height.

    Here’s the link:
    http://lincoln.accidentattorneys.org/

    Thoughts?

  82. Hi Josh!

    Great plugin I must say! Good work!
    Just a quick question, I would love to have a slider(in the homepage) to cover the entire of the mobile screen. Can I do that?

    Cheers!

    • Thanks James, I’m not sure exactly what you mean, do you have an example of what you’re trying to do?

      • Sorry for not making myself clear.

        What I meant, how can I add full screen slider for vertical view on mobile devices? Horizontal view works perfectly fine. The best example I can find: http://nicinabox.com/superslides/#1

        If you look at your phone on vertical view, meteor slider is sitting 1/3 on top of the screen but nicinbox spread the image full screen. I would like to spread the slider into full screen.

        Thoughts?

        • Ah, I see what you mean. Sorry Meteor Slides isn’t a full screen slideshow, it will scale down to fit any screen, but it has a max height and width.

  83. Hello Josh,
    You have created a wonderful slideshow plugin.
    I been trying to remove the width & height attributes from the tag.
    Can you please help me?
    Thank you.
    -Keshav

    • Thanks Keshav, why do you want to remove the heght and width from the img tag, are you having problems getting the slideshow to scale?

      • No i dont have any problem on scaling, I just wanted to create this for simple responsive design.
        I have to give styles as 100% width and height auto via css file for smaller screen.
        So according to my knowledge, its very important for me to do this.
        Thank you very much for your reply.
        -Keshav

        • Thank you Josh, I have done this.
          I have removed some items from “slideshow.js” file.
          $slideheight & $slidewidth
          And this is working fine for now. (created some styles with using “!important”)

          But i still see the Width & Height on tag.
          Please let me know if any another alternate solution.
          Thank you very much, Have a Good Day.
          -Keshav

          • I don’t think this is going to work right if you start removing the height and width from the JS and markup. The slideshows are responsive and will scale down, but they aren’t fullscreen slideshows, they need a max width and height.

            Can you post a link to the page you’re working on or an example of what you are trying to do?

Links to this post
  1. I’m Loving Twenty Twelve | Cynthia Burtch

Leave a Reply

Say something and add a Gravatar?