Menu
I am creating a one-page website in HTML5 using the Unsemantic framework, linking to hidden divs that display in Fancybox 2 and am having trouble getting all the different types of content to size correctly.
There are three divs - one containing text inside a div that is wrapped inside a hidden div, so I can manipulate the content accordingly, one containing an image gallery, and one containing a link to a YouTube video. I have created a hidden class that I call via CSS as so:
HTML for the text portion:
<a class="fancybox" href="#bio">...blah blah blah...
...then later on...<article class="hidden" id="bio">
HTML for the video portion:
<a class="fancybox fancybox.iframe" href="https://www.youtube.com/video">Videos</a>
CSS:
.hidden {
overflow:hidden;
display:none;
}
Fancybox is being called inside the <head> tags:
<script type="text/javascript">
$(document).ready(function() {
$("#fancybox-gallery").click(function() {
$.fancybox.open([
{
href : "image_1.jpg",
}, {
href : "image_2.jpg",
}, {
href : "image_3.jpg"
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
With the Fancybox 2 defaults (autoSize:true, autoWidth:false and autoHeight:false), images resize accordingly, video resizes accordingly, but the text link defaults to minimum height and maximum width:
If I set autoSize and autoWidth to False, then set autoHeight to True, images still resize in the same way, the text boxes resize to about 50% of the browser window, and the video displays with a portion of white on the right hand side:
To be honest, I like the size of the text boxes in this example, and they act responsively, but the video box is wrong so it's a bit annoying.
So far I've tried the following with no success:
class="hidden" and replacing it with inline
"display:none" script and then display:inline-block in the CSS, on the advice of a friend, but I realized that it wouldn't work;So, where am I going wrong? Could the answer lie in setting autoSize:true, and adding an em or % width to the divs that need it?
I'm also thinking about calling a script upon open that just affects the divs I need, but I am not sure if that's possible. I'm not a JavaScript user day to day, so my knowledge is poor.
932
Can you not set it's max-width?
In the first image you have with text, what happens if you set it to that and apply:
width: 100%;
max-width: 500px; /* or whatever you like */
margin: 0 auto;
left: 0;
right: 0;
to the white outer (or outermost) container in your screenshot.
If fancybox is overriding it, use !important.
Really, in this scenario, you only need fancybox to either load it or display it, then position it vertically. You should be able to center it horizontally yourself with a few lines of CSS. Granted we don't have a working demo, so there could be something I'm missing (like how it's sizing it's content, or overflowing). But I'd be happy to amend my answer if you can post a demo.
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
