Question

jquery的新手，如果我的尝试看起来有些蹩脚，请耐心等待。

使用Maximage jquery插件（http://www.aaronvanderzwan.com/maximage/）我在我的主页上添加了全屏背景，一切都很好。但理想情况下，我需要根据设备分辨率以符合旧版浏览器的方式更改所选图像的分辨率。有没有办法做到这一点，还是我坚持首先设置图像的分辨率？我尝试了以下方法：

<div id="maximage" class="mc-cycle">

    <div class="mc-image">
          <img src="images/small/property1.jpg" />
    </div>

    <div class="mc-image">
          <img src="images/small/property2.jpg" />
    </div>

    <div class="mc-image">
          <img src="images/small/property3.jpg" />
    </div>

</div>

当maximage运行时，它会去除图像标记并将原始图像路径应用为背景图像。我试着像这样改变......

<script type="text/javascript">

    var winheight = $(window).height();
    var winwidth = $(window).width();
    var previousWinSetting = 700; //low res image starter

    function changeImgPath(pathTweak){
        var imgDivArray = $('div.mc-image');
        for(var i=0; i<imgDivArray.length; i++){
            var selectedSrc = $("div.mc-image").css('background-image');     
            var splitSrc = selectedSrc.split('/');
            splitSrc[splitSrc.length-1] = splitSrc[splitSrc.length-1].slice(0,-1); //Trim last character ")"
            var newSrc = "properties/"+pathTweak+"/"+splitSrc[splitSrc.length-1];
            alert(newSrc);
            $("div.mc-image").css("background-image", "url("+newSrc+")");
        }
    }

//refresh on resize
    $(window).resize(function() {
        if ($(window).width() > previousWinSetting && $(window).width() >= 640  && $(window).width() < 1010) {
            changeImgPath("medium");
            previousWinSetting = 1000;   
        }

        if ($(window).width() > previousWinSetting && $(window).width() >= 1010) {
            changeImgPath("full");
            previousWinSetting = 5000;
        }
    });

    $(function() { //Change path when document ready
        if ((window).width() < 1010 && (window).width() >750){
            changeImgPath("medium"); previousWinSetting = 1000;
        } else if ((window).width() >= 1010) {
        changeImgPath("full"); previousWinSetting = 5000;
        }
    });

</script>

目前，每个div.mc-image的背景设置都与第一个.mc-image实例（property1.jpg）相匹配。虽然我确定这与我的循环有关（也许将$（“div.mc-image”）更改为imgDivArray [i]），但更大的问题是通过改变背景图像路径，它似乎关闭了maximage功能。图像立即停止缩放以填满屏幕。

非常感谢任何帮助或指示，感谢您的阅读。

Answer 1

好的另一天，一个更清晰的头脑。而不是访问maximage插件生成的background-image属性，我认为将id属性添加到插件生成的div标签会更容易。像这样：

// Create a div with a background image so we can use CSS3's position cover (for modern browsers)
$self.append('<div class="mc-image ' + $img.theclass + '" title="' + $img.alt + '" style="background-image:url(\'' + $img.url + '\');' + $img.style + '" data-href="'+ $img.datahref +'" id="prop'+i+'">'+ $img.content +'</div>');

...以及稍后的浏览器支持...

// Create Div
$div = $("<div id='prop"+j+"'>" + c + "</div>").attr("class", "mc-image mc-image-n" + j + " " + $.Slides[j].theclass);

然后生成一系列像这样的id - prop0，prop1，prop2等。之后我简单地添加了一些媒体查询css，注意如果你不添加！important，内联CSS样式会过度统治媒体查询CSS规则......

<style>
    @media only screen and (min-width: 710px) and (max-width : 1010px) {
        #prop0 {background-image:url(properties/medium/image0.jpg) !important;}
        #prop1 {background-image:url(properties/medium/image1.jpg) !important;}
        #prop2 {background-image:url(properties/medium/image2.jpg) !important;}
        #prop3 {background-image:url(properties/medium/image3.jpg) !important;}
        #prop4 {background-image:url(properties/medium/image4.jpg) !important;}
    }

    @media only screen and (min-width: 1011px) {
        #prop0 {background-image:url(properties/full/image0.jpg) !important;}
        #prop1 {background-image:url(properties/full/image1.jpg) !important;}
        #prop2 {background-image:url(properties/full/image2.jpg) !important;}
        #prop3 {background-image:url(properties/full/image3.jpg) !important;}
        #prop4 {background-image:url(properties/full/image4.jpg) !important;}
    }
</style>

此刻测试，但到目前为止在Android平板电脑和手机以及运行IE的旧PC上看起来都很好......但是还没有在ipad上测试过它！

根据设备分辨率更改Maximage jquery背景图像

1 个答案: