Skip to content

A jQuery plugin to layout pictures by filling all the space available

Notifications You must be signed in to change notification settings

vincentjoseph/pycs-layout

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pycs-Layout

Pycs-Layout is a JQuery plugin allowing you to distribute pictures by preserving their aspect-ratios and filling the maximum amount of space.

It uses the Chromatic algorithm which is detailed on this blog post.

Demo

You can see a demo here: Pycs-Layout demo

Usage

<body>
  <div class="gallery">
    <div class="picture">
      <img src="mypicture.jpg" />
    </div>
    <div class="picture">
      <img src="mypicture1.jpg" />
    </div>
    <div class="picture">
      <img src="mypicture2.jpg" />
    </div>
  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/pycs-layout.jquery.js"></script>

  <script>
   $(document).ready(function() {

       /* Be careful, you have to wait for the images to be loaded,
          otherwise pycsLayout won't have the images dimensions.
          Look at the demo to see how it can be done.
        */
       $(".gallery").pycsLayout({
           /* The class of the elements to layout */
           pictureContainer: ".picture",
           /* How many pixels between each pictureContainer */
           gutter: 4,
           /* Height of the rows */
           idealHeight: 70,
       });

   });
  </script>
</body>

If you already know the dimensions of the pictures, you can use the data-pycs-width and data-pycs-height attributes on the div.picture element to specify it. This allows you to lazy-load the pictures.

Contributors

About

A jQuery plugin to layout pictures by filling all the space available

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 49.3%
  • JavaScript 27.0%
  • CSS 23.7%