Meteor Slides users often ask how to create multiple slideshows with different sizes. Here is a tutorial which will show you how to do this using multiple slideshows and metadata.
Let’s say you need two slideshows on your site. The larger slideshow, Jupiter, is 500×200 and the smaller slideshow, Mercury, is 300×150.
The height and width options on the slides settings page determine two things, the dimensions of the slideshow itself, and the maximum dimensions of the individual slides. Smaller slides can be used, but any slides that are larger than these dimensions will be cropped, so the height and width in the slides settings should match the largest slideshow on your site.
Start with the largest slideshow
Start by setting up the largest slideshow in the standard way. In the slides settings, set the Slide Height to “200” and the Slide Width to “500”. Then create a slideshow called “Jupiter”, make your slides with images that are 500×200, and add them to the Jupiter slideshow.
Here is an example shortcode to load the largest slideshow with the name Jupiter:
[meteor_slideshow slideshow="jupiter"]Note that you don’t need to use metadata to set the dimensions of the largest slideshow because it should match the dimensions on the settings page.
Then setup the smaller slideshow
Now for the smaller slideshow, create a slideshow called “Mercury”. Make the slides for this slideshow with images that are 300×150 and add them to the Mercury slideshow.
Because you have used smaller slide images which were prepped to fit 300×150, all you need to do is override the default slideshow height and width using metadata to shrink this specific slideshow to the proper dimensions.
Here is an example shortcode to load the smaller slideshow with the name Mercury:
[meteor_slideshow slideshow="mercury" metadata="height: 150, width: 300"]When using metadata, only values which are strings should use single quotes, other types, such as the integers in the above example, should be used without single quotes.
Styling specific slideshows with CSS
By default the slideshows will be full width block level elements. Maybe you would like to wrap some text around the smaller slideshow though.
When you specify a slideshow, a unique ID is created for it based on the slideshow’s slug. So the Mercury slideshow ID would be “meteor-slideshowmercury”. With this ID you can target just that slideshow with certain CSS rules:
#meteor-slideshowmercury {
float: left;
margin: 0 20px 20px 0;
}
Keep it simple
But don't forget, less is more! A slideshow is a great way to get a visitor's attention, but when you add multiple slideshows or other animated elements to the same page you are dividing the user's attention and diluting that page's potential.
So try to keep it simple by spreading these elements out to different pages to reduce the clutter and increase the quality of your website.
Hi Josh,
just found your plugin and it works great for me! Thanks for you work.
There are is something I mentioned playing around with it and I wanted to ask if this is the right behavior.
I scaled the slideshow to 800×500.
Added 2 slide with an image 800×500
Added 1 slide with an image 800×300
When I look at the page the box is shrank to 300 in height. If I delete the small image the box is ok. So I guess all images have to be in the correct size and not too small!?
Another question if you don’t mind. Is it possible to add the navigation via keyboard (pressing left and/or right)
Thanks and keep it up!
Hi Dirk, it does work best if the slide images are all the same size. You can use images with different sizes, but the slideshow will scale to the size of the first image, so you would want the largest image first.
There are examples online that show how to add keyboard navigation to jQuery Cycle, you could use a custom slideshow script to do this.
Thanks a lot for quick answer Josh !
Hello, I tried use:
but the Slideshow doesn’t appears. What could be causing this?
Help me, thanks.
Hi Keit, can you post a link?
Hey Josh, first, thanks for your plugin, works amazingly!! One question, while i’m creating a different slideshow with custom size, when I try to hover or click the arrows everything goes down like if there’s something above the images, please take a look here: http://goo.gl/qyihN
Again, thanks so much!
Hi Arturo, the slideshow is working good for me. Did you get it fixed, or is this only happening in a certain browser?
Hi, I have a problem.
When I write the code belowe I can see the images in the slideshow, but the slideshow’s container takes the height of the principal slideshow.
Can someone help me?
Thanks a lo.
Hey Daniel, the code you posted isn’t coming through in the comments. Can you create new post in the support forums with that code and a link to the site you’re working on?
Hi Josh,
I have uploaded an image that is 1400×400 and my slideshow is set to 1400 and 400 respectively in the Slides Settings menu. I’m using the responsive two thousand twelve theme default in wordpress 3.5.1, my width is scaled to 960 just fine, but the height is cropping at 137px.
Any help would be greatly appreciated.
Site is: Excited Designs
Cheers,
Chris
Hi Chris, the slides look good on my end, did you get it figured out?
Yeah. But when I tried replying to my own comment, the form here lagged out and chrome seized up, so I just left it. I had to delete the old image entirely, and then upload it again.
Thanks! Chris
Cool, that’s good to hear!
Hello Josh,
I hav inserted the following code:
to my page-fullwidth.php file.
I have 3 slides, if i have only one slide it show the image. How ever if i have more then 1 the slider just loads blank and no images are displayed.
Sorry, if you need to share some code you’ll have to post it in the support forums. Can you send me a link to the page with 2 or more slideshows on it that aren’t working?
i am working on it locally so i cant give you a sample, i am using the cherry framework with a child theme, would this cause any complications
That’s tough to troubleshoot. Sounds to me like there are some JavaScript errors. If there is one slide it will just load it as a static image, if there are multiple slides it uses jQuery, so if JS ir broken it won’t work with multiple slides.
I would try inspecting WordPress with Firebug or another tool and see if you can find some errors. You can also try deactivating your other plugins to test for conflicts.
I have trouble making multiple slide show in a single page.Like if i have to insert multiple slide shows in a single web page without writing code again and again.What should i do?
Can you post a link to the page you’re having this problem on?
I do not have that website online yet.but i have mailed you the coding.
Thank you.
Is that PHP file you sent me part of a WordPress theme? I don’t see the required WordPress functions or the slideshow template tag.
Hi Josh! I am so frustrated! Is there a way I can adapt this plugin to create an image slideshow like the one on this site: http://www.mavericksouthernkitchens.com/highcotton/charleston/ . If not, how should I go about creating this…thank you!!!!
That’s pretty custom, you wouldn’t be able to do that with Meteor Slides. Slideshows are really meant to show one slide at a time, in that example it is sort of working like a slideshow, but it displays multiple slides at once, so it is really a carousel.
That site uses the Infinite Carousel jQuery script, which I don’t think is being actively developed anymore, you could try starting with Cycle 2.
Thanks for your help Josh!
Hi Josh,
I’m at a loss… I’ve deleted the plugin, slides, slideshows and re-added everything but still get nowhere.. The sub pages (sell) seem to cut off the slide. It appears that the slider is only using cropped images even though I’ve adjusted the “settings” to account for the largest x and y axis for my 2 shows…
There is a chance that the other guy working on the site (real estate MLS data) has screwed with something, but I can’t find it.
Mostly want to be sure that I have your settings correct on my end…
Did you re-upload the slide images after setting the current slideshow dimensions?
I did… even renamed my sliders so there wouldn’t be any mess in the back end…
[meteor_slideshow slideshow="inner1" metadata="height: 310, width: 970"]
This is my slider shortcode.
Honestly this just doesn’t make any sense… I have a feeling there’s something in there that the other guy has screwed up… Your sliders (both!) worked perfectly before he screwed up the database and broke my entire header. (yes, it’s already been a long week!) 🙂
don’t waste your time on this… I’ll work on this end.
Thanks for your help. Awesome slider!!!
for what it’s worth, I added a different slider plugin and it works fine. I’m terrified to know what he’s done to my client’s database! 🙂
thanks again for your help!
Good to hear you got something figured out Jason.
Hey josh.
This is lokesh again.I have solved my problem regarding slide show but now i am facing a new and very irritating problem.
Actually i am using two style sheets in a single web page but when i change one…Other changes automatically.
Like first is Hori.css for Main menu and other one is for vertical menu named as vertical.css but when i made changes to vertical.css the main menu automatically change.I am sending you the codes in text file. on your email id.
thank you.
Is the site you’re working still offline? if you could get it online it’d be a lot easier for me to debug.
Yeah its offline.
How can get a site online when i am still working on its home page 😛 ?
The same as you would put a site online when you’re ready to launch it, but usually you put it on a subdomain or a subdirectory and “discourage search engines from indexing this site” so that it is private until you’re ready to launch it.
I am just practicing for now my friend.I do not know how much time i will take to finish this website.So please tell me.
Do you use Firebug or another inspector? They’re a big help if figuring out CSS issues. This is the best resource on moving WordPress.
I think i i wont need them because i just wanna know if i can use two css style sheets in a single HTML web page?If yes,Then how?
Oh, I thought you were having conflicts between those two CSS files. You can add as many stylesheets as you want to, though the less files you load the better. You want to enqueue the stylesheets in your theme via the functions.php file, like this: http://codex.wordpress.org/Function_Reference/wp_enqueue_style#Loading_stylesheets_in_WordPress_themes
I have set the default slide size to 940wX400h and have a slideshow on home page.
I need another slideshow in contact page in the right column with 300w X 500h.
The slides images are of various sizes.
I set the shortcode for the contact page:
[meteor_slideshow slideshow="yyyy" metadata="height: 500, width: 300"]
It looks horrible.
How should I set the shortcode?
Can you post a link?
First, thanks a lot for this plugin. It is very useful and very simple to use.
I am working on a site (which is on localhost so I can’t send a link yet). The site uses two slideshows on two different pages:
1. The first one has a width of 840 px and height of 280 px
2. the other has a width of 450 px and a height of 627 px
The second slideshow has its height set to 280 px.
Following some of the comments on this page, I have tried setting the width and the height in the settings page to 840 and 627 respectively. Then using metadata I have set the slideshows to the settings I want like this:
[meteor_slideshow slideshow="first" metadata="width: 840, height: 280"]
and
[meteor_slideshow slideshow="impacts" metadata="height: 627, width: 450"]
The height of the second one gets trimmed to 280.
Why is this happening?
I am using weaver ii pro theme.
Grateful for help and thanks in advance
If the slide height on the settings page is 627 and the width is 840 any slide images smaller than that shouldn’t be cropped, did you upload the slide images after setting the current slideshow sizes? Try re-uploading the images.
Thanks for your very prompt reply. I did as you said and it worked! Rated five stars on wordpress.
Thanks once again
Thanks for taking the time to write a review and rate my plugin Pramathesh!
Hello Josh.
After installing Meteor Slideshow…
1. I changed the slide show quantity to 3, height & width to 150, transition style to scrollleft, and slideshow navigation to both.
2. Then I created a slideshow title “Test Example” and slug “testexample”. Then I used inkscape to create 3 images 150×150 with a .png extension and I created new slides uploading the images into the slides and selecting the slideshow “Test Example” for each slide. In my page I use [meteor_slideshow slideshow="testexample"].
When I open the page the images are not visible but if I mouse over where the slideshow is suppose to be the navigation button are visible.
Here is a line to the page where the slideshow is located.
http://moviewz.com/a-development-test-4-slider/
I would like to get this slideshow working if possible because it has the features I like to use on my website.
Why are the pictures not showing up in the slideshow?
All help is greatly appreciated,
James
Hi James, the JavaScript that powers the slideshow is broken, I see that another slideshow plugin is installed, that could be causing some conflicts. The first thing I would do is deactivate your other plugins and test the slideshow to confirm if there is a conflict with one of your other plugins, or with your theme.
Josh, thanks for your plugin, but no matter what I do, I can not get two different sizes of slideshows to show up.
The first should be on the home and that will be 950×450.
The second should be under “redefining acoustics” and that should be 940×300.
I’ve done everything I can think about and it won’t work. I’ve uploaded and reloaded. I’ve changed the slug, and changed the maximum size under settings. More than likely it is something I’m doing but can’t figure it out. Please help!
my website is http://www.nbpacoustics.com
Hi Rob, are you still having problems with this? I noticed that on the Re-Defining Acoustics page the slideshow is wrapped in code tags and this is breaking the layout. If you edit the page and switch from the visual editor to the HTML editor, you’ll see these code tags wrapped around the shortcode, remove those to fix some of these issues.
This must seem like a silly question, but if one changes meteor-slideshow.php by adding it to the theme folder, will that affect all the slides displayed on the site? Thanks 🙂
Hi Flick, it will only effect which slides are loaded if you edit the query for the slide posts in the slideshow template. Otherwise the only changes will be to the markup of the slides, like if you add titles or something to the template.
i want to use twoice meteor slide in my page.
the first is working coorectily :
according to the second i want the second height to be 150 but it is working. when i inspecte de element the height is 95.
What are the dimensions of each of the slideshows? Can you post links to the pages you’re working on?
Hey Josh, first of all I want to thank you for this great plugin and for your kind response to my question the other day. I was already able to put to work 2 slideshows with different sizes in my site with no problem.
Now, I am here with another question… Is it possible to have different transition effects in both? How could I do it?
Thanks in advance for your help. My best wishes to you and all your loved ones for 2014 that starts tomorrow.Get much health and successes!
Hey Oscar, you’re welcome! You can change the transition for a certain slideshow using metadata.
Forgive me Josh, but I have one more question… How I can do that when clicking on the slide link opens in a new window? Is it possible?
Never mind about this… I did not think it would work, but I added /target = “_blank” at the end of my link and it worked!
But my previous question is still pending… Thank you.
Hello, I am the newest of the newbies and have no clue about website building but want to add a slideshow to my website which I have done successfully so far. The problem is that the slideshow is aligned to the left of the page.
What is the code that I need to add to get this to display in the center of the page? And if possible please be specific as I am not familiar with the language.
Thanks a million.
Judith
Hi Judith, it sounds like you’re off to a great start! You can change the slideshow alignment using metadata so that it is centered.
Thanks Josh. I appreciate your help. It has been great to learn new things.
Judith
No problem!
like the job you’ve done.
big up for ya.
peace.
To Passenger – Not sure if this message is directed at me but if so, thanks a million. There are some other improvements needed that are underway. I am enjoying the forum. Now I need a plugin for Mobile devices. I am trying to learn how to use WPTouch. Hopefully, that will work just fine. So, far not but maybe I need to go into the Settings and figure some stuff out. Learning about WordPress has been a real treat for me.
Judith
Very good slider! I’ve got only an issue: the arrows doesn’t work!
Thanks for your help!
http://www.casapeana.it/gallery/
Alessandro
Thanks Alessandro! The issue with the nav is that you specified the slideshow title “Gallery Principale” to load the slideshow. Try using the slideshow slug instead, it should look something like this: “gallery-principale”.
First of all I want to say “thank you” for such a good slideshow. But I have problem with it. I set the dimension of biggest slides, re-created slides and tried to set width and height with metadata. Nevertheless slides are still the same height.
http://www.cheshire.in.ua/tesp-page/
Can you? please advice me what am I doing wrong?
You’re welcome Eugene! I took a look at your site and Meteor Slides is deactivated right now, if you could reactivate it I can take a look at those slideshows.
Ho Josh! Thank you for such fast answer. I’ve activated meteor slides plugin. They should work like the other one on the main page. can you please say why it’s croping height? I’ve set the dimension of biggest slides.
Sorry for the delay Eugene, I don’t see a slideshow on that page, did you move it or switch to something else?
Hi Josh, I have 2 different slide shows. The first one on the main page is perfect. The navigation works great. But on the second one, which is on the About Us page the navigation arrows are there but don’t work and the dots at the bottom are not showing up.
What do I need to do to correct this?
Thank you.
http://coldcreekfarmmtshasta.com/?page_id=4
Never mind, I found my error. The slide show slug is gardens-and-yard. I just had gardens and yard. All fixed.
Thanks for an easy to use slider.
You’re welcome Jodi, glad to hear you got it working!
This is the best slideshow plugin i have found !! thank you i love it so much – just fantastic
You’re welcome!
Hi Josh,
Susan Brown has a website with a lot of interior design slideshows.
Can I make a new slideshow that is taller…
original size 900×480
new size 900×600
and use your metadata method without changing the many existing slideshows?
Hi Mary, generally you want to specify the dimensions of any slideshows that are smaller than the slideshow dimensions. But if the widths are the same and the slide images are the right height, it shouldn’t effect them to change the slideshow dimensions.
Hi Josh,
I can’t seem to get my second slideshow to re-size using the shortcode you provided.
My first slideshow is set at – Slide Height: 700px and Slide Width: 1000
I made a second slideshow called “print” that I want to have the height at 295px and the width at 860px so I added photos to it that were that size, and then put in the shortcode:
[meteor_slideshow slideshow="print" metadata="height: 295, width: 860"]
But whenever I go to the page it has to slideshow still at the original larger dimensions of 700px by 1000px. Am I putting in the code wrong?
Hi Liana, that code looks correct to me, could you post a link to the page you’re working on?
This is the link with the original slideshow that’s fine:
http://sunspinmedia.com/event-coverage/
This is the link of the second slideshow that won’t size down:
http://sunspinmedia.com/printing/
The first slide in the smaller printing slideshow is 1000×700, the same dimensions as the larger slideshow. Make sure all the slides in the smaller slideshow are 860×295 and it should be sized correctly.
Josh,
Thanks for checking. When I add the images to the slides area and go to set featured image, I choose the photo that’s at 860×295, but then after I import it to the slideshow it seems like something is going wrong. All the images are the correct dimension before hand.
Are you uploading a new image, or selection a image from the media library? I can see that the image in that smaller slideshow is 1000×700:
http://sunspinmedia.com/wp-content/uploads/2015/04/print-web-top-bar-1000×700.jpg
If you remove that image and upload one that is sized at 860×295 before it was uploaded, it should fit perfectly.
Hello Josh, great plugin. Any chance you can help me change the sizes. They all seem to stay the same no mater what config I give them. I will reshape images once I see a difference in the sizes. Here’s my link, hope you can help. http://www.outdoor-shading.co.uk/products/
Thanks
Thanks Margaret! The slide images are sized when they are uploaded. So to resize them, you have to change the slideshow dimensions, and then upload the slide images and reset them in the slide posts.
Thank you, I’ll try that!
Hello,
Thank you for your amazing slider!
I have problems in creating a 800×800 slider and putting it on my page in full width.
I have first set 800×800 in settings and then added the photos. However, the slide I get is not this size and it’s also staying on the left side.
Can you please help?
Thank you!
Sara
Hi Sara, you’re welcome!
Can you post a link to the page you’re having this problem on?
Hi
How do I disable the pause when the mouse is hovered on a slideshow. This is incredibly frustrating and seems like a basic feature all slideshows have. Do you have an option to turn it off?
Hi Andrew, there is an option for this in the slideshow script, jQuery Cycle, using custom metadata: http://jleuze.com/plugins/meteor-slides/using-metadata/
The option you want to change is for pause: http://jquery.malsup.com/cycle/options.html
Sorry, I’m not great with coding, that is why I chose WordPress. So I have no idea where to put this code and what to code? Am I adding the word “resume”? Like below?
$(‘#slideshow’).cycle(‘resume’);
I’m really struggling with why you don’t just add this option in your plugin with a simple check box. I chose your plugin for ease, but now having to add this hover option and the fact you still don’t offer text overlay on your slides is disappointing.
You don’t have to write any code, these are options for the slideshow, like if you wanted to change whether a YouTube video was fullscreen or not in the options of a video embed.
I don’t have an option for this because the default value works for the majority of users. There are many different options for the Cycle script and adding I wanted to avoid adding all of these to the plugin settings to keep it simple and user friendly.
There are 3 different ways to set this with metadata, depending on whether you are using the slideshow widget, shortcode, or template tag:
http://jleuze.com/plugins/meteor-slides/using-metadata/
Here is an example of how to do this using the shortcode:
https://wordpress.org/support/topic/plugin-meteor-slides-slides-pause-on-hover-can-this-be-optionally-turned-off/
Hi
Just curious why you have your size settings as height first and width second? It’s not a huge deal but every single time I go to enter the dimensions I always enter the first dimension as width and the second as height. This causes a lot of my slides to not work. Isn’t it pretty standard to measure “Length x Width X Height” in this case you’d obviously omit “length” but the order is width then height. Small issue, but just a thought you may want to change that?
Hi Linda, these are simply in alphabetical order, that’s the order they are listed in the options for the slideshow script.