Moda sitelerinde görmeye alışık olduğumuz daha doğrusu moda tarzı sitelerde başlıkları daha çekici yapmak için kullanılan slider örneklerine az çok bilirsiniz.  Genelde premium temalarda bu tarz örnekler ile karşılaşırız. Yani moda siteleirnin kullandığı slideshow örneklerinin pek ücretsiz olanları bulunmuyor. Sağolsunlar bazı geliştiricilerin ücretsiz olarak dağıttığı örnekler de bulunuyor Destaque gibi.

Daniel Martins  tarafından geliştirilmiş olan Destaque uygulamasının ilk başta neden açık seçik resimlerle tanıtıldığına pek anlam verememiştim aslında. Belki daha çabuk ve daha çok yayılması için bu tarz resimler kullanmıştır diye düşündüğüm de olmuştu. Sonradan moda tarzı sitelerde buna benzer slideshow örnekleri olduğunu hatırlayınca Destaque’nin asıl amacını anlamış oldum.

Bu tarz açık seçik resimleri paylaşmak pek tarzım değil hatta siteme eklediğim ilk açık seçik resim de diyebilirim. Ama moda konusu ile alakalı bir uygulama olunca ağaç resmi eklemek biraz mantıksız. Yine de resimlere fazla bakmamanız için sizleri  uyarıyorum. Bu yüzden demo ve download adreslerni bu yüzden biraz üste aldım :=)

Konu gittikçe başka yönlere sapmadan ben sizlere Destaque hakkında biraz daha bilgi vermek istiyorum. Destaque iki adet demodan oluşuyor. Bir tanesini sitenizin en üstüne manşet şeklinde yerleştirebilirsiniz. Ekranda tek bir resim görülüyor ve her slide işleminde önce resim sağdan sola doğru ekrana yerleşiyor ve hemen ardından play ikonu onun da ardından resmin başlığı geliyor. Resimlerin değişmesi sırasında her elemanın farklı hızlarda ekrana yerleşmesi bir hayli güzel bir çalışma olmuş.

İkinci demoyu daweb sitenizin orta kısımlarına yerleştirebilirsiniz. Aynı anda slideshow çerçevesi içinde 3 tane farklı resim ve başlık görünüyor. Resimlerin değişmesi  aynı anda gerçekleşmiyor. Her biri arasında milisaniyelik zaman farkı var. Başlık ve ikonlar da aynı şekilde.

Diğer  demonun  resmi 

 Kullanım : 

• Tekli slide

JavaScript : 

 $("#slide-container").destaque({
    slideMovement: 100,
    slideSpeed: 1000,
    elementSpeed: 1100,
    easingType: "easeInOutExpo",
    itemSelector: ".item",
    itemForegroundElementSelector: ".foreground .element",
    controlsSelector: "#slide-pagination a"
  });

 Html : 

<div id="slide-container" class="slides">
  <div class="item first">
    <a href="#">
      <div class="foreground">
        <div class="overlay"></div>
        <div class="element icon"></div>
        <div class="element title">Aline Espíndola</div>
        <div class="element subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed lacus vel mi imperdiet mollis. Nulla at nisi quam, at porta magna.</div>
      </div>
    </a>
  </div>
  <!-- the same markup for other itens -->

</div>
<ul id="slide-pagination" class="pager">
  <li>
    <a rel="prev" href="#">&larr; Previous </a>
  </li>
  <li>
    <a rel="next" href="#">Next &rarr;</a>
  </li>
</ul>

•  Çoklu slideshow

JavaScript : 

$('.triple-slides').destaquesQueue({
   delay: 250,
   // same options that destaque plugin but for multiple elements queue, the pagination handler and mouse interactions will control all slides as single to have the desired effect
   controlsSelector: "#slide-triple-pagination a",
   stopOnMouseOver: true,
   slideMovement: 100,
   slideSpeed: 1000,
   autoSlideDelay: 3000,
   elementSpeed: 1100,
   easingType: "easeInOutExpo",
   itemSelector: ".item-triple",
   itemForegroundElementSelector: ".foreground-triple .element",
   onPageUpdate: function() {
      // onPageUpdate in this case is called once for whole slides subset
   }
 });

 Html : 

<div id="multiple-slide-container" class="slides">
  <h2>Multiple slides example:</h2>
  <div class="triple-slides">
    <div class="item-triple triple-first-one">
      <a href="#">
        <div class="foreground-triple">
          <div class="overlay"></div>
          <div class="element icon"></div>
          <div class="element title">Michelle</div>
        </div>
      </a>
    </div>
    <!-- the same markup for other itens -->
  </div>
  <div class="triple-slides">
    <div class="item-triple triple-second-one">
      <a href="#">
        <div class="foreground-triple">
          <div class="overlay"></div>
          <div class="element icon"></div>
          <div class="element title">Nicole</div>
        </div>
      </a>
    </div>
    <!-- the same markup for other itens -->
  </div>
  <div class="triple-slides">
    <div class="item-triple triple-third-one">
      <a href="#">
        <div class="foreground-triple">
          <div class="overlay"></div>
          <div class="element icon"></div>
          <div class="element title">Fabiana</div>
        </div>
      </a>
    </div>
    <!-- the same markup for other itens -->
  </div>
</div>
<ul id="slide-triple-pagination" class="pager">
  <li>
    <a rel="prev" href="#">&larr; Previous </a>
  </li>
  <li>
    <a rel="next" href="#">Next &rarr;</a>
  </li>
</ul>