Slideshow in jquery with images taking all wiidth of the page

Go To StackoverFlow.com

0

I would to know if it's possible to "make" a jquery slideshow with large images.

For example, if I have 1900x260 images, in a large screen, all the images were seen. But in a small resolution (1024), I would to see the images centered (not responsive !!, not resized).

Thank for help. Fabrice

2012-04-04 20:38
by fabrice
What jQuery slideshow plugin are you using? Can you post some relevant code - Selvakumar Arumugam 2012-04-04 20:44
Yes. (It is really difficult to help without seeing a piece of code. - Roko C. Buljan 2012-04-04 20:45


0

Without much to go on, I'm going to go out on a limb and suggest Supersized:

http://buildinternet.com/project/supersized/

2012-04-04 23:51
by Andrew Tibbetts
Thanx, but i don't want the slider take the hole page, just a part o it. And I wonder if I must use a plugin, or make it by myself - fabrice 2012-04-05 07:00
From http://buildinternet.com/project/supersized/faq.html

Does Supersized have to be fullscreen? Nope! You can define the dimensions by adjusting the #supersized styles in the CSS file. You will want to make all instances of position:fixed -> position:absolute - Andrew Tibbetts 2012-07-09 19:59



0

Thanks you guys. I have do this (it's seems works fine), with a help from this article : http://jonraasch.com/blog/a-simple-jquery-slideshow

My code :

<script type="text/javascript">

function slideSwitch() {

    var $active = $('#slideshow li.active');

    if ( $active.length == 0 ) $active = $('#slideshow li:last');
    var $next =  $active.next().length ? $active.next() : $('#slideshow li:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(document).ready(function() {
    setInterval( slideSwitch, 5000 );
});

</script>

The css :

<style type="text/css">


ul {
    position: relative;
}


#home {
    background: url("1.jpg") center center no-repeat;
    height:263px;
}
#web {
    background: url("2.jpg") center center no-repeat;
    height:263px;
}
#design {
    background: url("3.jpg") center center no-repeat;
    height:263px;
}
#event {
    background: url("4.jpg") center center no-repeat;
    height:263px;
}

#slideshow li {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 263px;
     width:100%;
}

#slideshow li.active {
    z-index:10;
    opacity:1.0;
}

#slideshow li.last-active {
    z-index:9;
}

</style>

And he HTML :

<div id="slideshow">
    <ul>
        <li id="home" class="active"></li>
        <li id="event"></li>
        <li id="web"></li>
        <li id="design"></li>
    </ul>    
</div>

It's work fine, but for now, I'm using 960gs (and a sticky footer), and i have a lot of problem : The #slideshow must be in absolute (i must push it in the middle of the page), and if do this, it's disappear :(.

Any help ? Thanx

Fab

2012-04-05 06:51
by fabrice
Ads