Tam olarak hatırlamıyorum ama sanırım saç reklamlarında buna benzer bir örnek vardı. İlaç kullanılmadan önceki hali ve ilaç kullanıldıktan sonraki halini gösteren yan yana birleştirilmiş iki tane resimden oluşuyordu bu reklamlar.  Gerçi görünüm olarak jQuery BeforeAfter.js  eklentisi ile hiç alakası yok ama bu tarz örneklerde kullanabilmeniz için hazırlanmış.

BeforeAfter.js uygulamasında bir div içerisine eklemiş olduğunuz iki tane resimden biri görünüyor ve hemen sağında da yukarıdan aşağıya uzanmış yeşil bir çizgi bulunuyor. Birinci resmin içinde bulunduğu dive class=”before”, ikinci resmin içinde bulunduğu dive de class=”after” ekleniyor. Bu şekilde before sınıfı atanmış olan resim yani resmin önceki hali üstte çıkıyor, yeşil çizgiyi  tutup mouse ile sola doğru kaydırdığınızda resmin sonraki hali ekrana geliyor.

Photoshop dersleri yayınlayan kişiler  için çok ideal bir uygulama. Düzenlediğiniz resimlerin sonuna  bu eklenti ile resimlerin önceki halini ve sonraki halini eklerseniz eğer ziyaretçileriniz  resimlerde yapmış olduğunuz değişiklikleri daha iyi inceleyebilecekler. Şimdilik aklıma sadece photoshop dersleri aklıma geldiği için  böyle bir örnek  verdim.  Bu gibi buna benzer bütün çalışmalar üzerinde jQuery BeforeAfter.js eklentisini kullanabilirsiniz.

jQuery.ui.touch-punch.js uygulaması ile beraber kullandığınızda dokunmatik cihazlar  üzerinde de çalışmasını sağlayabilirsiniz. BeforeAfter.js için kullanılabilir  birçok parametre bulunuyor. Detay butonuna tıklayarak  parametrelerin tamamını açıklama yazısından bulabilirsiniz.

Kullanım 

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

Js dosya adresleri : 

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>

 JavaScript : 

<script type="text/javascript">
$(function(){
	$('#container').beforeAfter();
});
</script>

Bir kaç tane parametre eklenmiş olan JavaScript : 

<script type="text/javascript">
$('#container').beforeAfter({
	animateIntro : true,
        introDelay : 2000,
        introDuration : 500,
        showFullLinks : false
});
</script>

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

Html :

<div id="container">
 <div><img alt="before" src="before.jpg" width="600" height="366" /></div>
 <div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>