October 27, 2011 / / 340 Comments

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.

Category:
Meteor Slides, Tutorials
Tags:
,

Join the conversation! 340 Comments

  1. Dave

    I’m trying to have a different size on a second slideshow and it seems to make the area the correct size. But it seems like the images are resized to the default size (250×250) when I want the images to be 350×263. This is on the page http://theblindspot.biz/wordpress/motorization

    The homepage has the slide show at the required 260-x250.

    This is the code that I put in the page for Motorization

    [meteor_slideshow slideshow="motorization" metadata="height: 263, width: 350"]

    Can you tell me if I’m doing something incorrectly on the code?

    Thanks for your help.

    Dave

    • Josh

      Hi Dave, you have the height and width set to 250px in the slideshow settings. Any slide images you upload will be cropped to these dimensions, you should set the height and width to match the largest slideshow you need.

    • Kyle

      Hey Dave,

      I’m having trouble w/ multiple slideshows. All of the images in the “slides” area are posted in each of my slideshows. They are set up to scale as I need them but all the images from slideshow 1 also appear in slideshow 2, and likewise. here is an example http://www.kyledwatson.com/art/ all of the skewed images should not be there.

      • DavidH

        Kyle, I’ll let Josh respond with more detail since it’s his plugin but for starters I would verify that for each slide you have selected the checkbox for the appropriate slideshow (in the slide’s sidebar).

      • Josh

        Kyle, it looks to me like you aren’t specifying a slideshow on that page and that is why it is loading all the slides. It could be as simple as a typo, double check that you have the shortcode or template tag formatted correctly and that you are using the slideshow’s slug as the value of the slideshow parameter.

  2. scott

    So cool! This plugin rocks! TY TY TY Josh. I hoped you could have multiple sizes and here it is!

  3. RJ

    Meteor Slides Settings – height: 424 x width: 425

    Main page is [meteor_slideshow slideshow="main-page" metadata="height:282, width: 425"]

    Occupations page is [meteor_slideshow slideshow="occupations" metadata="height:424, width: 283"]

    The height of the occupations images does not reflect height:424 – I assume it is 282.

    How do I fix this please, I keep pulling out my hair…at this rate I won’t have much left.:)

    Thank you for your assistance.

    RJ

  5. RJ

    I just took off the security. Home page is the wide images and your’re on the list is the vertical. I appreciate your assistance.

    RJ

    https://maestrovirtualassistant.com

  6. duanwanty

    Hi Josh

    I have tried to add a smaller slideshow on a website, but the three dots, like the bigger one on the same page, seems to have disappeared and it is not changing. please tell me what i did wrong.

    here is the website:
    ww2.davidfourie.co.za

    i am using the meteor slide widget and i added the follwong in the metadata field:
    [meteor_slideshow slideshow=sponsors metadata=height: 150, width: 300]

    as you see it looks fine (sort of) except for the three dots and it doesnt seem to be showing the other slides at all.

    not an expert at all, but getting there. please tell me what I did wrong.

    • Josh

      Hi Duan, it looks like no slides are being loaded. Try adding quotes around the slideshow and metadata values like this:

      [meteor_slideshow slideshow="sponsors" metadata="height: 150, width: 300"]
  7. RJ

    They are not cropped. I removed the images, reloaded the images to library, created new slides, and it works. Your the man!!!!

    Thank you.

    RJ

  8. Alex

    Hi Josh,

    May i know after i set the biggest size in setting “735×120”
    and then i create another slideshow, i style it with css into “209×120″ like what you show above
    but i still get the main size i set..”735×120”.

    Alex

  9. duanwanty

    Hi Josh

    As soon as I add those quotes, and I save the widget info, it deletes everything after the quotes. So it doesnt save the metadate right. Shucks

    • Josh

      Hi Duan, are you adding the whole shortcode to the metadata field in the widget, or just the metadata like this:

      metadata="height: 150, width: 300"
      • Mik

        I tried entering the following code for a smaller slide show:

        metadata="height: 200, width: 260"

        to my widget but it keeps disappearing and doesnt save the settings. I also tried:

        height: 200, width: 260

        wich save, but does not affect the slide show size for the widget – Is something wrong?

        • Josh

          The second way is correct, in the metadata field of the widget, you just add the actual metadata. You might be having a theme conflict, could you post a link?

  10. duanwanty

    I dont know, how I will manage to fix it…

  11. DavidH

    Excellent. Thanks for this Josh. Using multiple slideshows is working great for me but I haven’t yet figured out how to change the *number* of slides in a slideshow via metadata. (I didn’t see that as an Option on the jQuery Cycle’s Options page.) Sorry if I’m missing that on a different information page but I’ve looked through the documentation and haven’t come across it. Thanks in advance!

    • Josh

      Hi Dave, right now the quantity in the options applies to all the slideshows. Usually I set this to match the number of slides in the largest slideshow and just add less slides to the other slideshows.

      But being able to override more of the options via metadata would be handy, I see what I can come up with!

      • DavidH

        I thought that might be the case—I’ve noticed before that while setting up a slideshow it will still cycle through without any “blanks” even before I have met the total number of slides I’ve defined in the settings but I was concerned this might come back and bite me later!

        Thanks Josh, and thanks for the quick response.

        • Josh

          No problem David, so the slideshow is loading empty slides for you? If there are only 3 slides in the slideshow, that’s all that should be loaded, even if the quantity is set higher than that.

  12. oz

    I love the plugin, but I have a quick question, can the second smaller slideshow work if the y axis is bigger than the 1st slideshow’s y axis, for ex. 1st is 640 x 335, 2nd is 290 x 470.

    2nd is smaller but the y axis is bigger.

    Thank You!

  13. oz

    I have answered the question, just put in the metadata for 640 x 335 and then reset the settings to 290 x 470 and now it works like a dream!

    • Josh

      Yeah, if the slideshows are drastically different in size, you have to set the height to the tallest slideshow and the width to the widest slideshow and set the dimensions in the metadata for each specific slideshow.

  14. Dorte Pedersen

    Hi, I am working on setting up a wordpress responsive fluid grid website and have creted the home page to be static. Instead of the featured image I want to set up a sliding images at the top to the right. I have installed the Meteor Plugin, customized the settings, but I dont know how to activate it so it shows up.

    I dont want to use widgets or include it as a posted image inside of the text-post, as the placement would not work visually.

    How do I replace the current featured image with the slider image, so it is placed where the featured image is now? Thanks for your support in advanced. All best, Dorte

    • DavidH

      @Dorte, when you say the homepage is static do you mean you’ve created a page template and hard-coded the homepage content in that? Also, can you give us the link to the page?

      • Dorte Pedersen

        Hi again, no, what I have done is this: Under Settings Front page desplays: I have chosen A static page, and front page is home page, Post page is my about page. My plan is to set up the Meteor slider on the front home page. Sorry, but I am quite new in setting this up. Hope this clarifies it.
        Thanks

        • Josh

          There are two ways you can add a slideshow to the page you have set as your homepage. The easiest way would be to add the shortcode to the content of that page using the the visual editor.

          But if you wanted the slideshow above the page title, or right below the header above two or more columns, you would need to use the template tag and add it to a template file in your theme. For most of the themes I build, I create a custom page template with a unique layout just for the homepage.

          Check out this tutorial I wrote on creating custom page templates for more info on how to do this.

    • Josh

      You’ll want to use the template tag, but where depends on your theme, what theme are you using and could you post a link?

      I don’t have any good documentation yet, but it is possible to customize Meteor Slides so that the slideshow is responsive and scales well with the rest of the site.

      • DavidH

        As a reference to Meteor Slides in a responsive site, I just finished building a very simple project (that I didn’t design) that took a little Meteor Slides customization to make responsive. Feel free to check the source: http://freedomsolarpower.com.

      • Dorte Pedersen

        Hi again,

        my site is http://dortepdesign.dk
        It is the picture on the home page that is placed on the second right coloumn wich is 300px high and 400px bright. This is by adding the image as a featured image. If I put the picture inside of the text post it goes below the text in the left coloumn (not wanted).

        So I am not looking for a 960 px bright top image slider.

        The theme is React from http://thethemefoundry.com
        Cheers

        • Josh

          The theme is commercial so I can’t look at the code, but if you can email me a login for the site I can look at the code of the homepage in the theme editor and tell you what to change.

  15. Duan

    Hi Josh

    I have been trying to unsubscribe from the comment on this page, as I no longer need assistance, but it keeps giving me an error. Can you assist?

    Its not that its im not interested, its just that I dont need the advice now.

    Trust you understand.

  16. Kermit Woodall

    I had similar problems with multiple slideshows like people here (and thanks for your helpful posts everyone!) and found another Gotcha. The Admin / Settings / Media needs to have the thumbnail size ALSO set to the the largest dimensions.

    Josh – you might want, in your code, to call the thumbnail for the slideshows with the specified size directly instead of using the default.

    Kermit Woodall
    http://kermitwoodall.com

  18. John C

    What would the shortcode be for turning navigation on or off from the default?
    Thanks

  19. John C

    Thank you, that worked well. I’m struggling with the meta to control the duration of individual slideshows. I thought
    [meteor_slideshow slideshow="myshowname" metadata="duration: 1000, height: 400, width: 600"]
    would work…. nope.

    Can you point me in the right direction?

  20. smooker

    Just wanted to say thanks for a fantastic plugin! It really delivered in the nick of time!

    I had to install 6 synchronous slideshows on the homepage of a corporate site that all had to fire off at the same time, and many other plugins including Nextgen Gallery’s slideshow (load times varied) and JJ NextGen JQuery Slider (buggy pause on hover would interrupt one slideshow while the others would continue, leading to sync issues) failed where Meteor slides performed beautifully.

    Gave the plugin 5 stars on the wp plugin page.

    • Josh

      Thanks for the feedback and the rating, glad my plugin came in handy for you!

    • Josh_Max

      Josh,

      I wanted to echo what smooker said: thank you very much for the work you’ve put into this plugin!

      I’m working on a site redesign for the public school district where I work and found Meteor Slides to be the best plugin around for quickly and simply showing different images on different pages. Since you included the metadata plugin, I can easily change up the sizes depending on what I’m doing: brilliant!

      I plan on using Meteor Slides on many future sites, as well.

      Thanks again!

      PS – If you decide to have a “Showcase” of sites using your plugin, I’d be happy to send you a link for the school district’s site once it’s completed.

      • Josh

        No problem Josh, thanks for your feedback! I’d like to put together a Meteor Slides showcase, it has been on my to-do list for quite a while!

  21. Sarah Edwards

    Hi Josh,

    This is a great plug in – thank you so much. I have added the slideshow to my theme to use in the header I have used and it has been working well. However I would also now like to add a different sized slideshow to my pages. I tried the code in your blog [meteor_slideshow slideshow="name of slideshow" metadata="height: 150, width: 300"] and tried inserting it in varing combinations within the PHP code (without the shortcode []s) but it didn’t work – is there a different format to use if you are adding via PHP? Also is it possible to have slideshows containing different number of slides?

    Thank you so much,

    Sarah.

    • Josh

      The template tag is formatted a little differently than the shortcode, you don’t need to include the names of the arguments, just the values, like this:

      if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow( "name of slideshow", "height: 150, width: 300" ); }

      Take a look at the multiple slideshows page for more examples. The slide quantity is global, but I usually set this to match the quantity of the largest slideshow and add less slides to the smaller ones so that they have correct number of slides.

  22. John C

    Hi Josh, Happy belated New Year.

    Is there a way in the shortcode to disable the mouse from pausing the slideshow?

    I’d like the header show to run whether or not the users had their mouse over the header. I’d like to retain the page navigation buttons, if possible. Oh, and world peace. Might as well ask for it all.

    Thanks,
    John

  23. Sarah Edwards

    Hi Josh, thank you for the speedy response! All working now! Once again – thank you for such a great plugin.

  24. John C

    Thank you Josh.

  25. Sarah Edwards

    Hi Josh,

    Is it possible to have a description on a slide? I have slideshows which contain some before and after shots – what I need to be able to do is have a ‘before’ and ‘after’ on each slide. Also is it possible to vary the speed of different slideshows?

    Thank you so much,

    Sarah.

  26. Sarah Edwards

    Hi Josh,

    Sorry – i’m a bit confused (not hard) – will this automatically add the title that I have given each slide to the bottom of the image in an overlay effect? If so i’m doing something wrong! I copied the php file into my themes directory (wp-content/themes/thesis_182) and then added the code that is on the page you directed me to and put the css in my css file. I’m wondering if i’ve put it in the wrong file or something?

    Thanks,

    Sarah.

    • Josh

      Yes, if you customize the slideshow template and stylesheet as outlined in the documentation, it will overlay the title onto the slides. Do you have a link to the slideshow you’re working on?

  27. Sarah Edwards

    Hi Josh,

    Sorry – I’ve only just had a chance to have a look at this. The link is http://c0268214.myzen.co.uk/chiltern-estate/ it’s not live yet.

    Thank you!

    Sarah.

    • Josh

      I took a look at the site, the captions are there, but they are hidden under the slides, the CSS to overlay them on the slides isn’t loading.

      Make sure you use a custom stylesheet in your theme and add the CSS from the documentation to that stylesheet.

  28. Mike Finding

    hey Josh – GREAT plugin and I’ve used it on a couple of client sites now. However the latest one I have has decided to throw a bit of a wobbly!!

    I have the settings page set for the Gallery page photo size – larger photos and have set a post header in a Weaver theme as I have done before. THAT one works fine with the size meta detail.

    The Gallery page will not show as the set size, but as the header size!! Any thoughts would be great!

    In fact I have the settings and sizes, meta details all set as in a previous installation that works fine!!!

    Many thanks

    Mike

    • Josh

      Thanks Mike, glad you’re liking my plugin. The most common issue with changing the dimensions with metadata is a simple typo, so make sure you doublecheck the shortcodes or template tags you’re using. Could you post a link to the site you’re working on so I can take a look?

  29. Mike Finding

    The Gallery slideshow short code – this is the large one that is showing as a header show size!
    [meteor_slideshow slideshow="gallery-slideshow" metadata="height: 600, width: 900" metadata="fx:'fade', random:3"]

    The header shortcode and it’s working fine!!
    [meteor_slideshow slideshow="header-slides" metadata="height: 205, width: 940"]

    The whole site is behind a Maintenance Screen at the moment.

    Main Size Settings:
    Slide Height: 600
    Slide Width: 900

    I may well be missing a space error but I have looked far too long and kinda “snow blind!”

    The settings are actually copied (and pasted on the short codes) from a site where it’s working fine!!

    Many thanks Josh

    Mike

    • Josh

      Mike, that gallery shortcode has two sets of metadata:

      [meteor_slideshow slideshow="gallery-slideshow" metadata="height: 600, width: 900" metadata="fx:'fade', random:3"]

      Is that how you have it entered on the site? Try merging them like this:

      [meteor_slideshow slideshow="gallery-slideshow" metadata="height: 600, width: 900, fx: 'fade', random: 3"]
  30. Leandro Cosas

    Hi Josh,

    Meteor Slides is very good plugin for WordPress, but I’ve been having problems about it stops when I change my browser tab.

    Can you help me.

    Thanks

    Leandro

    • Josh

      Hi Leandro, that is how jQuery Cycle is setup, it will only run in the background for a short amount of time before pausing. This prevents the script from eating up too much resources when it isn’t being used, I don’t think this can be changed.

  31. Mars

    Hi Josh,
    I just want to tell you tank for the GREAT plugin that you created.
    and your explanations are very good too! thanks

    Mars.

  32. Lena

    Hi!
    Just wondering if it is possible to align the slideshow so that some text is shown beside it.
    I have one sliedeshow that covers the whole width on our frontpage, and then I want to put another smaller slideshow on another page where the text is shown on the left side of the slideshow.
    /Lena

    • Josh

      Hi Lena, take a look at the section above on “Styling specific slideshows with CSS”. You need to style just the one slideshow by using its ID, inspect the page with Firebug or view the source code to figure out the ID.

  33. Lena

    Thanx big time!!

  34. Oliver

    I’m trying to adjust the slides in 100% width to use this “metadata width: true, but the height remains the original size in pixels, so that the paging controls are far apart.

    As I can fix this?

    http://www.unlogotipo.es/vbc/

    • Josh

      The slideshow has to be a fixed width, 100% won’t work and “true” isn’t a valid option. What exactly are you trying to do, do you need the slideshow to scale?

      • Oliver

        Thanks for responding so quickly.

        My aim is to fit all kinds of screen resolutions.
        You can see it in http://www.unlogotipo.es/vbc/, adjusting the size of the browser window

      • Oliver

        I have been reviewing the documentation of “jQuery Cycle Plugin” and apparently it works automatic adjustment.

        I think the decision comes to creating the properties of the DIV.

        • Josh

          The jQuery Cycle plugin doesn’t support scaling like this by default, but Meteor Slides 1.5 does. It is responsive and scales with the site if your theme is responsive or has a fluid width.

          But it still needs a maximum width, you don’t need to go to a 100% since the site and the slide images only go to 960px you can leave that as the default width, that will be the max, and it will shrink from there as your site does.

          I haven’t released 1.5 yet, but you can get the beta from Github, Try shrinking the homepage of my site to see it in action.

          • Oliver

            Thanks, the behavior of your homepage is what I seek.

            As for the beta, is reliable? .. I can work with it without problems?

          • Josh

            Yes I keep the master on Github stable, it is ready to go I’m just doing some testing.

          • Oliver

            Great, works like a charm, I think I can throw a new update.

            As for the administration, you might consider storing the parameters of the slider for a simpler integration, aimed at users without much knowledge. Also be nice to have the option to create labels for photo description.

          • Josh

            That’s good news, thanks for the feedback!

  35. Oliver

    Hello again.

    As I can list all the sliders creator recovering by “slug”

  36. Karah @ thespacebetweenblog

    This plug in is so great! I am working on making my smaller slideshows now for my sidebar! What code should I use to put a smaller slideshow in a text widget?

    Also, I do have one question, and it’s really not specific to your plug in, but I can’t seem to figure it out on my own. 🙁 I want my main slideshow to run on my home page only, right below my meta tabs but above my homepage post title, and to the left of my sidebar…and I have no idea where to add the code for the plug in to do that. Any suggestions? I am using Mantra theme and I don’t have a home.php or other editor page that would seem to correlate to only my home page. Any suggestions you can provide are greatly appreciated!!

    Thanks again for this awesome plugin, I can’t wait to get it added to my blog as soon as I can figure out the above. 🙂
    Karah

    • Josh

      Hi Karah, thanks for trying my plugin. Don’t use a text widget, use the slideshow widget and add the height and width values to the metadata field, like this:

      height: 150, width: 300

      Mantra has a custom file called front-page.php that is loaded on the homepage if you have set that in the theme options, otherwise index.php is used. If you are using index.php, you can use a conditional tag to only load it on the homepage.

      To figure out where to place the slideshow in the file, inspect it using something like Firebug to find the spot you want.

  37. Elias

    hi
    its my first time here and my first time using meteor plugin. Its a great plugin.

    What i’d like to ask is, i have a big slideshow with custom previous/ next buttons in it, now i want to have another slideshow, but with different prev/next buttons.

    How can i do that?
    I’ve tried to style using the slug class as stated but it seems that those buttons are not afected. can you please help me?

    thanks

  38. Elias

    hi
    it’s me again 🙂

    now i have a doubt that i could not figure it out:

    I want to create a menu using elements and what i want is the user to click on one of those menu links to change the slide image to one refered by the menu. How can i do this?

    What i’m really asking is how can i change images manualy outside de plugin?

    thanks

    • Josh

      Hi Elias, I’m not sure I understand exactly what you are trying to do. Do you have an example that you could show me?

      • Eliasclicking

        hi Josh thanks for answering

        i was thinkimg on something like the slide show on this site
        http://www.canadean.com/Default.aspx

        but instead of cliking the link i’d like to “set focus” on each link each time a image passes in a way that the user knows what i’m refering too.

        is there a way to do this?

        thanks again

        • Josh

          Ah, it is possible to do that with some advanced customizations. That text above the slideshow is paged navigation, they just have titles instead of the graphics that Meteor Slides uses by default.

          You could customize the slideshow script to use a custom pager with the slide titles. To switch the pager buttons from click to hover you just need to change the pagerEvent option to “hover”.

  39. Elias

    Hi Josh
    Thanks so much for your answer, i’ve tried to get back to you soon but it seems your site was down or maybe there was some problem on my side. anyway thanks, i’ll take a look on what you said.

  40. Smitty

    Is there a place or link where I can find all the arguments or variables or metedata(‘s) (don’t know if this is the correct terminology) that I can use in my template tag, and what each does.

    if ( function_exists( ‘meteor_slideshow’ ) ) { meteor_slideshow( “headershow”, “height: 100, width: 213, speed: 1, pause: 0” ); }
    ?>

    The items I am refering to are height, width, speed, pause, ect.
    I want to know more. about what I can use.

    Thanks, Smitty

  41. thelonious

    josh

    sorry if this has been asked a million times, but i cannot seem to get different slideshow heights using metadata. using settings, i created a the dimensions of 580w x 800ht- knowing that 800px was the max height of any of my slides. however, as you can see in these two examples, the height is not different. specifically, the slideshow on the “carbon neutral house” should be much taller.

    http://skyedesignstudio.com/skyeweb/projects/portland/
    http://skyedesignstudio.com/skyeweb/projects/carbon-neutral/

    kind regards,
    thelonious

    • Josh

      Hi thelonious, it looks like the carbon neutral house slideshow is set to the same dimensions as the default settings? The first slide in that slideshow is short and it is shrinking the slideshow to fit it, try making sure the first slide matches the dimensions of the slideshow and it should fit better, I’d recommend sizing all the slide images to the exact dimensions of the slideshow, you’ll get better results.

      • thelonious

        josh

        thanks…that did do the trick. however, does that imply that for all of my slideshows, my tallest image needs to go first in order to set the height precedent for that particular slide show?

        and as you said, that carbon house slideshow was set to the default settings- which is tall enough to show the entire tallest image of that slideshow. so I’m a but confused on how the settings, and metadata, actually changes things if things are in reality dictated by that first image height.

        thanks for your help,
        thelonious

        • Josh

          In Meteor Slides 1.5 I added support for fluid slideshows that scaled with responsive themes, so the slideshow sizing works a little differently now.

          The dimensions that you set in the slideshow settings or with metadata act as a maximum size rather than a fixed size and the slideshow can shrink if the theme or images are smaller than that maximum size. So if the first slide is smaller than the max size the slideshow scales to fit the slide.

          I’m still experimenting to get this to work well with both fixed and fluid themes, ideally I would like that scaling to only take place if the image is scaling, and at 100% size, the slideshow settings would take precedent. But for now the size of the first image overrides the settings.

          • thelonious

            josh

            thanks for the explanation. overall, i was able to modify the ordering of my project slides to make it all work without much of a problem. although, ideally, i would have liked it not to matter that the tallest slide had to be the first one.

            on a side note, after scouring a sh*t ton of slideshow plugins for our company, yours is way by far the best. i love that it is so subtle, and doesn’t impose ridiculous an overly designed theme…with silly buttons, shadowing, etc. in this way, it can be seamlessly dropped into a whole host of different website design styles and feel right at home. good f*cking job!

            ill buy you a cup of coffee…

            best,
            thelonious

          • Josh

            Thanks thelonious, a coffee is always appreciated! Yeah, those type of designs frustrate me too, I always try to keep the skin as minimalist as possible to that the design of the actual slide images is the focus.

            Since you don’t need the slideshows to scale, you could remove the height rule using a custom stylesheet so that you can start with any sized slide:

            
div.meteor-slides {
height: 100% !important;
line-height: 0;
margin: 0;
max-width: 100%;
overflow: visible !important;
padding: 0;
position: relative;
z-index: 1;
}
  42. Gidoliny

    Hi,
    Thank You for nice plugin;
    Plugin: Meteor Slides has Height Problem in Google Chrome (only)
    In other browsers works fine

    Help, Please

    http://gvc-video.co.cc/category/music

  43. soplica

    Very good plugin. even works in IE10, unbelievable Thanks for the plugin.

  44. Viktor

    Hi! First of all, thanks for a great plugin!

    Im trying to use multiple slideshow with different sizes. The problem is that the slides dont want to change its aspect ratio and ignores one of the meta size datas.

    This is the code im using:

    The width is set just fine, but the height is adjusted to keep the same aspect ratio as my standrad size. How can i solve this?

    Here is the slideshow: http://pontonhamnar.minex.se/

    Thanks!

    • Josh

      Hi Viktor, it looks like the slide images in that slideshow are 680×453, make sure the slide image size matches the dimensions you are setting in the metadata and it should work fine.

  45. Viktor

    Seems the code got messed up in my previous post, here it is again:

    if ( function_exists( 'meteor_slideshow' ) ) {meteor_slideshow ("startsida", "height: 150, width: 500"); }

  46. Emily

    Hi Josh,

    I want to show both portrait and landscape images in a single slide show.
    my the width is the same on both directions width: 560
    the height on the portrait is 900
    the height on the landscape is between 560 and 600

    can you tell me how to do this. I have tried every combination possible.
    i have spent way to much time and am now losing my mind. Please help.

    thanks in advance

    • Josh

      Hi Emily, the sizing has gotten a little more complicated with Meteor Slides 1.5. The dimensions set in the metadata act as a max size, but if smaller images are used it shrinks automatically so that it can scale with responsive themes.

      Right now it does this using the size of the first image in the slideshow, so if the first slide is landscape, it probably crops any portrait slides. I am planning to improve support for different sized image in a future release, but the best way to deal with this right now is to make sure the first slide is sized to 560×900 to size the slideshow to fit for all the different slides.

      • Jay Patel

        I am having a similar issue. My slides are 960×640, but I want the width of the slideshow to be 100% width of the container and any height I choose. The final result would be cropped. I have yet to figure out how to accomplish this.

        I can get around this by putting external div…but the slides disappear when I hoover using this workaround. So my only option at this point is to have my slides the correct size.

        • Josh

          The slide dimensions have to be specified in pixels, a percentage won’t work. But you can set a max, like 960px, and then it should scale below that max if your theme is fluid width.

  47. Varun Srinivas

    Hey Josh. Excellent work on the plugin. loved it.
    although, i have a problem. Is it possible to place two slide shows on the same page.

    I have two slide shows, namely event1 and event2
    When I place the following code on the same page, i don’t see the second slideshow at all.

    [meteor_slideshow slideshow="event1"]

    [meteor_slideshow slideshow="event2"]

    What could the problem be ?

    • Josh

      Hi Varun, multiple slideshows will work on the same page. First thing I would do is doublecheck the slideshow slugs and make sure you are loading the correct slideshows. Could you post a link to the page you have added the slideshows to?

  48. Waqas Ahmed

    Hi Josh!

    You are doing very good work. Great. Please make sure one thing. Can i show the featured articles in the slideshows? I mean, when i select the specific category then this article (Feature Image) shows in the slideshow. Thanks

  49. Lee Wayland

    Hi Josh
    Great plugin, really smart.
    Can I order the slides in a slideshow.

    Current snippet: [meteor_slideshow slideshow="services"]

    Attempted snippet using the image ID to order the slides

    [meteor_slideshow slideshow="services" orderby="33,40,41,42,43"]

    Makes no difference.

    Thanks in advance

    • Josh

      Hi Lee, the slideshow shortcode only has two arguments, “slideshow” and “metadata”, you can’t edit the query from there.

      The slides are sorted chronologically, just like blog posts, so you can change the publish date of the slides to sort them. Or you can use a plugin like Post Types Order to add drag and drop sorting.

  50. Anthony

    Hi Josh,
    Great work. I’m attempting to have a page with 3 sliders side by side. Each slider represents a category in my gallery. They would all be equal size, but aligned horizontally. Is this possible? So far I’ve added two sliders, but they line up vertically. I entered the shortcode horizontally if that matters at all. Sorry, I’m a nube. Thanks for your help

    • Josh

      Hi Anthony, you can have three slideshows side by side, you just need to style the slideshows to float so that they can be on the same line, something like this:

      
.meteor-slides {
float: left !important;
}

Comments are closed.