CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1998735
user1998735

Reputation: 253

jQuery how to center image vertically and horizontally a.k.a. image lightbox?

jsFiddle

  $(document).ready (function(){
    $("a").click(function(){
            $(".myCanvas").fadeIn();
            $(".myCanvas").html ($(this).html());               
    }); 
});

a is an image link. Is it possible eto put a $(this).css({}); inside the $(this.html)? What I am trying to do is when i click the image i want the image to appear in the middle of the webpage with a transparent black background behind it to cover the other images without using Fancybox and lightbox.

Upvotes: 0

Views: 4666

Answers (2)

mattdlockyer
mattdlockyer

Reputation: 7314

Here you go dude:

http://jsfiddle.net/mattdlockyer/SyJSS/1/

CSS:

#img-container {
    position:fixed;
    display:none;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-100px;
    z-index:9999;
}

JS:

$('.img').on('click', function (e) {
    $('#img-cover').fadeIn();
    var img = $(this);
    $('#img-container').html(img.clone())
        .css({
        'margin-top': '-' + img.height() / 2 + 'px',
            'margin-left': '-' + img.width() / 2 + 'px'
    }).fadeIn();
});

$('#img-cover').on('click', function () {
    $('#img-cover').fadeOut();
    $('#img-container').fadeOut();
});

Source: http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Opinion: use libraries. There are usually some lightweight ones that will account for browser compatibility. It's a pain to roll your own solution all the time.

Upvotes: 2

Birrel
Birrel

Reputation: 4834

Here is a fiddle with a solution. Click on an image (colored block) to open myCanvas and populate it with the selected image. Click anywhere in myCanvas to hide it and select another image.

HTML:

<div id="wrapper">
    <div class="images_box">
        <a><img style="background: red;" /></a>
         <a><img style="background: blue;" /></a>
         <a><img style="background: green;" /></a>
         <a><img style="background: black;" /></a>
         <a><img style="background: pink;" /></a>
    </div>
    <div class="myCanvas"></div>
</div>

CSS:

* {
    padding: 0px;
    margin: 0px;
}
#wrapper {
    position: relative;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    height: 300px;
    /*background: #123;*/
}
.images_box {
    width: 100%;
    height: 60px;
}
img {
    display: inline-block;
    height: 50px;
    width: 50px;
    margin: 0px;
    padding: 5px;
}
.myCanvas {
    display: none;
    width: 100%;
    height: 300px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #999;
}

JavaScript:

$(document).ready(function () {
    $('a').click(function () {
        $('.myCanvas').fadeIn();
        $('.myCanvas').html($(this).html());
        $('.myCanvas').children().css('display', 'block');
        $('.myCanvas').children().css({
            'margin-left': 'auto',
            'margin-right': 'auto'
        });

        var topMargin = 125;

        $('.myCanvas').children().css('margin-top', topMargin);
    });

    $('.myCanvas').click(function () {
        $('.myCanvas').fadeOut();
    });
});

It takes the image (copies the html to myCanvas) and then centers it.

Upvotes: 0

Related Questions