Автоматическая настройка фиксированной ширины слайдера Coda на макете жидкости - PullRequest
Новая
       50

Автоматическая настройка фиксированной ширины слайдера Coda на макете жидкости

0 голосов
/ 31 мая 2011

Я изучал использование coda-слайдера на веб-странице с плавным макетом.Проблема в том, что coda-слайдер, кажется, хочет фиксированной ширины.Попытка использовать проценты приводит к тому, что копия исчезает за краем панели.

Я нашел образец javascript, который был написан для выбора jpg на основе фактической ширины контейнера, и попытался изменить его, чтобы изменить CSSзначения ширины для панели слайдера, но безуспешно..... хорошо, теперь он работает для ширины.

Часть css-слайдера css, которая контролирует ширину панели: 

.coda-slider, .coda-slider .panel { width: 650px; }

Сценарий, который я нашел и изменил: 

 $(document).ready(function() { 

 function imageresize() {  
   var availwidth = $("#leftside").width(); 
   var codawidth = availwidth - 50; 
      $(".coda-slider .panel").css({"width": codawidth + "px"});
      $(".coda-slider").css({"width":codawidth + "px"});
}    

imageresize(); //Triggers when document first loads      

$(window).bind("resize", function(){ //Adjusts image when browser resized
    imageresize();  
 });  
 });

Я исправил проблему с размером, используя размер контейнера, а не размер страницы ... НО ... coda-slider использует исходную фиксированную ширину для расстояния скольжения, так что как только выначинать скольжение, каждая панель заканчивается смещением, которое увеличивается с каждым слайдом.

Есть ли какие-либо предложения по изменению расстояния между слайдами в зависимости от ширины?

ОК, получая сортировку ....

Пришлось изменить js-файл coda-slider, заменив: 

var panelWidth = slider.find(".panel").width();

С такой же формулой для ширины панели css: 

var panelWidth = $("#leftside").width() - 50;

Это учитывало расстояние скольжения.

Теперь мне просто нужно выяснить, как заставить coda-слайдер сбрасываться при изменении размера окна браузера.Он изменяет размер окна CSS, но не сбрасывает значение слайда.В долгосрочной перспективе изменение размера окна браузера не является большим требованием, но оно может пригодиться людям, меняющим ориентацию планшета при просмотре веб-сайта.

Ответы [ 2 ]

2 голосов
/ 03 сентября 2012

Это старый, но у меня возникла та же проблема, и оказалось, что разработчик сделал новый слайдер coda, который может динамически настраиваться на ширину.

здесь: LiquidSlider

0 голосов
/ 14 июля 2011

Я столкнулся с подобной проблемой, пытаясь настроить слайд-шоу с кодой, используя Flowplayer Tools, «прокручиваемый» - основанный на пикселях слайдер - на моем жидком сайте макета.

Я справился с этой проблемой, изменив значения ползунка coda на%, а затем используя дополнительную строку jQuery, чтобы заставить панели элементов ползунка оставаться на той же ширине, что и контейнер ползунка.

Вот настройка, которую я использую -% вместо пикселей для ширины. Я не устанавливаю ширину на панелях слайдера; вместо этого им присваиваются значения через jQuery: 

<style type="text/css">

    .slider  { width:100%; height:200px; overflow:hidden; position:relative }
    .items   { width:2000em; position:absolute }
    .item    { /* do not set any width */ height:200px; overflow:hidden;
             float:left; display:inline-block }

</style>


<div class="slider equal">
    <div class="items">

        <div class="item equal"></div>
        <div class="item equal"></div>
        <div class="item equal"></div>

    </div>
</div>

Класс CSS «равно» предназначен для этого jQuery: 

// Set slider children to width of parent

if($("div.equal").length){
    $.fn.setAllToMaxWidth = function(){
        return this.width( Math.min.apply(this, $.map( this , function(e){ return $(e).width() }) ) );
    };

    $("div.equal").setAllToMaxWidth();
};

Этот обходной путь jQuery является адаптацией jQuery Equal Heights Column от Jaina Ewen.

Это означает, что макет слайдера отображается точно так, как я хочу, при загрузке страницы и соответствует моему сеточному макету, независимо от ширины браузера.

Однако есть небольшая хитрость - если вы измените размер окна браузера после его загрузки, ваш макет может быть растянут за пределы ширины элементов слайдера и выглядит немного странно.

...