CODEWITHSUNDEEP
jqueryhtmlcssfancyboxpositioning
Eric Barnes
Eric Barnes

Reputation: 81

FancyBox opens outside of browser/screen

I'm working on a page in which I'll have a few different groups of images that I'd like to open for a user when they click on the thumbnail, and do so in FancyBox.

I more or less have it working, but there's a major problem - all the images (1680x1050, PNGs) open at an off-screen position as though their top and left values were set in relation to the screen itself to -80% and 75%, respectively.

Translation: I only see the bottom-left quarter (at most) of the image when it opens.

I've done a good deal of searching with Google, SO, GitHub (the FB project's source), et cetera, and have yet to find a solution, or even anyone experiencing the same problem.

I'm probably missing something obvious, or at least obvious to seasoned veterans, but I'm a bit new and a bit tired. Anyone have any ideas?

On JFK's advice, I've put what I believe to be all the relevant code into a jsfiddle (something I had heard of, but never before even seen, let alone used). It can be found here:

http://jsfiddle.net/ericb222/ttvpg8vp/4/

Also, the jQuery I'm using is:

jquery 2.1.1
jQueryui 1.11.2

Please, feel free to let me know if you need more of the code. I'm new to programming; I've only just completed a two-year degree that focused on Java and SQL.

/* HTML */

<div id="content">
    <div id="content_body">
        <div id="content_left">
        </div><!--Close of content_left-->
        <div id="content_right">
            <div id="oms" class="content_block_standard">
                <div class="screenshots">

                    <a href="http://www.ejbdev.com/academia/oms/1_Portal.png" class="fancybox fancybox.image" rel="oms_gallery" title="Text"><img class="thumbnail" src="http://www.ejbdev.com/academia/oms/1_Portal.png" /></a>

                    <a href="http://www.ejbdev.com/academia/oms/2_Roster.png" class="fancybox fancybox.image" rel="oms_gallery" title="Text"><img class="thumbnail" src="http://www.ejbdev.com/academia/oms/2_Roster.png" /></a>

                    <a href="http://www.ejbdev.com/academia/oms/3_Add.png" class="fancybox fancybox.image" rel="oms_gallery" title="Text"><img class="thumbnail" src="http://www.ejbdev.com/academia/oms/3_Add.png" /></a>

                </div><!-- /screenshots -->
            </div><!-- /content_block_standard for OMS project -->
        </div><!-- /#content_right -->
    </div><!-- /#content_body -->
</div><!-- /#content -->

/* Javascript (from <head>) */

$(document).ready(function() {
    $('.fancybox').fancybox({
        openEffect  : 'elastic'
    });
});

/* CSS */

div#content {
    /* Positioning */
    margin-left:        auto;
    margin-right:       auto;
    position:           relative;
    top:                4.0em;
    margin-bottom:      16px;
    /* Sizing */
    width:              960px;
    /* Styling */
    border-top:         none;
}
    div#content_body {
        margin:         0;
        padding:        0;
        display:        table;
        position:       relative;
        top:            0px;
        left:           0px;
        height:         100%;
    }
    div#content_left {
        width:          192px;
        height:         100%;
        margin-top:     0;
        display:        table-cell;
        vertical-align: top;
        position:       relative;
        top:            0px;
        left:           0px;
        padding-left:   0.4em;
        padding-right:  0.4em;
    }
    div#content_right {
        width:          768px;
        display:        table-cell;
        vertical-align: top;
        border-radius:  8px;
    }
    div.content_block_standard {
        width:              90%;
        margin-left:        auto;
        margin-right:       auto;
        padding:            1.0em;
    }

div.screenshots {
    text-align:         center;
    margin-left:        auto;
    margin-right:       auto;
    background:         linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.0),rgba(22,122,222,0.2));
    padding:            4px;
}

img.thumbnail {
    width:              128px;
    height:             auto;
}

Upvotes: 1

Views: 987

Answers (2)

Eric Barnes
Eric Barnes

Reputation: 81

Turns out, I was missing something obvious, I was not including all the relevant code for anyone to help me (newbie mistake), and was failing to pay attention to that little red X in Chrome's Element Inspector.

I had the path to FancyBox's stylesheet wrong. That's was all it was.

Upvotes: 1

Jeroen W
Jeroen W

Reputation: 872

As far as I can see this is expected behaviour when an element is positioned 75% relative to the screen. Only on the other remaining 25% of the screen the element will be visible and the rest will be outside of the viewport.

Try this: (for this example I use an element width and height of 800px)

left: 50%; // position the left side of the box to be in the exact center
top: 50% // position the top of the box to be in the exact center
margin-left: -400px; // half of the width
margin-top:-400px; // half of the height

As you didn't provide us ANY code I'm not sure the solution above will work for you, but this is as far as it goes with centering absolute positioned elements to the parent element.

Cheers, Jeroen.

Upvotes: 0

Related Questions