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.