JQuery Cycle Resize - PullRequest
Новая
       3

JQuery Cycle Resize

3 голосов
/ 10 ноября 2011

Я пытаюсь изменить размер цикла Jquery.До сих пор я был частично успешным, он изменяет размеры, но слайд-переход глючит ... Я не могу понять почему?Вот вся страница http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/index.html

Мне удалось изменить размер слайд-шоу после этой статьи в Sitepoint.Используя slideResize: false в javascript и назначая теги! Important для ширины и ширины%% CSS, слайд-шоу изменяется в соответствии с процентными значениями в моей таблице стилей.

Слайд-шоу не переходит должным образом, ноэто масштабируется!Кто-нибудь может предложить какие-либо предложения?Я подумал, что это может быть связано с переполнением записи: скрыто в слайд-шоу в CSS.

HTML 

<div id="leftnav">
    <div class="slideshow">
        <img src="work/japan_11.03/hope_for_japan_1.jpg" class="a" alt="Japan 11/03: Title page" />
        <img src="work/japan_11.03/hope_for_japan_2.jpg" class="a" alt="Japan 11/03: Land of the rising sun" />
        <img src="work/japan_11.03/hope_for_japan_3.jpg" class="a" alt="Japan 11/03: Fishing for inspiration" />
        <img src="work/japan_11.03/hope_for_japan_4.jpg" class="a" alt="Japan 11/03: A little place called home" />
        <img src="work/japan_11.03/hope_for_japan_5.jpg" class="a" alt="Japan 11/03: Shinkasen" />
        <img src="work/japan_11.03/hope_for_japan_6.jpg" class="a" alt="Japan 11/03: Getting back into the swing of things" />
        <img src="work/japan_11.03/hope_for_japan_7.jpg" class="a" alt="Japan 11/03: Remembered and not forgotten" />
</div>

Javascript 

$(document).ready(function() {
$('.slideshow')
.after('<div id="nav">')
.cycle({
fx: 'fade',
sync: true,     
    speedIn:  500,  
speedOut:  500,  
timeout: 10000,
pager:  '#nav',
next:   '.slideshow',
slideResize: false,
});
});

CSS 

//image class properties
img.a { 
    min-width: 475.2px;
    max-width: 1342px;
    height: 92.58%;
}

//slideshow properties
.slideshow { 
    width: 92.58% !important ; 
    margin-left:7%; 
    overflow: hidden;  
}

.slideshow img { 
    height: auto !important ; 
    width: 92.58% !important; 
    position: relative !important; 
    padding: 0px; 
    background-color: #fcfcfc; 
}


.pics {  
    padding: 0;  
    margin:  0;
} 

.pics img {  
    padding: 0px;   
    background-color: #fcfcfc;  
    top:  0; 
    left: 0;
}

Ответы [ 2 ]

2 голосов
/ 17 мая 2012

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

Вот мой JS. Вероятно, не самый лучший, и я думаю, что могу взять поля slideResize и fit из опций, но это сработало. 

$(function(){

    var opts = {
        fx: 'scrollHorz',
        pause: 1,
        timeout: 5000,
        slideResize: 0,
        fit:1
    }

    $("#slideshow").cycle(opts);

    $(window).resize(function(){
        opts.width = $("#slideshow").width();
        opts.height = $("#slideshow img:first-child").height();
        $("#slideshow").cycle('destroy');
        $("#slideshow").cycle(opts);
    });

});
0 голосов
/ 29 мая 2014 
var opts = {
fx:     "fade",
speed:   400,
timeout: 3000,
next:   "#next",
prev:   "#prev",
}
$("#gallery,#gallery .slide").attr("style","")
$("#gallery").cycle("destroy");
$("#gallery").cycle(opts);
...