最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Setting height in a responsive slider (jQuery Cycle) - Stack Overflow

programmeradmin1浏览0评论

I'm using jQuery Cycle for a few slides, with content below it. jQuery Cycle sets the parent to relative and the child slides to absolute, so the content that should be below it is covered. Typically, I would give the parent container a height to solve my problem.

Since the layout is responsive, the height can change. Is there a simple solution out there for this?

EDIT:

Here's what wound up doing it for me:

$(window).load(function(){

    var rotate_height = $('#rotate div img').height();
    $('#rotate').css('height', rotate_height);

    $(window).resize(function() {
        if($(window).width() >= 960){
            rotate_height = 290;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() >= 768 && $(window).width() <= 959) {
            rotate_height = 230;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() >= 480 && $(window).width() <= 767) {
            rotate_height = 210;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() <= 479) {
            rotate_height = 150;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        }
    });

    $('#rotate').cycle({
        fx: 'fade',
        fit: 1,
        containerResize: 0,
        slideResize: 0,
        height: rotate_height       
    });
});

cycle('next') forces the slide to the next after a visitor resizes their monitor. Not ideal, but the images wouldn't scale back up, only after a slide change.

I'm using jQuery Cycle for a few slides, with content below it. jQuery Cycle sets the parent to relative and the child slides to absolute, so the content that should be below it is covered. Typically, I would give the parent container a height to solve my problem.

Since the layout is responsive, the height can change. Is there a simple solution out there for this?

EDIT:

Here's what wound up doing it for me:

$(window).load(function(){

    var rotate_height = $('#rotate div img').height();
    $('#rotate').css('height', rotate_height);

    $(window).resize(function() {
        if($(window).width() >= 960){
            rotate_height = 290;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() >= 768 && $(window).width() <= 959) {
            rotate_height = 230;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() >= 480 && $(window).width() <= 767) {
            rotate_height = 210;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() <= 479) {
            rotate_height = 150;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        }
    });

    $('#rotate').cycle({
        fx: 'fade',
        fit: 1,
        containerResize: 0,
        slideResize: 0,
        height: rotate_height       
    });
});

cycle('next') forces the slide to the next after a visitor resizes their monitor. Not ideal, but the images wouldn't scale back up, only after a slide change.

Share Improve this question edited Feb 27, 2012 at 6:33 Chords asked Feb 27, 2012 at 4:21 ChordsChords 6,8502 gold badges40 silver badges61 bronze badges 2
  • Some sample codes would be helpful. – Starx Commented Feb 27, 2012 at 4:37
  • Glad the conceptual 'nudge' was enough to steer you to a solution! – deefour Commented Feb 27, 2012 at 16:03
Add a ment  | 

4 Answers 4

Reset to default 4

This is my solution:

$(window).resize(function(){
    $('.cycle-container').each(function(){      
        $(this).height($(this).find('> *:first').outerHeight());
    })
});

You can use ready and resize events to trigger a function which will set the height appropriately based on the width of the window. As the page 'responds' to the current window width, your jQuery method will appropriately size the height of the slideshow's parent.

I had the same problem, solved it like this:

HTML:

<div class="hp_slider">
<a href="#"><img class="slide" alt="" width="940" height="420" src="/assets/images/cache/17dd0cc96316523cbba09777c8e512769078b0bc.png" /></a>
<a href="#"><img class="slide" alt="" width="940" height="420" src="/assets/images/cache/39fbcef502bd01b7f13980a81b73f6e6cb5491b6.jpg" /></a>
</div>

CSS:

.hp_slider {margin-bottom:49%; width:100%; height:auto;}
.hp_slider img {width:100%; height:auto;}

jQuery:

$(document).ready(function() {
$('.hp_slider').cycle({
fx: 'fade',
containerResize: false,
slideResize: false,
fit: 1
});
});

It's a little dirty, but the margin-bottom as a percentage pushes the text down from behind the slider and keeps it in place at different sizes so it's still responsive.

i think you can do this:

$slideshow.cycle({ 
  containerResize: false,
  slideResize: false,
  fit: 1
});

basically, when window resizes, the slide container is forced to resized. (not sure if you should set all to true or false, please give it a try.)

发布评论

评论列表(0)

  1. 暂无评论