Jquery Cycle Resize

Question

Jquery Cycle Resize

3

我正在尝试使Jquery Cycle自适应大小。到目前为止，我已经部分成功了，它可以调整大小，但幻灯片转换存在问题...我不知道为什么？这是整个页面http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/index.html 我已经成功地通过Sitepoint上的文章来调整幻灯片大小。通过在javascript中使用slideResize:false并将CSS中%宽度和%高度赋予!important标签，幻灯片根据样式表中的百分比值进行调整大小。

幻灯片不能正确过渡，但它可以缩放！有人能提供任何建议吗？我认为这可能与在CSS中向幻灯片编写overflow:hidden有关。 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;
}

- Jai Singh

2个回答

0

var opts = {
fx:     "fade",
speed:   400,
timeout: 3000,
next:   "#next",
prev:   "#prev",
}
$("#gallery,#gallery .slide").attr("style","")
$("#gallery").cycle("destroy");
$("#gallery").cycle(opts);

- Craig

2

虽然仅仅给出代码回答也是可以的，但如果你的回答还包括了解释你的代码做了什么那就更好了！ - secretformula

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tom Pietrosanti · Accepted Answer

我能通过破坏和重建循环来实现这一点，根据容器和其中的图像更新宽度和高度字段（图像被动态调整为容器宽度）。

以下是我的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);
    });

});