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;
}
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.