Fresco.js

Bu güne kadar birçok lightbox örneği paylaştık sizlere. Birçoğu birbirine benzeyen, bazılarında fazladan fazla özellikler olan örnekler gördük. Bu seferki lightbox örneği şimdiye kadar gördüklerimin en iyisi diyebilirim. Hem lightbox görevi görüyor hem de slidergörevi görüyor.

Nick Stakenburg tarafından geliştirilmiş olan Fresco uygulamasını birçok alanda kullanabilirsiniz. Fresco ile eşleştirilmiş olan grup resimlerden herhangi birine tıklandığında yükleme konu sayfanın ortasında beliriryor ve yükleme tamamlandıktan sonra resim ekranın ortasında görünüyor ve gruba bağlı olan diğer resimlerde büyük resmin hemen altında sıralanıyor. Dilerseniz grup resimlerinin görünmemesinide sağlayabilirsiniz.

Youtube ve Vimeo sitelerinden sadece video linkini ekleyerek sayfanızda lightbox penceresinde açılmasını sağlayabilirsiniz. Belirli parametreler ekleyerek videoların genişliğini ve yüksekliğinide ayarlayabilirsiniz.

Fresco’daki diğer bir özellik sanırım buda e-ticaret siteleri için çok uygun görünen bir özellik diyebilirim. Tıklayacağınız resim çok fazla büyük ise ve eğer ekranı taşıyorsa mouseyi aşağı yukarı sürüklediğiniz zaman reismde mouse ile beraber aşağı yukarı hareket ediyor. Tam e-ticaret siteleri için bir özellik.

Kullanım

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

Js, css dosyaları, youtube ve vimeo api :

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.0.min.js"></script>

<!-- Make IE8 and below responsive by adding CSS3 MediaQuery support -->
<!--[if lt IE 9]>
  <script type="text/javascript" src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<!-- Youtube and Vimeo API (improves video on touch devices and gives better HD support) -->
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript" src="https://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<!-- Fresco -->
<script type="text/javascript" src="/js/fresco/fresco.js"></script>
<link rel="stylesheet" type="text/css" href="/css/fresco/fresco.css"/>

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

Youtube için standart boyut :

<a href="youtube video linki" class="fresco">Youtube</a>

Youtube özel boyut :

<a href="youtube video adresi" 
    class="fresco" 
    data-fresco-options="
      width: 853, 
      height: 480,
      youtube: { html5: 1 }
    ">Youtube - Dimensions and options</a>

Vimeo için standart boyut :

<a href="https://vimeo.com/32071937" class="fresco">Vimeo</a>

Vimeo özel boyut :

<a href="https://vimeo.com/36897783" 
   class="fresco" 
   data-fresco-options="
     width: 640, 
     height: 272, 
     vimeo: {
       autoplay: 0,
       portrait: 1
     }
   ">Dimensions and options</a>

Ekleyeceğiniz resimlerde küçük resimler istemiyorsanız aşağıdaki seçiciyi kullanmanız gerekiyor :

data-fresco-group-options="thumbnails:false"

Grup resimlerde küçük resmlerin görünmesi içinde aşağıdaki kodu kullanın :

<a href="image1.jpg" 
   class="fresco" 
   data-fresco-group="thumbnail-example" 
   data-fresco-options="thumbnail: 'phpThumb.php?src=image1.jpg&w=240&h=240&zc=1'"
>Generated Thumbnails 1</a>
<a href="image2.jpg" 
   class="fresco" 
   data-fresco-group="thumbnail-example" 
   data-fresco-options="thumbnail: 'phpThumb.php?src=image2.jpg&w=240&h=240&zc=1'"
>2</a>

Fresco’nun en çok kullanılan özellikleri hakkında temel kullanım aşamalarını dilim döndüğünce sizlere anlatmaya çalıştım. Özellikleri bunlarla sınırlı değil tabi. Geri kalan aşamaları buradan inceleyebilirsiniz.

Download

Demo