Fotoğraf Karşılaştırma Kaydırıcısı

Görsel olarak iki görüntüyü etkileşimli olarak karşılaştırmak için bir içerik eklentisi.

Örnek


İçeriğinizde, bir öğenin içinde karşılaştırma kaydırıcısına sahip iki resim eklemeniz yeterlidir.
comparison-slider sınıf:




İpucu!

Geçerli klasöre dinamik bir dosya yolu eklemek için {{path}} değişkenini kullanın.

Gelişmiş Ayarlar





x3-style-frame Görüntüler arasında bir çerçeve görüntülemek için bu sınıfı ekleyin.
data-orientation Kaydırıcı için "yatay" (varsayılan) veya "dikey" yönlendirmeyi ayarlayın.
data-offset Kaydırıcının başlangıç ofset konumunu 0,0 ve 1,0 arasında bir sayıya ayarlayın (varsayılan 0,5).
data-hover * Öncesi Sonrası mouse hover etkisini etkinleştirin veya devre dışı bırakın.

Bilgi

Aynı Görüntü Boyutları
Bu eklentinin düzgün çalışması için, aynı boyutlarda iki farklı görüntü eklemeniz gerekir.

Görüntü Boyutu
4x4 galeri modülünden farklı olarak, bu eklenti cihaza ve ekran boyutuna bağlı olarak yeniden boyutlandırılmış resimler sunmayacaktır. Bu nedenle, örneğin 1024 veya 1280 piksel gibi hassas bir görüntü boyutu kullanmanız önerilir.

Eklenti Ekran Genişliği
4x4 düzeni varsayılan olarak duyarlı olduğundan, görüntüler otomatik olarak içerik modülünün genişliğine göre ölçeklenir. Bu ayrıca, görüntülerin küçük cihazlarda ekran genişliğine sığacak şekilde ölçekleneceği anlamına gelir.

Sayfa Galerisini Gizle
Geçerli klasördeki görüntüleri görüntülüyorsanız, aynı görüntülerin sayfa galerisi modülünde de görüntülenmesini engellemek isteyebilirsiniz. page › settings › gallery, alanına gidip "Sayfa Galeri Modülü"nü gizle.

Eklenti İstek Üzerine Yüklendi
Karşılaştırma kaydırıcı eklentisi için gerekli olan Javascript ve CSS, eleman algılandığında "istek üzerine" yüklenir. Bu, ilk sayfa ziyaretinde eklentinin başlatılmasından 1-2 saniye geçmesi anlamına gelir.

Özel Öncesi Sonrası Metin
Fare vurgusu üzerindeki * öncesi-sonrası * metnini değiştirmek isterseniz, özel CSS eklemeniz gerekecektir.


.comparison-slider .twentytwenty-before-label:before {
    content: "Öncesi";
}
.comparison-slider .twentytwenty-after-label:before {
    content: "Sonrası";
}

* ayarlar › özel › özel css