JQuery lightbox nasıl yapılır?

Question

ColorBox veya jQuery Lightbox Plugin gibi bir ışık kutusu kullanarak nasıl bir galeri/görüntü dizisi açan tek bir bağlantı oluşturabilirim?

Örneğin 1 küçük resmim var ve bir kullanıcı tıklattığında, ışık kutusundaki birden çok resim açılmasını istiyorum, böylece kullanıcı o galerideki tüm resimleri görüntülemek için sonraki veya önceki tıklatabilir.

Düşüncelerim, 1 resmi normal 1 bağlantı olarak yapıyorum, ardından ilk bağlantıyı gizlemek için jquery kullanıyorum. Daha iyi bir yol olmalı?

Teşekkürler.

Answer 1

çözüm uygun (ve daha verimli) 'dir:

HTML:

<div id='gallery'> 
    <a href="images/big-image1.jpg"> 
     <img src="images/thumbnail-image1.jpg"/> 
    </a> 
    <a href="images/big-image2.jpg" ></a> 
    <a href="images/big-image3.jpg" ></a> 
    <a href="images/big-image4.jpg" ></a> 
</div> 

jQuery/JS:

$(document).ready(function() { 
    $('#gallery a').lightBox(); 
}); 

Not: Gördüğünüz gibi, ankraj bağlantılarını galeriden ayrı olmak istediğiniz diğer görüntülere sıralayın. İşaretlemeye resim eklemenize ve ardından bunları JS ile gizlemenize gerek yoktur. Yukarıdaki biçimlendirme örneğinde göreceğiniz tek görüntü, images/thumbnail-image1.jpg Işık Kutusu, geri kalanları otomatik olarak gizleyecek ve ardından her birini uygun zamanda gösterecektir. Farklı bir eklenti kullanmak isteyebilirsiniz gibi sesler

Answer 2

Yanlış anlaşılma olabilir, ancak ColorBox'un sunduğu "gruplandırılmış fotoğraf" stil galerisinden daha fazlasını yapmak istediğiniz izlenimi alıyorum. Tanımladığınız bir sonraki/önceki işlevsellikten tam olarak emin değilim, ancak düşüncem bu fonksiyonu önce ColorBox olmadan yazmak olurdu.

Görüntüleme galerinizi sayfa içerisinde normal bir div olarak ekleyin. Galeriyi ve davranışını kendi isteğinize göre ayarladığınızda, ColorBox'u divunuzda satır içi olarak arayabilirsiniz (yeni oluşturduğunuz denetimi pop-up içinde gösterir). jQuery Lightbox yazılım programını kullanarak

Answer 3

, örnek kod aşağıdakileri yapmak diyor ki:

$(document).ready(function() { 
    $('#gallery a').lightBox({fixedNavigation:true}); 
    $('#gallery a:gt(0)').hide(); 
}); 

tüm bağlantıları bir lightbox açın ve galeride gezinmek için Önceki/Geri bağlantıları olmalıdır yapar Yani. Aradığın şey bu mu?

(örnek burada mevcuttur: http://leandrovieira.com/projects/jquery/lightbox/#example)

İşte

Answer 4

. PrettyPhoto galeriler için harika. .

Answer 5

<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a> 

Yani: Daha sonra ekleyebilirsiniz

rel="lightbox[renovation]"