CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapimage-gallery
St.running
St.running

Reputation: 185

JavaScript and Bootstrap image gallery with different image sizes

I have a problem aligning image gallery with images of different size. I do not want to put size programmatically, because on different screens they would not look nice. Another problem is whitespaces between images and a situation, that I do not know image sizes (images are obtained as a List of image, through Spring Framework controller and added by for-each cycle). My code is:

 <%@page contentType="text/html" pageEncoding="UTF-8"%>
 <%@page session="false"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%@ taglib prefix="s" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
 <!DOCTYPE html> 
 <html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Who s the whale here? Im the whale</title>
<link rel='stylesheet' href='webjars/bootstrap/3.2.0/css/bootstrap.min.css'>
<style>
    body {
        padding-top: 20px;
    }

    .navbar-default {
        background-color: rgba(255,255,255,0.88);;
        border-color: rgba(255,255,255,0.88);;
    } 
</style>
<sec:csrfMetaTags/>
 </head>
 <body>
 <script type="text/javascript" src="webjars/jquery/2.1.1/jquery.min.js">        
  </script>
  <script type="text/javascript" src="webjars/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="webjars/masonry/3.1.5/masonry.pkgd.min.js"></script>
  <br>
  <br>    


   <c:if test="${!empty masterpieceList}">
    <div class="container">
        <ul class="row">
            <c:forEach items="${masterpieceList}" var="masterpiece">
                <li class="col-md-3 col-sm-4 col-xs-6 wrapper">
                    <img class="img-responsive imgClip"src="/something/getImg${masterpiece.masterpieceId}" />
                </li>
        </c:forEach> 
            </ul>
        </div>
    </c:if>


   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
        </div>
    </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
  </body>
   </html>

And the gallery looks like: enter image description here

Any ideas how to make it more smooth etc.? I tried different solutions, but because my images go through a cycle, they seem not to work properly. Thank you in advance

UPDATE:

It should look like this: enter image description here

Upvotes: 1

Views: 3337

Answers (3)

St.running
St.running

Reputation: 185

The masonry library, which was adviced by bbh and Paulie_D is a correct and good solution for the case, many websites use it with the cases which are very similar to mine. So, their choice is methodologically correct.

To achieve such grouping as shown in my question's UPDATE, (one heigth for all, different widths and different amount of columns/images in each row) I used only CSS means:

  .ImgClip{ max_width = 100%; heigth = auto; }

Now there is one height for all images and different widths. Width can be less, then maximum

Upvotes: 0

bogatyrjov
bogatyrjov

Reputation: 5378

1) One way is to get get the maximum height among all li elements and then apply this height to all of them - here is a script :

jQuery(document).ready(function($) {
    // calculate max height among all elements
    var maxHeight = 0;
    var rowElements = $('ul.row');
    rowElements.each(function() {
        var elementHeight = $(this).height();
        if(elementHeight > maxHeight) {
            maxHeight = elementHeight;
        }
    });

    // now apply this height to all elements
    rowElements.height(maxHeight);
});

That script takes all elements from all rows and thus there could be big margins between some rows, which don't have big images, but you can tweak that script based on your needs

2) Second options is to just wrap each 4 images in a separate - this is more simple solution. That will require a little jsp in your foreach loop. I don't know jsp, so won't provide any particular code, but should be very ez.

Upvotes: 1

bbh
bbh

Reputation: 509

You should try the masonry library to arrange images of different sizes. Here is more info this library. masonary. Also check out this quick tutorial: http://www.epicwebs.co.uk/jquery-tutorials/quick-and-easy-jquery-masonry-tutorial/

Upvotes: 5

Related Questions