CODEWITHSUNDEEP
jqueryjquery-pluginsslideshowjquery-cycleaspect-ratio
MyotisSI
MyotisSI

Reputation: 13

Slideshow fixed to browser window width and fixed aspect ratio hide content beneath

I have prepared a slideshow with really large images and with prev/next commands. The slideshow always fit to browser window (is resizable) and when the images resize, they keep the aspect ratio.

For the slideshow I used the jQuery Cycle Plugin. The slideshow is working well but i have an issue with the content which has to be always under the slideshow but instead is hidden beneath the slideshow container (I had a working slideshov before I used the cycle plug-in, I just used simple JS to load the next image in the scontainer. But there was no fade effect and the swap was really ugly).

I think the problem is that there is no height declared for the slideshow. But I can't declare a height if I want the slideshow to resize.

A live example with the working slideshow but wrong content container position: HERE.

A live example with right containers position and no slideshow: HERE

I'm pretty lost, and any help would be great.

THE CODE I USED:

$(function() {
// retrieve list of slides from server
$.getJSON('slidelist.php', startSlideshow);

function startSlideshow(slides) {
    /* server returns an array of slides which looks like this:
    [
        'foto/02.jpg',
        'foto/03.jpg',
        'foto/04.jpg',
        'foto/05.jpg',
        'foto/06.jpg',
        'foto/07.jpg',
    ]
    */

    var totalSlideCount = 1 + slides.length;

    var $slideshow = $('#slideshow');

    // markup contains only a single slide; before starting the slideshow we 
    // append one slide and prepend one slide (to account for prev/next behavior)
    $slideshow.prepend('<img class="imgFotoPasica" src="'+slides.pop()+'" />');
    $slideshow.append('<img class="imgFotoPasica" src="'+slides.shift()+'" />');

    // start slideshow
    $('#slideshow').cycle({
        fx: 'fade',
        startingSlide: 1,  // start on the slide that was in the markup
        timeout:  0,
        speed:    800,
        prev:    '#prev',
        next:    '#next',
        before:   onBefore,
        containerResize: 0,  // resize container to fit largest slide - dodal zato, da se slika veča/manjša proporcionalno
        slideResize: 0,  // force slide width/height to fixed size before every transition - dodal zato, da se slika veča/manjša proporcionalno
        fit: 0,  // force slides to fit container - 0 izklopljeno 1 vklopljeno
    });

    function onBefore(curr, next, opts, fwd) {
        // on Before arguments:
        //  curr == DOM element for the slide that is currently being displayed
        //  next == DOM element for the slide that is about to be displayed
        //  opts == slideshow options
        //  fwd  == true if cycling forward, false if cycling backward

        // on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet)
        if (!opts.addSlide)
            return;

        // have we added all our slides?
        if (opts.slideCount == totalSlideCount)
            return;

        // shift or pop from our slide array 
        var nextSlideSrc = fwd ? slides.shift() : slides.pop();

        // add our next slide
        opts.addSlide('<img class="imgFotoPasica" src="'+nextSlideSrc+'" />', fwd == false);
    };
}; 
});

<!doctype html>
<html lang="hr">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/css.css"/>
</head>

<body>
    <div id="ovoj">
        <div id="glava"><h1>HEAD</h1></div>
        <div id="ovojSlideshow">
            <div>
                <a href="#"><span id="prev">Prev</span></a>
                <a href="#"><span id="next">Next</span></a>
            </div>
            <div id="slideshow">
                <img class="imgFotoPasica" src="foto/01.jpg" />
            </div>
        </div>
        <div id="vsebina"><h1>ALL CONTENT, HAVE TO BE ALWAYS UNDER THE SLIDESHOW</h1></div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="js/SlideShow_01.js"></script>
</body>
</html>

Upvotes: 1

Views: 1351

Answers (1)

lucuma
lucuma

Reputation: 18339

After the ops.addslide try this:
$('#ovojSlideshow').height($(curr).height());

To capture the resize on window event:

$(window).resize(function() {
 $('#ovojSlideshow').height($(curr).height());
 // or you can change the width/etc
});

JS Fiddle Example: http://jsfiddle.net/lucuma/CqJDy/

You will notice I'm using the window resize event to set the height on the slideshow.. I used your project as an example and removed the unnecessary components to demonstrate it.

Upvotes: 1

Related Questions