IMGRID ile Resimlerinizi Yönetin

Vatanay Özbeyli CSS3, HTML5, jQuery

imgridIMGRID, sizler için hazırladığımız bir resim grid kütüphanesidir. HTML5 ile oluşturulmuş, CSS3 ile stilize edilmiş tasarım jQuery ile fonksiyonel hale getirilmiştir. Ancak yapının esnekliği sadece teknik bazda değil, kullanıcı arayüzü tarafında da bulunmaktadır. 3 ayrı şekilde boyutlandırmayı tek fonksiyon altından sunan IMGRID tamamıyla responsive olarak geliştirilmiştir.

Bütün işlemlerini client side olarak yürüten IMGRID’ın geliştirmeleri Adobewordpress tarafından versiyonlanarak devam edecektir. Şimdi biraz detaylar ve kullanım üzerine konuşalım. Ama öncesinde örneği test etmek isteyebilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

IMGRID Nasıl kullanılır?

IMGRID’in CSS ve JavaScript dosyasını web sayfanıza eklemeniz yeterli. Öncelikle dosyalarını nasıl projenize ekleyebileceğinizi hatırlayalım. Sonrasında da örnek bir yapı kuralım.

Basit, anlaşılır ve hafif bir tasarıma sahip IMGRID galeri listesi ve birkaç buton tasarımı ile birlikte gelir. 

    <!-- IMGRID'in sıkıştırılmış CSS dosyası -->
    <link href="imgrid.min.css" rel="stylesheet">

Bütün bu yapıyı işlevsel hale getirmek için jQuery ile çalışan imgrid.min.js’yi eklemeniz yeterli olacaktır.

    <!-- IMGRID'in sıkıştırılmış JavaScript dosyası -->
    <script type="text/javascript" src="imgrid.min.js"></script>

Özetle aşağıdakine benzer bir yapı IMGRID’in çalışması için yeterlidir.

    <!DOCTYPE html>
    <html>
      <head>
        <!-- IMGRID'in sıkıştırılmış CSS dosyası -->
        <link href="imgrid.min.css" rel="stylesheet">
      </head>
      <body>
        <div id="imgrid">
            <div class="image-selection" data-selection="multiple" data-image-size="medium">
            <!-- Resimleri aşağıdaki .gallery-item öğesini kopyalayarak arttırabilirsiniz. -->
              <div class="gallery-item">
                <img src="RESIM">
              </div>
            <!-- Bu kadar basit -->
            </div>
        </div>

        <!-- jQuery -->
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <!-- IMGRID'in sıkıştırılmış JavaScript dosyası -->
        <script src="imgrid.min.js"></script>
      </body>
    </html>

Bilgisayarına İndir

Sizler için geliştirdiğimiz IMGRID’i ücretsiz bir şekilde kullanabilirsiniz.


DOSYAYI İNDİR

Özelleştirme

IMGRID kolay yönetilebilir bir yapıdır. Hem tasarımsal hem de işlevsellik açısından basit tanımlamalar sayesinde özgünleştirilebilir.

data-selection

Yapı, tekil ve çoklu seçime müsade edecek şekilde kullanılabilir.

  1. single : kullanıcı sadece tek görsel üzerinden işlem yapabilir.
  2. multiple : kullanıcı birden fazla görsel üzerinden işlem yapabilir.
Bu da ilginizi çekebilir  WordPress Başlıklarınızın Yanına Kategori Resmi Ekleme

Kullanım şekli ise

<div class="image-selection" data-selection='multiple'>

data-image-size

Listenizdeki görsellerin boyutunu da sadece bir tanım üzerinden yönetebilirsin. Hem de responsive olarak!

  1. small : görseller küçük boyutta listelenir.
  2. medium : görseller orta boyutta listelenir.
  3. large : görseller büyük boyutta listelenir.

Kullanım şekli ise

<div class="image-selection" data-image-size='medium'>

Yorumlarınız?

IMGRID yorumlarınız eşliğinde geliştirilmeye devam edecektir.