CODEWITHSUNDEEP
jquerycss
Chris
Chris

Reputation: 949

Absolute positioning changing

I am working on a carousel of images that rotates, when you click one, it "pops up" using jQuery, heres how:

var $img = $(event.target);
        $('#popUp').html($img.clone().height(200).width(300)).add($('#overLay')).fadeIn();
        $('#popUp').add($('#overLay')).click(function () {
        $('#popUp').add($('#overLay')).fadeOut(function () {
        $('#popUp').empty();

This works great, except the popUp div changes locations depending on which image is clicked (all images the same size) and only centers correctly one one of the clicked images.

The CSS used to accomplish the positioning is:

#popUp
 {
    display: none;
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px; 
    margin-top: -100px;
    z-index: 9999;
}

Parent element style:

#carousel1
{
width:1000px;
height:200px;
overflow:scroll;
}

Is it possible to set this up so that no matter which image is clicked, they all appear centered in the screen?

Upvotes: 0

Views: 253

Answers (2)

Marc Audet
Marc Audet

Reputation: 46825

Demonstration of Concept

Here is one way you might approach this problem using jQuery.

I am going to demonstrate how to create a popup window (centered horizontally and vertically with respect to the view port) to view an enlarged image. I also create an overlay that partially obscures the remainder of the screen.

For example, your HTML could be as follows:

<div class="carousel">
    <img src="http://placekitten.com/200/200">
    <img src="http://placekitten.com/220/220">
    <img src="http://placekitten.com/230/230">
    <img src="http://placekitten.com/240/240">
</div>
<div class="popup"></div>

I will explicitly define an element (initially hidden) that will sever as the popup/overlay.

The CSS would resemble the following:

For the .carousel, I have a set of inline-block images text-aligned in the center of the parent container:

.carousel {
    border: 2px solid gray;
    padding: 10px;
    text-align: center;
    height: auto; /* set this to 1000px and see how it behaves with scrolling */
}
.carousel img {
    display: inline-block;
    width: 100px;
    vertical-align: middle;
}

For the popup/overlay:

.popup {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(125,125,125,0.5);
}
.popup .wrap {
    width: 300px;
    height: 200px;
    background-color: white;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -100px;
}
.popup .wrap img {
    height: 100%;
    vertical-align: top;
}

The .popup element is positioned fixed and sized to fill the viewport (window). I have an inner wrapper container (.wrap) of fixed width and height, which is positioned absolutely with respect to the fixed positioned parent. I adjusted the left/top margins to center it.

The image is scaled so that the height fills the .wrap element, and because of text-align: center on the .wrap, the image is centered horizontally.

Finally, the jQuery:

function showPopup(imgSrc) {
    var theImg = '<div class="wrap"><img src="'+imgSrc+'"></div>';
    $(".popup").empty().append(theImg).fadeIn();
}

$(".carousel img").on('click',function (){
    var theSrc = $(this).attr('src');
    showPopup(theSrc);
});
$(".popup").on('click', ".wrap", function(){
    $(".popup").fadeOut();
})

When you click on a thumbnail, the popup/overlay fades in, and fades out when you click on the image or the left/right white space around it.

You can see a working demo at: http://jsfiddle.net/audetwebdesign/rQdZR/

Other Comments

You can develop several variations around this demo, for example, you can leave out the overlay so that you can click on the thumbnails directly. You can also fix the position where the popup will appear other than the center of the view port.

Upvotes: 1

jonosma
jonosma

Reputation: 339

vertical align?

http://jsfiddle.net/UTXL4/

#popUp{
    position: absolute;
    width:300px;
    height:200px;
    top:50%;
    left: 50%;
    margin-left:-150px;
    margin-right:-200px;
    z-index: 9999;
    background-color:red;
    vertical-align: middle;
}

Upvotes: 0

Related Questions