Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Boris Kamp
Boris Kamp
16,660 Points

jQuery blueimp gallry not centering on <721 px width

In my custom build theme I make use of jQuery Blueimp Gallery. It works great on screens bigger than 720 pixels, but when smaller than 721 pixels the lightbox picture is not centered in the screen anymore. I have no clue on how this can be fixed. Does anybody have any idea? thanks! https://github.com/blueimp/Gallery

I've uploaded a beta of my new site here with the problem http://www.msmtesting.com/reviews/magach-6b-gal-batash-academy-13281/

3 Answers

Daniel Newman
Daniel Newman
Courses Plus Student 10,715 Points

A tip: if you have some additional opening div in the beginning or inside and did not close it later, Chrome can "help you" and make closing tag somewhere at the end. Right-click on rendered page and open source code, post the code at the jsfiddle or codepen and share the link. You can also try to turn JS off on the page (it's available option at Chrome console config, something about "Debug", Firebug have this option also), and post this code somewhere like jsfiddle or codepen and share this link.

Boris Kamp
Boris Kamp
16,660 Points

Thanks! Noted that I missed one extra closing div tag in order to properly close all my divs! I was messy and did not close them properly.

Daniel Newman
PLUS
Daniel Newman
Courses Plus Student 10,715 Points
Daniel Newman
Daniel Newman
Courses Plus Student 10,715 Points

If you mean that you can not see picture anymore you should scroll to the canter of a page down (or up). Lightbox centered (in your case) to the whole page width and whole page length center. If you want to center lightbox to the viewport you should change CSS or script initialization settings.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

I think I solved your problem. Your div with the id #blueimp-gallery needs to be moved outside of the container div's you have it inside of. Make it so it is a direct child of the body element, and is not contained inside any other div's. This should fix your problem.

Boris Kamp
Boris Kamp
16,660 Points

Thanks Colin for the suggestion! I found out this is some kind of bug it seems, I cannot seem to get it outside of that stupid Div I specified nowhere. Here is my footer.php

<?php
/**
 * The template for displaying the footer.
 *
 * Contains footer content and the closing of the
 * #main and #page div elements.
 *
 * @package WordPress
 * @subpackage BuddyBoss
 * @since BuddyBoss 3.0
 */
?>
    </div><!-- #main .wrapper -->
</div><!-- #page -->
    <div class="container-fluid">
        <footer>
            <div class="logo-footer">
                <img class="img-rounded img-responsive logo-footer" src="<?php bloginfo('stylesheet_directory'); ?>/images/logo_military_scale_modelling.png" alt="Logo Military Scale Modelling">
            </div>
            <p class="copyright">
                &copy; Military Scale Modelling <?php echo date('Y'); ?>
            </p>
        </footer></div>
    <div>

    <?php wp_footer(); ?>

    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
        <!-- The container for the modal slides -->
        <div class="slides"></div>
        <!-- Controls for the borderless lightbox -->
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
        <!-- The modal dialog, which will be used to wrap the lightbox content -->
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body next"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left prev">
                            <i class="glyphicon glyphicon-chevron-left"></i>
                            Previous
                        </button>
                        <button type="button" class="btn btn-primary next">
                            Next
                            <i class="glyphicon glyphicon-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

  </body>
</html>

Do you have any idea on this?

Colin Marshall
Colin Marshall
32,861 Points

You have an extra opening div tag right before your wp_footer() call. Get rid of that and see if that fixes it.

Boris Kamp
Boris Kamp
16,660 Points

Thanks Colin, Noted that I missed one extra closing div tag in order to properly close all my divs! I was messy and did not close them properly.

Colin Marshall
Colin Marshall
32,861 Points

No problem! So is it working like it should be now?

Boris Kamp
Boris Kamp
16,660 Points

it it perfectly! Thanks again!