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.
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