-2

I've coded this thing quickly with boostrap: http://alexisgargaloni.fr/archive/ It work perfectly, but for some reason I think it's better to do the picture grid system with masonry. So I've implemented Masonry to my code, but for some reason it appear really small: http://alexisgargaloni.fr/archive/index%20copie.html

Someone have an idea?

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords" content=" design, concept, print, affichage, web, web design, identity, graphic design, graphisme, graphic, poster, duperre">
    <meta name="description" content="Graphic design student at the Ecole Duperré Paris.">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

    <title></title>
</head>

<body>
    <div class="container-fluid">
        <div class="grid">
            <div class="grid-sizer col-sm-3">
            
                <!-- raynox du707TCH 1200 -->
            <div class="grid-item col-sm-4">
            <div class="grid-item-content">

                <div id="carouselraynoxdu707TCH1200" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/raynoxdu707TCH1200_noroll.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/raynoxdu707TCH1200_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/raynoxdu707TCH1200_wroll.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/raynoxdu707TCH1200_closed.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselraynoxdu707TCH1200" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselraynoxdu707TCH1200" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Raynox DU707TCH 1200</p>
</div>
            </div>

            <!-- kahnel koilmatic sd8 -->
            <div class="grid-item col-sm-4">
                <div class="grid-item-content">
                <div id="carouselkahnelkoilmaticsd8" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/kahnelkoilmaticsd8_box_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/kahnelkoilmaticsd8_box_side.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselkahnelkoilmaticsd8" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselkahnelkoilmaticsd8" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Kahnel koilmatic SD8</p>
                </div>
            </div>
            
            <!-- super 8 film roll -->
           <div class="grid-item col-sm-4">
               <div class="grid-item-content">
                <div id="carouselsuper8filmroll" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/super8filmroll.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/super8filmroll_closed.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselsuper8filmroll" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselsuper8filmroll" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Super 8 film roll</p>
               </div>
            </div>
            
            <!-- rollei P3250 -->
           <div class="grid-item col-sm-4">
               <div class="grid-item-content">
                <div id="carouselrolleiP3250" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/rolleiP3250_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_side.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_top.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselrolleiP3250" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselrolleiP3250" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Rollei P3250</p>
               </div>
            </div>
                
                <!-- rollei P3250 -->
           <div class="grid-item col-sm-4">
               <div class="grid-item-content">
                <div id="carouselrolleiP3250" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/rolleiP3250_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_side.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_top.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselrolleiP3250" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselrolleiP3250" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Rollei P3250</p>
               </div>
            </div>
                
                <!-- rollei P3250 -->
           <div class="grid-item col-sm-4">
               <div class="grid-item-content">
                <div id="carouselrolleiP3250" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/rolleiP3250_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_side.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_top.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselrolleiP3250" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselrolleiP3250" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Rollei P3250</p>
               </div>
            </div>
                
                <!-- rollei P3250 -->
           <div class="grid-item col-sm-4">
               <div class="grid-item-content">
                <div id="carouselrolleiP3250" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/rolleiP3250_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_side.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_top.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselrolleiP3250" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselrolleiP3250" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Rollei P3250</p>
               </div>
            </div>
                
                <!-- rollei P3250 -->
           <div class="grid-item col-sm-4">
               <div class="grid-item-content">
                <div id="carouselrolleiP3250" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/rolleiP3250_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_side.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_top.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselrolleiP3250" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselrolleiP3250" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Rollei P3250</p>
               </div>
            </div>
            </div>   
        </div>

<br>
        <br>
        <br>
        <div class="row index justify-content-between">
            <div class="col-auto">
                <a href="index.html">Archive</a>
            </div>
            <div class="col-auto">
                <a href="about.html">About</a>
            </div>
        </div>
    </div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript">
    $('.grid').masonry({
        itemSelector: '.grid-item', // use a separate class for itemSelector, other than .col-
        columnWidth: '.grid-sizer',
        percentPosition: true
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
    <script> var $grid = $('.grid').imagesLoaded( function() {
  // init Masonry after all images have loaded
  $grid.masonry({
    // options...
  });
}); </script>
</body>

</html>
scheylon
  • 29
  • 9
  • You need to include the code in your question, any errors you see and what you have tried to do to fix it - [How to Ask](https://stackoverflow.com/help/how-to-ask) and [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) – Tony Mar 09 '19 at 12:51
  • There's link to website where the code can be checked, I feel like it's easier, but I've added the HTML code to my post. – scheylon Mar 09 '19 at 12:59
  • right at the top, you have `
    ` ... change this to col-sm-12 or remove the class... you have asked the whole carousel to stay inside 3 columns of a sm sized view
     – Akber Iqbal Mar 09 '19 at 13:13
  • @AkberIqbal I've tried this thing, images appear in the right size but they align on a single column instead of a row of 4 – scheylon Mar 09 '19 at 13:26

2 Answers2

2

You should get the Masonry layout working first, and then attempt to fit it in to the bootstrap container to avoid any problems with the two layout systems from interfering with each other.

I stripped down your HTML to the minimum required for Masonry to work, also removing the carousel. This is what I meant by a "mininimal, complete, and verifiable example":

<!DOCTYPE html>
<html>

    <head>
        <style>
            .grid-item { width: 200px; }
            .grid-item img { width: 90%; }
        </style>
    </head>

    <body>
        <div class="grid">
            <div class="grid-item">
                <img class="d-block w-100" src="http://alexisgargaloni.fr/archive/images/raynoxdu707TCH1200_wroll.jpg" alt="">
                <p> 1 Raynox DU707TCH 1200</p>
            </div>
            <div class="grid-item">
                <img class="d-block w-100" src="http://alexisgargaloni.fr/archive/images/raynoxdu707TCH1200_wroll.jpg" alt="">
                <p> 2 Raynox DU707TCH 1200</p>
            </div>
            <div class="grid-item">
                <img class="d-block w-100" src="http://alexisgargaloni.fr/archive/images/raynoxdu707TCH1200_wroll.jpg" alt="">
                <p> 3 Raynox DU707TCH 1200</p>
            </div>
            <div class="grid-item">
                <img class="d-block w-100" src="http://alexisgargaloni.fr/archive/images/raynoxdu707TCH1200_wroll.jpg" alt="">
                <p> Raynox DU707TCH 1200</p>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>    
        <script type="text/javascript">
            $('.grid').masonry({
                columnWidth: 200
            });
        </script>

    </body>

</html>

At the bottom of your HTML, you are initialising the Masonry code twice using two different styles. Only one is required:

<script src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript">
    $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer',  <<-- I don't think this will work, for now use a number
        percentPosition: true
    });
</script>

...

<script src="js/imagesloaded.pkgd.min.js"></script>
    <script> var $grid = $('.grid').imagesLoaded( function() {
  // init Masonry after all images have loaded
  $grid.masonry({
    // options...
  });
}); </script>

In the documentation it says

All sizing of items is handled by your CSS.

but I could not find a size specified in your CSS.

Once you get the basic Masonry working, start adding in carousels, etc. and see if it breaks. You can then fix one thing at a time.

You are mixing two layout systems here, one based on columns (Bootstrap), the other using a "best fit" system. If all your images are the same size and orientation the masonry layout is not going to help much when it's forced in to a fixed width Bootstrap container.

Tony
  • 8,904
  • 3
  • 41
  • 67
  • Just resolved the problem after reading back examples from Masonry website,
    should be closed right after with nothing in it. that's all.
     – scheylon Mar 09 '19 at 17:16
1

After looking back examples given on Masonry website I figured out that the div "grid-sizer col-sm-3" must be closed right after with nothing in it, while before I included all my elements in it. Problem solved.

scheylon
  • 29
  • 9