WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] Images not automatically resizing to fit width/height of slideshow (4 posts)

  1. zakiazakiazakia
    Member
    Posted 1 year ago #

    Hi

    I was wondering whether anyone could help me to make my slides images fit the width/height (940/200) of the Meteor slider? They remain the same size they were when I saved them rather than automatically resizing. I've done everything from the Slides panel so far.

    I'm building a child theme for Responsive and the slider is placed where the two featured boxes initially were. It's on a local server so I can only paste in code if needed.

    Thank you!
    Zakia

    http://wordpress.org/extend/plugins/meteor-slides/

  2. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Zakia, did you upload these slide images before setting the size in the slideshow settings, or before installing the plugin? Try re-uploading the slide images, that should re-size them. If they are too large they might not look quite right when they are cropped, I always recommend prepping the images in your favorite image editor to match the size of the slideshow before uploading the images.

  3. zakiazakiazakia
    Member
    Posted 1 year ago #

    THANK YOU! Sorry for the late response, I wasn't online. That worked, everything is cropped to fit the slider.

    My only other problem is getting the image to be visible now. When I change the html on firebug from 'visibility: hidden' to 'visibility: visible' the image appears:

    <img alt="" src="http://[image address]" class="meteor-shim" style="visibility: hidden;"> to same with 'visible'

    But it doesn't work when I put in my child theme's version of the meteor stylesheet...

    I've inserted a code: .meteor-shim {visibility:visible !important;} into my childtheme's stylesheet but it still doesn't work.

    Thanks in advance for any suggestions you might have! It's really stumping me! Z.

    Here is the version of meteor-slides.css i have in my theme:

    /* Stylesheet for the Meteor Slides 1.5 slideshow

    Copy "meteor-slides.css" from "/meteor-slides/css/" to your theme's directory to replace
    the plugin's default stylesheet.

    If you have navigation enabled, be sure to copy the "buttons.png", "next.png",
    and "prev.png" files to your theme's images folder and update the image paths below,
    or create new graphics to replace them.

    Learn more about customizing the stylesheet for Meteor Slides:
    http://www.jleuze.com/plugins/meteor-slides/customizing-the-stylesheet/
    */

    /* =Slideshow
    -------------------------------------------------------------- */

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

    div.navpaged,
    div.navboth {
    margin: 0 0 20px 0;
    }

    .meteor-slides .meteor-clip {
    line-height: 0;
    margin: 0;
    overflow: visible;
    padding: 0;
    position: relative;
    }

    .meteor-slides .meteor-shim {
    border: 0;
    height: auto !important;
    margin: 0;
    max-width: 100%;
    padding: 0;
    width: auto\9; /* IE8 */
    }

    /* =Slide
    -------------------------------------------------------------- */

    .meteor-slides .mslide {
    display: none;
    height: 100% !important;
    margin: 0;
    max-width: 100%;
    padding: 0;
    }

    .meteor-slides .mslide a {
    border: 0;
    margin: 0;
    padding: 0;
    }

    .meteor-slides .mslide img {
    border: 0;
    display: block;
    height: auto !important;
    margin: auto !important;
    max-width: 100%;
    padding: 0;
    width: auto\9; /* IE8 */
    }

    .meteor-slides .mslide img[src$='.png'] {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE7 */
    zoom: 1;
    }

    /* =Previous/Next Navigation
    -------------------------------------------------------------- */

    .meteor-slides ul.meteor-nav {
    display: none;
    list-style: none;
    height: 100%;
    margin: 0 !important;
    padding: 0;
    }

    .meteor-slides.navhover ul.meteor-nav {
    display: block;
    }

    ul.meteor-nav li {
    display: inline;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    }

    .meteor-nav .prev a {
    left: 0px;
    }

    .meteor-nav .next a {
    right: 0px;
    }

    .meteor-nav a {
    display: block;
    outline: none;
    position: absolute;
    text-indent: -9999px;
    width: 27px;
    height: 100%;
    z-index: 998;
    }

    .meteor-nav .prev a {
    background: url('../images/prev.png') no-repeat center right;
    }

    .meteor-nav .prev a:hover {
    background: url('../images/prev.png') no-repeat center left;
    }

    .meteor-nav .next a {
    background: url('../images/next.png') no-repeat center left;
    }

    .meteor-nav .next a:hover {
    background: url('../images/next.png') no-repeat center right;
    }

    * html .meteor-nav .prev a {
    background: url('../images/prev.gif') no-repeat center right; /* IE6 */
    }

    * html .meteor-nav .prev a:hover {
    background: url('../images/prev.gif') no-repeat center left; /* IE6 */
    }

    * html .meteor-nav .next a {
    background: url('../images/next.gif') no-repeat center left; /* IE6 */
    }

    * html .meteor-nav .next a:hover {
    background: url('../images/next.gif') no-repeat center right; /* IE6 */
    }

    /* =Paged Navigation
    -------------------------------------------------------------- */

    .meteor-slides .meteor-buttons {
    bottom: -15px;
    height: 9px;
    left: 0;
    margin: 0;
    padding: 6px 0 0;
    position: absolute;
    width: 100%;
    z-index: 999;
    }

    header#branding .meteor-buttons {
    left: 5px; /* A little nudge for Twenty Eleven */
    }

    .meteor-buttons a {
    background: url('../images/buttons.png') no-repeat bottom left;
    display: block;
    float: left;
    width: 9px;
    height: 9px;
    margin: 0 3px 0 0;
    outline: none;
    text-indent: -9999px;
    }

    .meteor-buttons a:hover {
    background: url('../images/buttons.png') no-repeat bottom right;
    }

    .meteor-buttons a.activeSlide {
    background: url('../images/buttons.png') no-repeat bottom right;
    }

    * html .meteor-buttons a {
    background: url('../images/buttons.gif') no-repeat bottom left; /* IE6 */
    }

    * html .meteor-buttons a:hover {
    background: url('../images/buttons.gif') no-repeat bottom right; /* IE6 */
    }

    * html .meteor-buttons a.activeSlide {
    background: url('../images/buttons.gif') no-repeat bottom right; /* IE6 */
    }

  4. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    You don't want to do that, that particular image is meant to be non-visible and doesn't have anything to do with the visibility of the actual slides. You probably have a jQuery conflict, I can take a look if you want to post a link.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic