Цикл jquery при изменении размера браузера - PullRequest
Новая
       26

Цикл jquery при изменении размера браузера

0 голосов
/ 16 марта 2012

Я пытаюсь написать скрипт, который автоматически изменяет размер галереи jquery Cycle при изменении размера моего браузера.Я попробовал некоторые из решений, уже виденных как Window Resize или опции цикла: 

containerResize: false, 
slideResize: false, 
fit: 1

с помощью css: 

.slideshow li { width: 950px !important; }

Но это не работает вообще, поэтому я бы не сталНе забудьте немного помочь ...

Так вот мой код js галереи: 

$(document).ready(function() {

    $('.slideshow li:first').css('background', 'url(' + $(this).attr('data-cycle-image') + ') center center no-repeat').removeAttr('data-cycle-image'); 

    $('.slideshow').each(function() {
    //var $this = $(this);
    var $this = $(this), $ss = $this.closest('.content-slider');
    var prev = $ss.find('a.prev-slide'), next = $ss.find('a.next-slide, ul.slideshow li');

    $this.cycle({
        timeout:            0,                              
        fx:                 'fade',                         
        pause:              1,                              
        speedIn:            1000,
        speedOut:           1000,
        sync:               false,
        containerResize: false,
        slideResize: false,
        fit: 1,
        next:               next,
        prev:               prev,   

        // LazyLoad effect
        before: function(currSlideElement, nextSlideElement) { 
        var data_cycle_image = $(nextSlideElement).attr('data-cycle-image');  
        if (typeof data_cycle_image !== 'undefined' && data_cycle_image !== false) {  
            $this.cycle('pause');  
            var enlarge_preload = new Image();  
            enlarge_preload.src = data_cycle_image;  
            enlarge_preload.onload = function() {  
                $(nextSlideElement).css('background', 'url(' + enlarge_preload.src + ') center center no-repeat').removeAttr('data-cycle-image');  
                $this.cycle('resume');  
                }  
            }  
        },  

        after:    function(curr,next,opts) {
            var s = (opts.currSlide + 1) + '/' + opts.slideCount;
            $(opts.numberscaption).html(s);
        },

        numberscaption:  $this.closest('.content-slider').find('div.numberscaption')

        });
    });

    // Keyborad navigation
    $(document.documentElement).keyup(function(event) {
        var direction = null;
        if (event.keyCode == 37) {
            direction = 'prev';
        } else if (event.keyCode == 39) {
            direction = 'next';
        }
        if (direction != null) {
            $('.keyboardnav').each(function(index) {
                $('a.prev-slide, a.next-slide', this)[direction]().click();
            });
        }
    });

});

Код HTML: 

<div class="keyboardnav content-slider">
<ul class="slideshow">
    <li data-cycle-image="gallery/1.jpg" class="first"></li>
    <li data-cycle-image="gallery/2.jpg" ></li>
    <li data-cycle-image="gallery/3.jpg"></li>
            ...
</ul>
...
</div>

ИКод CSS: 

.content-slider { 
     position: absolute; 
     width: 950px; 
     height: 650px; 
     top: 50%; 
     left: 50%; 
     margin: -325px 0 0 -475px; 
     padding: 0; 
     background: red; 
}
ul.slideshow { 
     width: 950px; 
     height: 650px; 
     margin: 0; 
     padding: 0; 
     list-style: none; 
     display: block; 
     cursor: pointer; 
}
ul.slideshow li { 
    position: relative; 
    width: 950px !important; 
    height: 650px; 
    text-indent: -9999px; 
    background-color: #000; 
    background-repeat: no-repeat; 
    background-position: center center; 
}

Спасибо !!

1 Ответ

0 голосов
/ 30 апреля 2012

Я думаю, вам нужно смотреть на ширину в процентах, а не на фиксированную ширину в пикселях, которая у вас есть в настоящее время.В качестве быстрого теста попробуйте изменить ширину: от 950 пикселей до 100% на 3 элементах и ​​посмотрите, что получится.

...