Meteor Slides has been out for two weeks now and I haven’t heard about any more bugs, so I have started working on adding more features to the plugin. If you do run into a bug, please let me know.
I was really surprised that almost 400 people watched the Meteor Slides screencast that I recorded, I hope that video makes things easier for some users. I will definitely be making some more screencasts related to theme development in the future.
Meteor Slides 1.1
The latest version of Meteor Slides now includes a slideshow widget, an easy to customize stylesheet, and an update for the jQuery Cycle plugin that powers the slideshow.
Meteor Slides Widget
A few users had asked me how to add a slideshow to a widget, so I added a widget for the slideshow. Now there are three ways to add a slideshow: the template tag, shortcode, and a widget. The widget is easy to use, just grab “Meteor Slides Widget” and drag it to any sidebar. Make sure the dimensions of your slides fit that sidebar though!
Slideshow Stylesheet
Some people have been running into conflicts between their theme and the slideshow. An unwanted border around the slide images, or dropdown menus hidden behind the slides.
Meteor Slides is intentionally minimalist; there are no frames or buttons and you’re free to make it match your theme as you see fit. To help keep the slideshow from conflicting with themes, I have added a stylesheet to the plugin.
The stylesheet basically acts as a reset, making sure that no borders, margins, or padding are unintentionally added to the slideshow. It also sets the z-index of the slideshow to 1, which should put it below the dropdown menus. But every theme is different, so you may have to bump it up or down to get the correct layering.
When I added this stylesheet, I switch the meteor-slideshow div from a class to an id. If you have already added your own CSS for the slideshow, sorry for breaking your styles! I shouldn’t be doing any more tinkering with the markup in the future.
Adding your own CSS styles to the slideshow is simple. Just copy meteor-slides.css from /meteor-slides/css/ to your theme’s directory to replace the default plugin stylesheet.
JQuery Cycle
I updated the jQuery Cycle plugin to version 2.88.
What other features should I work on? I’m thinking multiple slideshows, since I can’t actually think of any other slideshow plugins that can handle more than one.
Thank you for the update. This has gotten rid of the border at the top of the slideshow on my blog. Bruce from WPWeaver reworked a copy of his 2010 child theme for me to include the shortcode for this slideshow. I’m still having one problem though. Please take a look at how it loads and let me know if you can figure out why the first slide (loads to fast to see more than one slide) is being loaded/shows up below the actual placement of where the slideshow is on the page. Refresh the page and you’ll see that the slides load behind the menu.
And definitely multiple slideshows on a page would be very helpful. Thank you.
Hi Frances, glad that the update helped, thanks for trying Meteor Slides.
I do have the slideshow setup to hide the extra slides, but it doesn’t seem to be working quite as well as it should.
I’ll work on an update that resolves that issue. In the mean time, if you add this bit of CSS it should crop the extra slides.
Thanks, Josh. The css fixed the issue above.
Looking forward to the update that includes multiple slideshows.
Great plugin, thank you 🙂
Can I add forward and backward arrow to the left and right side? is it possible?
No problem Yan, thanks for trying Meteor Slides.
Sorry, I don’t have any plans to add navigation to the slideshow, but if you wanted to get in there and hack things you could do it I’m sure.
Great plugin. I especially like that I can easily change the order of the graphics by manipulating the post dates, although it’d be nice to have a drag and drop feature for ordering pics. One feature request I’d like to make is for the plugin to accept any size graphic, specifically any width.
Question: I had a situation where the pics were not the size I put in the settings area. I gathered that it’s essential that width and height be placed in the settings before pictures are loaded. However, my 600h by 700w pictures were coming out closer to 400h by 300w. Any ideas about that?
But whether you make any of those changes or not, I’m enjoying the plugin and appreciate that you took the time to make it.
Thanks Dee, I’m trying to come up with a better way to manage the order of the slides, but haven’t hit on anything just yet. I’ll see what I can do about slides of variable sizes.
Yes, you need to set the size first so that the featured images you add are the correct size. If you did this and the end result is a different size, it has to be any issue with the theme, maybe the CSS is resizing them.
Could you post a link to site you are working on?
Great plugin. Just plug and make my blog beautiful.
Thank you very much.
You’re welcome gustulank, thanks for trying out Meteor Slides.
Hi Josh, congratulations from Italy!
Really an useful and simple plugin.
Actually I’m using meteor slides in the sidebar as widget, but indeed i need to use different slides sequence in different pages (also using the MS through code/php, not necessarily as widget).
For example:
Home -> MS that use only slides 1, 2 and 3
Blog -> MS that use only slides 5, 7 and 9
etc.
There’s a way to do this?
Or, the MMS (multiple meteor slides 😉 ) will support this kind of features?
Thanks in advantage for your replies!
Thanks Gino, I am working on adding support for multiple slideshows to Meteor Slides in the near future. I’m also working on adding localization if you’d be interested in translating Meteor Slides into Italian 😀
Why not!
If you mail me a plain text file I’ll glad to translate it as soon i can. 😉
Great, I’ll send you a copy!
Is there a way to order the slides? This is a big disadvantage in my view.
Hi Joel, I am planning to add a smoother method in the future, but you can easily switch the order of the slides by changing the publish date.
hi, thanks 4 the slide, it works awesome on my friend’s site…www.jhgill.ca…but on mine it’s broken…www.delivery4u.co.cc..can u shed some light by e-mail….thanks…
Hi Sunny, thanks for using Meteor Slides.
The problem is that your theme is very old and has not been updated since 2007. You can easily fix this theme to support Meteor Slides by editing your theme’s
header.phpfile.In that file, add this bit of code just above the
</head>tag:That should get my plugin working, but I’d suggest trying to find a more current theme, maybe in the official directory, that has been updated in the last year with the latest features and best coding practices.
Hello, Meteor is great because it is simple in use and configuration. One thing that’s missing is the ability to add some optional text over every image.
If you visit my website, you’ll see that i use 4 sliding images which correspond to a respective destination (which is actually a post). Every destination has a small description in order to give a clue to visitor.
I believe that this would be a great addition to this plugin. Do you have something in your plans about it or am i completely out of point 🙂 ?
Hi yiannis, I’m glad that you found Meteor Slides easy to use!
I’m afraid I don’t plan to add a text overlay feature. I want to keep the slides very simple and and minimalist, so there won’t be anything added to the slides that isn’t a part of the image.
But many users, including myself, add text right to the images. I think prepping your images before adding them is the best way to ensure they are the highest quality and will have the most impact. 🙂
Hey Thanks for making our lives easier with this plug-in. I’d like to know how one would put different slide shows on different pages. I’ll bet the answer is right in front of my face but I can’t see it.
No problem Mike, glad you like it!
The plugin currently supports just one slideshow, but I’m planning to add support for multiple slideshows soon.
thanks for the answer Josh.
multiple slideshows will be the next step i guess!
Thanks for the come back Josh. I did find out you only support ONE at a time…AT this time. Sorry to bug you about it. The answer was a couple more searches away, I got lazy and I pulled the trigger too soon.
Not be a pain in the a$$, but I did post a comment about the fade emanating from the center rather than from the “0” x, y upper left corner which would look great when using portrait and landscape formats in the same presentation. I don’t ask for much, do I? Fix dis, fix dat, fix the udda ting…jeez!!!
Thanx again…great plugin…easy to use…great basic effects!!!
No worries, a lot of other users have been asking for multiple slideshows too and I’m hoping to get that added in the near future.
I’m not exactly sure which transition you are talking about, do you have a link you should show me, I might be able to help you tweak that.
The transition I’m referring to is the basic fade. It fades great, but the image is anchored at the upper left corner, which looks fine if every slide is the same.
I took your advice and pre-prepped the slide dimensions.
I choose a height limit, that way if there was auto centering all images would fade over each other at the center, and the photo, being centered as well would look good regardless of using portrait or landscape formats.
Since I’m and photo and graphics guy, it’s just an aesthetic consideration…just my 2 cents.
OK, so the transition itself is fine, but the slide images aren’t aligned properly?
I haven’t done much testing with slides that are in a variety of dimensions. Most of my tests were with larger images so they are all cropped to fit the slides. I’ll test it with some portrait and landscape images and see what I can do to make it layout better by default.
Josh,
Thanks for the great plugin. I am also running into the problem of my themes adding a border around the slideshow when using it in the widget. I placed the CSS stylesheet in my theme’s directory, but it’s still showing the border there. I don’t want any border for these slides. Do you have any quick bit of coding wisdom on how to fix this? Thanks for helping me. You can see the slideshow at the bottom right sidebar on my home page.
Best,
Rick
Hi Rick, after copying the plugin’s stylesheet, you need to edit it if you want to make any changes. But the border isn’t a part if the plugin’s style, it’s the theme’s style for the widget.
It looks like you need to remove the border and padding on just the slideshow widget to get it to fit properly. Try adding something like this to your theme’s stylesheet:
Josh, I am also noticing that it’s resizing my slides to a height of 215 px, when I’ve set the parameters for it to be 324px in height and 300px in width. Any idea how to fix that too?
From my end it sure looks like the dimensions are set to 300 x 215. Did you set your dimensions before adding your images? It won’t resize existing slide images, so you need to re-upload any images that were added before setting the dimensions.
Josh,
thx for the great plug in.
one question: how can I center the slideshow on pages, or posts?
No problem Leo, that depends on your theme, and where exactly on the page the slideshow is. Could you post a link to the page you are working on?
Thank you for this plug in.
I am looking forward to the multiple slide shows.
You’re welcome, thanks for trying it out!
Thank you from me too.
I understand that at this time there’s no title/caption feature. Meanwhile I’m trying to float a static text box div above the slideshow via z-index, but it always shows up behind the slideshow in all browsers (WP 3.1 thematic custom childtheme)
oh, duh, I forgot to make the div relative. nevermind 🙂
No problem, thanks for trying my plugin Leslie!
Not find a way to focus the image within the slide, I could help, do not understand what the stylesheet: S Thanks.
Great plugin! I was going to use Smooth Slider, but I seen on another site that the Meteor Slide could be placed in the header. What is the code to place it in my header?
I forgot to add that I’m using WordPress 3.1. I would like to add the Slide show to my header and need the code or whatever it’s called. I also forgot to click the button below to notify me of follow-up comments. I was using the other slider, but seen yours on another site and liked it better. Thanks!
Hi Caleb, you can use the template tag to add a slideshow to your header:
There is more info about this in the documentation on adding a slideshow, where exactly you add this code depends on what theme you are using though.
Thanks so much Josh! I’m using Artisteer 3, and I do have the slider working. However, I can’t figure out where to adjust the slides exact location. Right now, it’s too high up.
I do have a recommendation if you’re planning on a future upgrade to Meteor. My son designs logo’s and other artwork for me, so when he emails them to me I download them and upload them into my wordpress site. Some of the artwork I would like to add to the slider as soon as I upload the image, thereby bypassing the back and forth..:-) Don’t get me wrong because I’m not complaining. Just offering a recommendation if you plan on upgrading the awesome plugin in the future.:-)
I added the website link http://hb.arcn.us if you want to check it out and see if you can see what I have done wrong because it appears to be a placement issue more than anything else.
I’m not sure exactly how you are trying to position the slideshow in the header, but it looks like the slideshow dimensions don’t match the dimensions of that spot in the header.
Lol. I think I know what the problem is now. I added a transparent text box in the header and forgot about it because it’s been a while since I had last worked on the site design. Anyway, that’s probably right were the slider went. I’ll mess with it later tonight or Friday. Thanks Josh, and thanks for such an awesome plugin…:-)
Hey Josh–
Is it possible to put a different slide show in widget and the header at the same time?
Hi Mike, yes you can do that with multiple slideshows.
I have a site set up with multiple slideshows. They work great but during the fade, the images are 1px narrower than the setting. As soon as the fade completes, the images returns to its correct width, but the result is a 1px white bar at the right of the image during the fade and a very slight distortion of the image. I don’t see this occurring on your demo slide show so I’m not sure what the problem is. The URL Is currently hidden but if you’re wiling to take a look, I’ll send you the acces creds. Many thanks.
Dave Bricker
P.S. The anomaly only seems to show up in Firefox. Works OK in Safari.
Hi Dave, I can take a look if you want to send me the info.
i use the meteor slide and i create the top menu and also createt the submenu. i change the z-index value also. but submenu didn’t display. what i do?
I can take a look if you want to post a link.
Hi,
I am using your cool plugin on globalvisas.com and it is not showing the slides in the sidebar. I have set them all to featured images and left default image sizes – They were to appear via a widget under premier partners
Any ideas welcome
Thanks,
Hi Al, the slides with the images are loading in that slideshow, but there is a JavaScript conflict that is breaking the slideshow script. This error is coming from the ShiftNav – Responsive Mobile Menu plugin, deactivate that plugin and the slideshow should work.
Right now jQuery is not loading, I think that plugin might be deactivating it and trying to load its own version of jQuery.