Изменить Максимальное фоновое изображение jquery в зависимости от разрешения устройства

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-изображение имеет свой фон установлен в соответствии первый экземпляр .mc-изображения (property1.jpg). Хотя я уверен, что это связано с моим циклом (возможно, измените $ ("div.mc-image") на imgDivArray [i]), тем больше беспокоит факт, изменив путь к фоновому изображению, который, кажется, отключает максимальная функциональность. Изображения сразу же перестали масштабироваться, чтобы заполнить экран.

Любая помощь или указатели были бы очень благодарны, спасибо за чтение.

Answer 1

Хорошо еще один день и более четкая головка. Вместо доступа к свойству background-image, сгенерированному плагином maximage, я подумал, что было бы проще добавлять атрибуты 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); 

Это генерирует серию идентификаторов, как так - prop0, prop1, prop2 и т.д. После этого я просто добавил некоторые средства массовой информации запросов CSS, обратите внимание, если вы не добавить! важно, рядный 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 и pho nes, а также более старый компьютер, работающий с IE ... еще не тестировал его на ipad!