mercredi 29 avril 2020

Diffrent width and height images layout question in Laravel with fancybox

Here is Photo viewer laravel project. it worked well. but I'm having problem about image layout. This below image is my current photo gallery page. As you can see images are not line. looks not good.

enter image description here

Becase each uploaded photo size are diffrent width and height so this happens I guess. I'm using Laravel. And this is fancybox. and I'm using this gentleman's source code. https://www.itsolutionstuff.com/post/laravel-5-image-gallery-crud-example-from-scratchexample.html

I had been changing below css parameter but I couldn't fix. Could you teach me code to fix situation please?

CSS of index.blade.php

  <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- References: https://github.com/fancyapps/fancyBox -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
   .gallery
    {
        display: inline-block;
        margin-top: 20px;      

    }   

    .form-image-upload{
        background: #e8e8e8 none repeat scroll 0 0;
        padding: 15px;

    }

Image output of Index.blade.php

<div class='list-group gallery'>
            @if($images->count())
                @foreach($images as $image)
                <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
                    <a class="thumbnail fancybox" rel="ligthbox" href="images/">
                        <img class="img-responsive" alt="" src="images/" />
                        <div class='text-center'>
                            <small class='text-muted'>No.</small>
                        </div> <!-- text-center / end -->
                    </a>                

                </div> <!-- col-6 / end -->
                @endforeach
            @endif
        </div> 


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire