Jquery循环调整大小 [英] Jquery Cycle Resize

问题描述

我正在尝试让Jquery Cycle调整大小。到目前为止，我已经取得了部分成功，它调整了大小但滑动过渡是错误的...我不明白为什么？这是整页 http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio /index.html

I am trying to get Jquery Cycle to resize. So far I have been partly successful, it resizes but the slide transition is buggy... I can't understand why? Here's the whole page http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/index.html

我已设法在此文章。通过在javascript中使用slideResize：false并将！important标记分配给CSS的％width和％height，幻灯片显示会根据样式表中的百分比值进行调整。

I've managed to get the slideshow to resize following this article over at Sitepoint. By using slideResize: false in the javascript and assigning !important tags to the % width and % height of the CSS, the slideshow resizes according to the percentage values in my stylesheet.

幻灯片放映不会正常转换，但它会缩放！有人可以提供任何建议吗？我认为这可能与编写溢出有关：隐藏在CSS中的幻灯片中。

The slideshow doesn't transition properly but it scales! Can anyone offer any suggestions? I thought it might have something to do with writing overflow: hidden to the slideshow in the 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;
}

推荐答案

我能做到这一点通过销毁和重新创建循环，根据容器和图像更新宽度和高度字段（图像的动态大小为容器宽度）。

I was able to do this by destroying and recreating the cycle, updating the width and height field based on the container and images within there (images were dynamically sized to the container width).

这是我的JS 。可能不是最好的，我想我可以从选项中取出 slideResize 和 fit 字段，但它确实工作。

Here's my JS. Probably not the best, and I think I can take the slideResize and fit fields out of the options, but it did work.

$(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);
    });

});

这篇关于Jquery循环调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！