CODEWITHSUNDEEP
jqueryfancybox
user1205935
user1205935

Reputation:

Fancybox causes scroll bars to appear

I have used fancybox successfully before, but on my latest design, fancybox causes scroll bars to appear, i.e. clicking on the image, the image gets displayed in the middle of the window and the window itself gets scroll bars it didn't use to have. My layout is fluid and adjusts, when one changes the window size or font size. Using fancybox, then, the whole page shifts and rescales for no apparent reason, which looks bad and also uses processor power.

What could be the cause of this?

Also, the background fails to be darkened off... What does fancybox do to achieve this usually, and why would it fail with my design?

Here are some code snippets:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$('.fancybox').fancybox();
});
</script>

<div id="wrapper">
<div id="classes" class="post">
<h2>料理教室・ワークショップ</h2>
<a class="fancybox" rel="classes" href="http://127.0.0.1/wordpress/wp-content/themes/hitomiskuche/images/classes/1.jpg">フォトス</a>
<a class="fancybox" rel="classes" href="http://127.0.0.1/wordpress/wp-content/themes/hitomiskuche/images/classes/2.jpg"></a>
<a class="fancybox" rel="classes" href="http://127.0.0.1/wordpress/wp-content/themes/hitomiskuche/images/classes/3.jpg"></a>
</div>
</div>

#classes {
    width:40%;
    position:absolute;
    left:5%;
    bottom:10%;
    background-color:#fff;
    padding:1em;
    opacity:0.65;
    box-shadow:2px 2px 3px #555;
}

Upvotes: 1

Views: 4214

Answers (3)

tim3in
tim3in

Reputation: 139

as answered by Rob and Eva adding helper code to java script conf works for me

here is my full code

        $(document).ready(function() {
            $(".fancybox").fancybox({
                maxWidth        : 800,
                maxHeight   : 500,
                fitToView       : true,
                width       : '100%',
                height      : '100%',
                autoSize        : true,
                closeClick      : true,
                openEffect  : 'elastic',
                closeEffect : 'elastic',
                helpers : {
                overlay : {
                    locked : false
                }
            }

            });
        });

Upvotes: 1

Eva
Eva

Reputation: 113

Try this:

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            locked : false
        }
    }
});

And if you're using a full-screen background like 'supersized', you may want to add this to the css of your page as well:

html {overflow: -moz-scrollbars-vertical; overflow: scroll;}

Upvotes: 5

automaticAllDramatic
automaticAllDramatic

Reputation: 2063

Fancybox uses the class fancybox-overlay to display the overlay :

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

The overflow-y:scroll property is making the scroll bar appear. Take it out and you will be sorted.

Also, you might not have included the fancybox_overlay.png in the same folder as the fancybox css file. The overlay background is created from this file. Hope this information helps

Upvotes: -1

Related Questions