Слайдерописателям. Изменение размера слайдера и картинки в нем при изменении размера окна.

Господа! Неужели я один до этого додумался? )) Сколько ни смотрел слайдеров — ни один не умеет динамически менять свои размеры при ресайзе окна (даже платные).

Например, это можно сделать так (на примере Revolution Slider для WordPress):

// Ресайзим слайдер при изменении размера окна под размер обертки
jQuery(window).resize(function(){
  if ( jQuery(".container .eleven.columns").css("width") != "undefined" ) {
    jQuery(".revSliderWrap").css("width", jQuery(".container .eleven.columns").css("width")); // это моя обертка для него, чтобы красоту навести
    jQuery(".revSliderWrap").css("height", jQuery(".revSliderWrap * img").css("height")); // меняем высоту обертки

    jQuery("#rev_slider_2_1_wrapper").css("width", jQuery(".container .eleven.columns").css("width")); //меняем ширину обертки самого слайдера
    jQuery("#rev_slider_2_1_wrapper").css("height", jQuery(".revSliderWrap * img").css("height")); //и высоту
    jQuery("#rev_slider_2_1").css("width", jQuery(".container .eleven.columns").css("width"));
    jQuery("#rev_slider_2_1").css("height", jQuery(".revSliderWrap * img").css("height"));

    jQuery(".revSliderWrap * img").css("width", jQuery(".container .eleven.columns").css("width")); // меняем ширину изображения, высота меняется сама

    return false;
   }
});

// Ресайзим слайдер при загрузке под размер обертки
jQuery(document).ready(function(){
  if ( jQuery(".container .eleven.columns").css("width") != "undefined" ) {
    jQuery(".revSliderWrap").css("width", jQuery(".container .eleven.columns").css("width"));
    jQuery(".revSliderWrap").css("height", "100%");

    jQuery("#rev_slider_2_1_wrapper").css("width", jQuery(".container .eleven.columns").css("width"));
    jQuery("#rev_slider_2_1_wrapper").css("height", "100%");

    jQuery("#rev_slider_2_1").css("width", jQuery(".container .eleven.columns").css("width"));
    jQuery("#rev_slider_2_1").css("height", "100%");

    jQuery(".revSliderWrap * img").css("height", "100%");

    return false;
  }
});

На крутизну решения, конечно, не претендую, но что-то похожее ведь можно сделать? Все как один: или жестко забиты по размерам, или меняют их в админке один раз.

0

Добавить комментарий