[Plugin: Meteor Slides] Centering the Slides in the slide show

  • Resolved Andrew

    (@acsearles)


    14 years, 7 months ago

    Hey,

    Thanks for creating such a great plug in. I’m having a few small problems and I’m sure it’s just causing I’m doing something wrong. First, I’m trying to center the actual slides in the slide show. I’m planning on having different sized images in the slide show. I’ve messed with the CSS and added margin: 0 auto; to all these selectors in the CSS file: #meteor-slideshow, .meteor-slides, .slides, #meteor-slideshow .slide, #meteor-slideshow, #slide-1, #meteor-slideshow .slide a img, and #meteor-slideshow .slide img . I’ve left the css filein the plugin folder. I don’t know if I need to move it to the themes folder or not. Edits that I make in this file do seem to have effect on the page though, so I don’t think that is where the problem is. I’d put up a link to the website but I’m working locally atm.

    Also, as a work around to the above problem, I tried to just crop all my images to the exact size of the slideshow 1000 wide and 618 high, but they don’t fit to the edges of my slideshow. I’ve checked it twice just to make sure. Am I missing something here? if we can center the images in the slide it won’t really be a problem but does the slideshow reduce the size of my images somewhere. Can I turn this off?

    Thanks a ton for your help.
    Andrew

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Josh Leuze

    (@jleuze)

    Hi, thanks for trying Meteor Slides.

    You don’t need to remove the stylesheet from the plugin, just copy it to your theme and make your changes there.

    How you center the slides depends on your theme, if you can get a demo online I could help you with that.

    Thread Starter Andrew

    (@acsearles)

    I’ve applied what I have of the theme right now. I’ve put a couple of FPO photos in there just to show you. I’m not to the point to add content yet. https://www.mayametzlogue.com/ but as you can see those images aren’t centered. And I cropped and imported them at 618 high and 1000 wide. I think the slideshow actually ended up being 980 wide or something like that. Either way those photos should be bigger then the box no?

    Thanks again for you help.
    Andrew

    Plugin Author Josh Leuze

    (@jleuze)

    I did some testing on centering the slides and got that working. I had to do some tweaking on my end with the jQuery to get them to centering properly. I’ll release an update this weekend that includes that fix.

    As for the size of your images, one thing to watch out for is to make sure that you set the dimensions of the slides before uploading the images. If you did not, you need to re-upload the images, just removing and adding the featured images doesn’t re-render them to the correct size.

    It looks like there are a few rules in your theme that are conflicting with the image size of your slides. Check out this bit from your stylesheet:

    #content img {
height:auto;
margin:0;
max-width:640px;
width:auto;
}

    That is shrinking the width of the slide images.

    Copy meteor-slides.css from /meteor-slides/css/ to your theme’s directory to replace the plugin’s default stylesheet. Then you can edit your theme’s copy of meteor-slides.css to override these changes.

    Now edit this bit in meteor-slides.css:

    #meteor-slideshow .slide img {
border:0 none;
margin:0;
padding:0;
}

    To look like this:

    #meteor-slideshow .slide img {
border:0 none;
margin:0;
padding:0;
max-width:none;
}

    That should solve the image size problems, be on the look out for version 1.2.3 which should get them centered nicely.

    Plugin Author Josh Leuze

    (@jleuze)

    Hi Andrew, just wanted to let you know that Meteor Slides 1.2.3 is out, which will center the slide images for you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Plugin: Meteor Slides] Centering the Slides in the slide show’ is closed to new replies.