Question

Recently, I have been trying to accomplish creating a full-width jQuery slider that would basically display a very large image (2000×350) which would allow the image to span across even quite large monitor resolutions.

However, unlike some similar sliders such as Parallax and this jQuery Cycle example, I would like to use the entire image instead of a smaller image with a background color. The issue that I am encountering is how the slider is being shown on smaller resolutions (1024×768), as it display the entire image with scrollbars, when what I am trying to accomplish it to simply show the “center” of the image while ignoring the areas that do not appear on the page.

I am attaching a jsfiddle with a sample image (2000×350), and am wondering how I might be able to display just the area within the “960” if the page was viewed on 1024×768, and display larger portions of the image (centered) if the resolution was larger.

Any suggestions – either pure CSS or using Javascript/JQuery would be greatly appreciated.

Summary: I am trying to create a full-width jQuery image-slider that will display only the “center” of the image and ignore any of the overflow based on the user’s window size.

EDIT : This example – is what I am searching for.

Answer 1

If your HTML is as follows:

<div id='wrapper'>
    <img src="http://i.imgur.com/s0Gvf.png" />
</div>

Then you can center the image vertically and horizontally within the #wrapper element using the following CSS:

html, body { 
    height:100%; 
}
#wrapper {
    position:relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#wrapper img {   
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-1000px;
    margin-top:-175px;
}

This will set #wrapper to the width and height of the browser window. overflow:hidden; will make anything too big that is inside it hidden. #wrapper img sets the image to vertically and horizontally align to the parent container.

This is done by setting its top and left positions to 50% and then offsetting these positions with half the images width and height. So margin-left is - (image_width/2) px, etc.

---

Edit:

Regarding the gallery/slider, please check an updated version of your jsFiddle: http://jsfiddle.net/vMqxa/2/

To see the end result, visit this page: http://jsfiddle.net/vMqxa/2/show/light/

What is going on here exactly…

To start there is #wrapper_wrapper (bad name, I know..) which is an 100% width and height div so it will fill up all of the screen.

Within this is #wrapper which will contain all the images. This is what will be scrolled left and right to display the correct image so it needs to be as wide as all the images inside it. This means that if we have 4 images, then the width of #wrapper will be 4 * the width of the screen. This is calculated in javascript using:

$("#wrapper").width(window.innerWidth * $(".image_wrapper").length);

Next there is .image_wrapper which is a div used to hold each image. The width of this is set to window.innerWidth using javascript. It also has overflow:hidden so that anything inside it that is too big, wont be displayed.

Finally, we have the images .image_wrapper img which are positioned using absolute positioning. They are set to left:50%; top:50%; and then using javascript we calculate the offset needed to perfectly center them. This is done with:

$(".image_wrapper img").each(function(){

    $(this).css({
        marginLeft: "-" + $(this).width()/2 + "px",
        marginTop: "-" + $(this).height()/2 + "px" 
    });

});

This is all put together into a function that is called on page load and also when the window is resized.

To scroll left and right, we use:

$("#next").click(function(){
    var currentMargin = parseInt($(".image_wrapper").eq(0).css("marginLeft").replace("px","")),
        newMargin = currentMargin - window.innerWidth;

    $(".image_wrapper").eq(0).animate({
        marginLeft: newMargin + "px"
    });

});

$("#prev").click(function(){
    var currentMargin = parseInt($(".image_wrapper").eq(0).css("marginLeft").replace("px","")),
        newMargin = currentMargin + window.innerWidth;

    $(".image_wrapper").eq(0).animate({
        marginLeft: newMargin + "px"
    });

});

Note: this won’t stop scrolling if there is nothing to the left or right.

Again, please have a look at the complete code on jsFiddle: http://jsfiddle.net/vMqxa/2/