2010-01-12 28 views
7

Tôi đang cố gắng tạo plugin jquery này =>http://leandrovieira.com/projects/jquery/lightbox/ hoạt động với nhiều phòng trưng bày trên cùng một trang.Làm cho Plugin JQuery LightBox hoạt động với nhiều phòng trưng bày

Vấn đề là, mỗi khi tôi nhấp vào một hình ảnh từ một thư viện nhất định, tôi nhận được tất cả các hình ảnh từ tất cả các phòng trưng bày trên cùng một trang. Giả sử tôi có 2 phòng trưng bày gồm 6 ảnh. Nếu tôi bấm vào một pic từ thư viện 1, tôi sẽ thấy các bức ảnh từ bộ sưu tập 2 là tốt.

Tôi đã thử một cái gì đó như thế này để làm cho nó hoạt nhưng không thành công:

<script type="text/javascript"> 
    $(function(){ 
     $('div.gallery-6').each(function() { 
     $(this).find('a.lightbox').lightBox(); 
     }); 
    }); 
</script> 

Thật không may, nó không hoạt động !!!

Giải pháp cho điều đó là gì?

Một lần nữa, những gì tôi đang cố gắng hoàn thành là có thể xem các hình ảnh trong bộ sưu tập phù hợp của họ. Tôi không muốn tất cả các bức ảnh được coi là một bộ sưu tập.

+0

đưa mã HTML bạn đang cố gắng để phù hợp với bộ chọn cũng như (Tôi nghĩ rằng đó là một vấn đề selector) –

+0

cũng, '$ ('div.gallery-6 a.lightbox') .lightBox(); 'là điều tương tự như những gì bạn đang làm với mã ít hơn (khá chắc chắn nó là chính xác) –

+0

nó không phải ... vì tôi muốn các plugin để xử lý các phòng trưng bày của tôi như là 2 phòng trưng bày khác nhau. Giả sử một thư viện chứa một tập hợp các bức ảnh nhất định và một thư viện khác chứa một tập hợp các bức ảnh khác. Khi bạn duyệt qua thư viện đầu tiên, bạn sẽ không thấy các thư viện khác. – lpdahito

Trả lời

8

Với rất ít thay đổi, tôi đã thực hiện công việc này với nhiều thư viện trên một trang.

Các JQuery

$(function() { 
    $('#gallery1 a').lightBox(); 
    $('#gallery2 a').lightBox(); 
    ... 
    $('#galleryN a').lightBox(); 
}); 

HTML

<div class="gallery" id="gallery1"> 
<div class="gallery" id="gallery2"> 
... 
<div class="gallery" id="galleryN"> 

Tôi đã thay đổi phong cách từ một id để một lớp.

+0

Tôi vừa thử giải pháp này ... Nó hoạt động hoàn hảo thx. Nhưng tại sao, trong trường hợp đó, mã trước của tôi không hoạt động? Ý tôi là, gọi hàm hộp đèn hai lần giống như tìm phần tử, trong trường hợp của tôi là div thư viện và sau đó trên mỗi thư viện div tìm thấy phần tử "a" và gọi hàm hộp đèn ... Tôi sẽ không phải cung cấp cho thư viện ID gây ra tôi gọi phương thức each() trên div thư viện. – lpdahito

+0

cũng '$ ('. Gallery') mỗi (hàm (i) { $ ('# gallery' + i) .lightbox(); }); ' – Matt

0

Không thể nói tôi đã làm việc với plugin cụ thể này trước đây, nhưng thường bạn thêm rel=lightbox[foo] vào phần tử liên kết. Foo sẽ là duy nhất cho mỗi bộ sưu tập trên trang.

Hy vọng điều này sẽ giúp bạn bắt đầu trên con đường bên phải; nếu không có dozens các plugin hộp đèn khác mà bạn có thể sử dụng.

+0

Hộp đèn jQuery cho phép bạn sử dụng bất kỳ bộ chọn nào bạn muốn gắn hộp đèn vào một phần tử. do đó bạn không * có * để đặt rel = "lightbox [optional_slide_show]" vào các phần tử của bạn nữa (như trong phiên bản gốc). tuy nhiên, bạn có thể bắt chước hành vi này bằng '$ ('[rel * =" lightbox "]')' Bộ chọn jQuery. –

4

tôi làm điều đó theo cách này:

<script type="text/javascript"> 
    $(function(){ 
     $('.lightboxGallery').each(function(){ 
      $('.lightbox', this).lightBox(); 
     }); 
    }); 
</script> 

Bằng cách này tất cả các bạn phải làm là nơi mỗi bộ sưu tập trong một số loại container và bạn sẽ nhận được một hình ảnh thiết lập mỗi container, ví dụ, ý chí sau tạo hai bộ hình ảnh:

<div id="gallery1" class="lightboxGallery"> 
    <a href="image1.jpg" class="lightbox">Image 1</a><br /> 
    <a href="image2.jpg" class="lightbox">Image 2</a><br /> 
    <a href="image3.jpg" class="lightbox">Image 3</a><br /> 
</div> 
<div id="gallery2" class="lightboxGallery"> 
    <a href="image4.jpg" class="lightbox">Image 4</a><br /> 
    <a href="image5.jpg" class="lightbox">Image 5</a><br /> 
    <a href="image6.jpg" class="lightbox">Image 6</a><br /> 
</div> 

Thay vào đó, bạn có thể sử dụng công cụ chọn 'a' thay thế nhưng tôi thấy sử dụng '.lightbox' mang lại sự linh hoạt hơn.

+1

Đây là giải pháp tốt nhất cho đến nay. Cảm ơn, hoạt động tuyệt vời chỉ bằng cách sử dụng thẻ "a" thay vì thêm ".lightbox" vào mọi liên kết. – Klikerko

1

Cách khác, bạn có thể làm điều gì đó như thế này để tự động kết nối bất kỳ hộp đèn nào [chèn tên thư viện tại đây] liên kết, như hộp đèn chuẩn.chức năng js:

$(function() { 
    var boxen = []; 

    //find all links w/ rel=lightbox[... 
    $('a[rel*=lightbox\\[]').each(function() { 

    //push only unique lightbox[gallery_name] into boxen array 
    if ($.inArray($(this).attr('rel'),boxen)) boxen.push($(this).attr('rel')); 

    }); 

    //for each unique lightbox group, apply the lightBox 
    $(boxen).each(function(i,val) { $('a[rel='+val+']').lightBox(); }); 

}); 
+0

Nó không hoạt động –

6

này một bản vá cho câu trả lời của Ben, đối với những người WAHT sử dụng nhiều phòng trưng bày, hoặc đơn giản là thêm các hiệu ứng lightbox cho một hình ảnh, sử dụng nó bên <head>...</head> thẻ của bạn

Dưới đây là đoạn code (Lưu ý: tôi đã thay đổi biến $ cho jQuery, nó hoạt động tốt hơn cho tôi):

<script type="text/javascript"> 
    jQuery(function() { 
     var boxen = []; 
     //find all links w/ rel="lightbox[gallery_name]" or just rel="lightbox" it works both ways 
     jQuery('a[rel*=lightbox]').each(function() { 
     //push only unique lightbox[gallery_name] into boxen array 
     if (jQuery.inArray(jQuery(this).attr('rel'),boxen)) boxen.push(jQuery(this).attr('rel')); 
    }); 
    //for each unique lightbox group, apply the lightBox 
    jQuery(boxen).each(function(i,val) { jQuery('a[rel='+val+']').lightBox(); }); 
    }); 
</script> 

đây là một ví dụ trộn tất cả khả năng sử dụng, tất cả họ đều có thể làm việc trong html cùng, ở đây chúng tôi có hai phòng trưng bày và một phần ba một người không có tên, chỉ tham chiếu "hộp đèn":

<a href="images/image1.jpg" rel="lightbox[gallery1]"><img border="0" height="50" src="images/image1_thumbnail.jpg" width="50" /> 
<a href="images/image2.jpg" rel="lightbox[gallery1]"><img border="0" height="50" src="images/image2_thumbnail.jpg" width="50" /> 
<a href="images/image3.jpg" rel="lightbox[gallery2]"><img border="0" height="50" src="images/image3_thumbnail.jpg" width="50" /> 
<a href="images/image4.jpg" rel="lightbox[gallery2]"><img border="0" height="50" src="images/image4_thumbnail.jpg" width="50" /> 
<a href="images/image5.jpg" rel="lightbox"><img border="0" height="50" src="images/image5_thumbnail.jpg" width="50" /> 

Tôi hy vọng điều này sẽ hữu ích!

1

Tất cả những gì bạn cần là hộp đèn 2 mà bạn có thể lấy từ liên kết bên dưới.

http://www.huddletogether.com/projects/lightbox2/

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> 
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> 
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a> 

Bạn có thể đặt bộ khác nhau của bạn bộ sưu tập sử dụng "lightbox [roadtrip]" chỉ đổi tên "roadtrip" với tên nhóm gallery mong muốn của bạn và nó sẽ làm việc như ma thuật. Không cần viết mã cho bất kỳ điều gì thêm

0

Đây là cách tôi tạo hộp đèn jquery cơ bản được liên kết trong câu hỏi ban đầu với nhiều phòng trưng bày. Không có hack, hoặc bất cứ điều gì. Hoạt động hoàn hảo.

Tôi đưa cho mỗi hộp đèn một tên riêng biệt:

<script type="text/javascript" charset="utf-8"> 
$(function() { 
    $('a[@rel*=lightboxG1]').lightBox(); 
    $('a[@rel*=lightboxG2]').lightBox(); 
}); 
</script> 

Rồi HTML của tôi trông như thế này:

<a href="images/image-1.jpg" rel="lightboxG1">image #1</a> 
<a href="images/image-2.jpg" rel="lightboxG1">image #2</a> 
<a href="images/image-3.jpg" rel="lightboxG1">image #3</a> 

<a href="images/image-1.jpg" rel="lightboxG2">image #1</a> 
<a href="images/image-2.jpg" rel="lightboxG2">image #2</a> 
<a href="images/image-3.jpg" rel="lightboxG2">image #3</a> 

Và thì đấy, tôi có 2 phòng trưng bày riêng biệt.

1

lẽ hộp đèn đã thay đổi kể từ khi câu trả lời khác được đưa ra, nhưng tôi nghĩ rằng câu trả lời trên trang này là tốt, nhưng sau đó tôi phát hiện ra rằng tôi chỉ đơn giản có thể làm:

jQuery('.lightbox').each(function(){ 
      jQuery('a', this).lightBox(); 
    }); 

Đó là giả định một cấu trúc HTML của:

<div class="lightbox"> 
    <div class="wrapper"> 
    <a href="asdasd.jpg"><img src="asdasd.jpg"></a> 
    <a href="asdasd2.jpg"><img src="asdasd2.jpg"></a> 
    </div> 
</div> 

Lớp trình bao bọc là không cần thiết, tôi nghĩ, nhưng mã của tôi bao gồm nó vì các lý do khác.

0

Bạn cũng có thể làm điều đó mà không cần JavaScript chút nào với thuộc tính dữ liệu.

<div id="gallery-1"> 
    <a href="images/image-1.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 1"><img src="images/image-1.jpg"></a> 
    <a href="images/image-2.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 2"><img src="images/image-2.jpg"></a> 
    <a href="images/image-3.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 3"><img src="images/image-3.jpg"></a> 
</div> 
<div id="gallery-2"> 
    <a href="images/image-4.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 1"><img src="images/image-4.jpg"></a> 
    <a href="images/image-5.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 2"><img src="images/image-5.jpg"></a> 
    <a href="images/image-6.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 3"><img src="images/image-6.jpg"></a> 
</div> 
<div id="gallery-3"> 
    <a href="images/image-7.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 1"><img src="images/image-7.jpg"></a> 
    <a href="images/image-8.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 2"><img src="images/image-8.jpg"></a> 
    <a href="images/image-9.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 3"><img src="images/image-9.jpg"></a> 
</div> 
<div id="gallery-4"> 
    <a href="images/image-10.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 1"><img src="images/image-10.jpg"></a> 
    <a href="images/image-11.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 2"><img src="images/image-11.jpg"></a> 
    <a href="images/image-12.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 3"><img src="images/image-12.jpg"></a> 
</div> 

Nó cũng hoạt động nếu hình ảnh được trộn lẫn trong trang.

<div id="gallery"> 
    <a href="images/image-1.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 1"><img src="images/image-1.jpg"></a> 
    <a href="images/image-4.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 1"><img src="images/image-4.jpg"></a> 
    <a href="images/image-2.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 2"><img src="images/image-2.jpg"></a> 
    <a href="images/image-9.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 3"><img src="images/image-9.jpg"></a> 
    <a href="images/image-3.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 3"><img src="images/image-3.jpg"></a> 
    <a href="images/image-8.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 2"><img src="images/image-8.jpg"></a> 
    <a href="images/image-5.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 2"><img src="images/image-5.jpg"></a> 
    <a href="images/image-12.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 3"><img src="images/image-12.jpg"></a> 
    <a href="images/image-10.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 1"><img src="images/image-10.jpg"></a> 
    <a href="images/image-6.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 3"><img src="images/image-6.jpg"></a> 
    <a href="images/image-7.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 1"><img src="images/image-7.jpg"></a> 
    <a href="images/image-11.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 2"><img src="images/image-11.jpg"></a> 
</div> 
Các vấn đề liên quan