Click here to Skip to main content
15,867,756 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi, I've been wreaking my head with light-box for a good while now and nothing seems to help. I need it to, when i click the photo link to just pop up, image centered and have the overlay fill the screen, simple right? However the overlay turns into a vertical pillar of transparent grey, only filling the middle of the screen, and the image clings to the top of it for dear life. I used to play around with this stuff but it's been a while and I have no idea what it is that I'm doing wrong, below is the html,css and java-script code, any help would be greatly appreciated

HTML:


  • <img src="images/mens/clarks/swiftmile.jpg">

    Swift Mile Also Available In Black


  • CSS:

    /* Styles the lightbox, removes it from sight and adds the fade-in transition */

    .lightbox-target {
    position: fixed;
    top: -100%;
    width: 50%;
    height:100%;
    background: rgba(0,0,0,.7);
    width: 50%;
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    z-index:9999;
    overflow: auto;
    }

    /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

    .lightbox-target img {
    margin: auto;
    position: absolute;
    top: 0;
    left:0;
    right:0;
    bottom: 0;
    max-height: 0%;
    max-width: 0%;
    border: 3px solid white;
    box-shadow: 0px 0px 8px rgba(0,0,0,.3);
    box-sizing: border-box;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    }

    /* Styles the close link, adds the slide down transition */

    a.lightbox-close {
    display: block;
    width:50px;
    height:50px;
    box-sizing: border-box;
    background: white;
    color: black;
    text-decoration: none;
    position: absolute;
    top: -90px;
    right: 0;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    }

    /* Provides part of the "X" to eliminate an image from the close link */

    a.lightbox-close:before {
    content: "";
    display: block;
    height: 30px;
    width: 1px;
    background: black;
    position: absolute;
    left: 26px;
    top:10px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
    }

    /* Provides part of the "X" to eliminate an image from the close link */

    a.lightbox-close:after {
    content: "";
    display: block;
    height: 30px;
    width: 1px;
    background: black;
    border:black;
    position: absolute;
    left: 26px;
    top:10px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
    }

    /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

    .lightbox-target:target {
    opacity: 1;
    top: 0;
    bottom: 0;
    }

    .lightbox-target:target img {
    max-height: 100%;
    max-width: 100%;
    }

    .lightbox-target:target a.lightbox-close {
    top: 50px;
    }

    JAVASCRIPT:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('.grid-nav li a').on('click', function(event){
    event.preventDefault();
    $('.grid-container').fadeOut(500, function(){
    $('#' + gridID).fadeIn(500);
    });
    var gridID = $(this).attr("data-id");

    $('.grid-nav li a').removeClass("active");
    $(this).addClass("active");
    });
    });
    </script>
    Posted
    Updated 3-Sep-14 6:41am
    v3

    This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



    CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900