Gridly.js

Kevin Sylvestre  tarafından  benzerlerine göre daha kullanışlı sayfalarınızda otomatik boyutlandırılan grid düzeni  ekleyebilmeniz için hazırlanılmış bir jQuery uygulaması.

Gridly  ile sayfalarınıza ekleyeceğiniz css pencereler mouse  ile tıklandığında  belli bir boyutta  büyürken ızgara düzenide aynı şekilde eşit  olarak sayfa içinde dağılmaya başlar. Hiç bir şekilde sayfa  düzeni  bozulmayacağı için size  büyük  kolaylık sağlayacak.

Dilerseniz Css çerçevelere resim ekleyin tıklandığında pencere  büyüsün ve reism ile alakalı yazılar çıksın yada küçük resim tıklandıktan sonra daha büyük olsun ve sayfada herhangi bir taşma  olmasın.  Bu tip  bir çok bölümde  Gridly’yi kullanabilirsiniz. Ayrıca fazladan pencereler ekleyebilmeniz  için bir de buton bulunuyor. Butona her tıklandığında yeni bir pencere daha ekleniyor sayfaya.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js ve css dosya adresleri : 

      <link href='stylesheets/jquery.gridly.css' rel='stylesheet' type='text/css'>
      <link href='stylesheets/sample.css' rel='stylesheet' type='text/css'>
      <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js' type='text/javascript'></script>
      <script src='javascripts/jquery.gridly.js' type='text/javascript'></script>

 JavaScript : 

(function() {
  $(function() {
    var brick;
    brick = "<div class='brick small'><div class='delete'>&times;</div></div>";
    $(document).on("click", ".gridly .brick", function(event) {
      var $this, size;
      event.preventDefault();
      event.stopPropagation();
      $this = $(this);
      $this.toggleClass('small');
      $this.toggleClass('large');
      if ($this.hasClass('small')) {
        size = 140;
      }
      if ($this.hasClass('large')) {
        size = 300;
      }
      $this.data('width', size);
      $this.data('height', size);
      return $('.gridly').gridly('layout');
    });
    $(document).on("click", ".gridly .delete", function(event) {
      var $this;
      event.preventDefault();
      event.stopPropagation();
      $this = $(this);
      $this.closest('.brick').remove();
      return $('.gridly').gridly('layout');
    });
    $(document).on("click", ".add", function(event) {
      event.preventDefault();
      event.stopPropagation();
      $('.gridly').append(brick);
      return $('.gridly').gridly();
    });
    return $('.gridly').gridly();
  });

}).call(this);

Css : 

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body, html, p, h1, h2, h3, h4, h5, h6 {
  font-family: "Lato", "Helvetica", serif;
  font-weight: normal; }

code {
  font-family: "Consolas", "Monaco", monospace;
  font-weight: normal; }

body, html, p, code {
  color: #888888; }

h1, h2, h3, h4, h5, h6 {
  color: #444444; }

pre {
  overflow: scroll;
  background: #eeeeee;
  padding: 10px; }

.content {
  width: 980px;
  margin: 80px auto; }

.formats .format {
  display: inline-block; }

.zip {
  background: url("../images/zip.png");
  display: block;
  width: 128px;
  height: 128px; }

.tar {
  background: url("../images/tar.png");
  display: block;
  width: 128px;
  height: 128px; }

.fork {
  position: absolute;
  top: 0;
  left: 0;
  border: 0; }

.button {
  display: block;
  padding: 20px;
  width: 200px;
  color: white;
  background: #888888;
  margin: 20px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 4px; }

pre .support.tag {
  color: #000088; }
pre .support.attribute {
  color: #880000; }
pre .string.value {
  color: #008800; }

.example {
  position: relative; }
  .example .brick {
    opacity: 1;
    cursor: pointer;
    position: relative; }
    .example .brick .delete {
      display: block;
      color: white;
      background: rgba(255, 255, 255, 0.2);
      width: 40px;
      height: 40px;
      top: 0;
      right: 0;
      position: absolute;
      text-align: center;
      line-height: 40px; }
    .example .brick.small {
      width: 140px;
      height: 140px; }
    .example .brick.large {
      width: 300px;
      height: 300px; }
    .example .brick.dragging {
      opacity: 0.8; }
    .example .brick:nth-child(20n + 1) {
      background: #1abc9c; }
    .example .brick:nth-child(20n + 2) {
      background: #16a085; }
    .example .brick:nth-child(20n + 3) {
      background: #2ecc71; }
    .example .brick:nth-child(20n + 4) {
      background: #27ae60; }
    .example .brick:nth-child(20n + 5) {
      background: #3498db; }
    .example .brick:nth-child(20n + 6) {
      background: #2980b9; }
    .example .brick:nth-child(20n + 7) {
      background: #9b59b6; }
    .example .brick:nth-child(20n + 8) {
      background: #8e44ad; }
    .example .brick:nth-child(20n + 9) {
      background: #34495e; }
    .example .brick:nth-child(20n + 10) {
      background: #2c3e50; }
    .example .brick:nth-child(20n + 11) {
      background: #f1c40f; }
    .example .brick:nth-child(20n + 12) {
      background: #f39c12; }
    .example .brick:nth-child(20n + 13) {
      background: #e67e22; }
    .example .brick:nth-child(20n + 14) {
      background: #d35400; }
    .example .brick:nth-child(20n + 15) {
      background: #e74c3c; }
    .example .brick:nth-child(20n + 16) {
      background: #c0392b; }
    .example .brick:nth-child(20n + 17) {
      background: #ecf0f1; }
    .example .brick:nth-child(20n + 18) {
      background: #bdc3c7; }
    .example .brick:nth-child(20n + 19) {
      background: #95a5a6; }
    .example .brick:nth-child(20n + 20) {
      background: #7f8c8d; }

• Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

    <div class='content'>
      <section class='example'>
        <div class='gridly'>
          <div class='brick small'>
            <a class='delete' href='#'>&times;</a>
          </div>
          <div class='brick small'>
            <a class='delete' href='#'>&times;</a>
          </div>
        </div>
        <p class='actions'>
          <a class='add button' href='#'>Add</a>
        </p>
    </div>