JQuery LightBox 플러그인이 여러 갤러리와 함께 작동하도록 설정
이 jquery 플러그인 = > http://leandrovieira.com/projects/jquery/lightbox/을 같은 페이지에 있는 여러 갤러리에서 사용할 수 있도록 하려고 합니다.
문제는 특정 갤러리의 사진을 클릭할 때마다 모든 갤러리의 사진이 같은 페이지에 표시된다는 것입니다.각각 6장의 사진이 있는 갤러리가 2개 있다고 칩시다.갤러리 1의 사진을 클릭하면 갤러리 2의 사진도 볼 수 있습니다.
나는 그것을 성공시키기 위해 다음과 같은 것을 시도했지만 성공하지 못했다.
<script type="text/javascript">
$(function(){
$('div.gallery-6').each(function() {
$(this).find('a.lightbox').lightBox();
});
});
</script>
아쉽게도 동작하지 않습니다!!!
어떻게 하면 좋을까요?
다시 한 번 말씀드리지만, 제가 달성하고자 하는 것은 적절한 갤러리에서 사진을 볼 수 있는 것입니다.나는 모든 사진이 하나의 갤러리로 취급되는 것을 원하지 않는다.
거의 변경하지 않고 여러 갤러리를 한 페이지에 배치했습니다.
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">
나는 아이디에서 클래스로 스타일을 바꿨다.
여러 갤러리를 사용하거나 단순히 이미지에 라이트박스 효과를 추가하고 싶은 경우 Ben의 답변을 위한 패치입니다.<head>...</head>태그
코드는 다음과 같습니다(주의:변수를 변경했습니다.$위해서jQuery, 이것은 나에게 더 효과적이다) :
<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>
다음 예시는 모든 용도를 혼합한 것으로, 모두 같은 html로 동작할 수 있습니다.여기서는 2개의 갤러리와 이름이 없는3개의 갤러리가 있습니다.단, "라이트박스" 참조만 있습니다.
<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" />
도움이 됐으면 좋겠네요!
저는 이렇게 합니다.
<script type="text/javascript">
$(function(){
$('.lightboxGallery').each(function(){
$('.lightbox', this).lightBox();
});
});
</script>
이렇게 하면 각 갤러리를 어떤 종류의 컨테이너에 배치하기만 하면 컨테이너당 하나의 이미지 세트를 얻을 수 있습니다.예를 들어, 다음과 같이 2개의 이미지 세트가 생성됩니다.
<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>
대신 'a' 셀렉터를 사용할 수 있지만 '.lightbox'를 사용하면 더 유연합니다.
또는 다음과 같은 방법으로 표준 lightbox.js 기능과 같은 lightbox[여기 갤러리 이름 삽입] 링크를 자동으로 연결할 수 있습니다.
$(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(); });
});
아래 링크에서 얻을 수 있는 라이트 박스 2만 있으면 됩니다.
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>
"라이트박스"를 사용하여 원하는 갤러리 그룹명으로 "로드 트립" 이름을 바꾸면 다양한 갤러리를 설정할 수 있습니다.추가 코드의 필요 없음
다른 답변이 나온 후 라이트박스가 바뀌었을지도 모르지만, 이 페이지의 답변은 좋다고 생각했지만, 그 후 다음과 같이 간단하게 할 수 있다는 것을 알게 되었습니다.
jQuery('.lightbox').each(function(){
jQuery('a', this).lightBox();
});
이는 다음과 같은 HTML 구조를 상정하고 있습니다.
<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>
래퍼 클래스는 필요 없다고 생각합니다만, 제 코드에 다른 이유로 포함되어 있습니다.
이 특정 플러그인으로 작업한 적이 있다고는 할 수 없지만, 보통 추가는rel=lightbox[foo]링크 요소로 이동합니다.푸아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아
이것으로 올바른 방향으로 시작할 수 있기를 바랍니다.그렇지 않으면 사용할 수 있는 라이트 박스 플러그인이 수십 개 더 있습니다.
다음은 원래 질문에서 링크된 기본 jquery lightbox를 여러 갤러리로 동작시키는 방법입니다.해킹 같은 건 없어요흠잡을 데 없이 기능합니다.
나는 모든 라이트박스에 따로따로 이름을 붙였다.
<script type="text/javascript" charset="utf-8">
$(function() {
$('a[@rel*=lightboxG1]').lightBox();
$('a[@rel*=lightboxG2]').lightBox();
});
</script>
그러면 내 HTML은 다음과 같습니다.
<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>
그리고 부라, 난 갤러리가 두 개 있어.
또한 데이터 속성을 사용하여 JavaScript를 전혀 사용하지 않고 작업을 수행할 수도 있습니다.
<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>
페이지에 이미지가 혼재되어 있는 경우에도 동작합니다.
<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>
언급URL : https://stackoverflow.com/questions/2051294/making-jquery-lightbox-plugin-work-with-multiple-galleries
'source' 카테고리의 다른 글
| RestTemplate만 사용하는 경우 Spring Boot에서 Tomcat/jetty 자동 시작을 방지하는 방법 (0) | 2023.03.08 |
|---|---|
| 리액트 훅 및 컴포넌트 라이프 사이클 등가 (0) | 2023.03.08 |
| TypeScript를 최소 코드로 컴파일할 수 있습니까? (0) | 2023.03.08 |
| Ruby - 수신 http 호출에서 요청 본문을 가져옵니다. (0) | 2023.03.08 |
| 경고:비부울 Atribute에 대해 false를 수신했습니다.커스텀 부울 속성의 부울을 전달하려면 어떻게 해야 합니까? (0) | 2023.03.08 |