가장 좋은 jQuery는“축소판을 클릭하고 기본 이미지를 변경하십시오”모듈은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/612575

  •  03-07-2019
  •  | 
  •  

문제

다음은 내가 가진 내용입니다 (모두 동적으로 생성 된 경우, 차이를 만듭니다) :

  • 이미지 목록
  • 각 이미지에 대한 캡션
  • 각 이미지에 대한 썸네일

페이지에는 하나의 풀 사이즈 이미지와 모든 썸네일이로드되어야합니다. 사용자가 썸네일을 클릭하면 풀 사이즈 이미지는 해당 캡션이있는 새로운 이미지를 보여줍니다. 다른 축소판을 클릭하면 그림 (및 캡션)이 다시 변경됩니다.

그다지 복잡하지 않습니다. 나는 몇 달 전에 솔루션을 해킹했지만 다시해야합니다. 그리고 나는 그것을 다시해야합니다. 그리고 나는이 엉터리 코드를보고 더 나은 방법이 있어야한다고 생각하고 (그리고 jQuery를 아는 사람, 다른 사람이 이미 그것을했고, 끝났다고 생각합니다. 잘).

생각? 연결?

감사!

도움이 되었습니까?

해결책

여기에 꽤 멋져 보이고 jQuery로 작성된 것이 있습니다. 사진 슬라이더

그리고 여기 내가 조금 더 좋아하는 또 다른 것이 있습니다.갤러리아

다른 팁

여기의 대부분의 답변은 캐논으로 파리를 쏘는 것과 같습니다 !!

$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});

이것이 당신이 필요한 전부입니다 .. 4 줄의 코드.

이봐 : 갤러리 인 4 라인

Lightbox를 사용해 보셨습니까? http://leandrovieira.com/projects/jquery/lightbox/

구축 Krembo99의 답변 그는 여기서 연결했습니다, 고객이 이와 같은 기능을 요청했을 때 이미 수백 장의 사진을 업로드 했으므로 솔루션을 공유하고 싶었습니다. 이를 염두에두고 제공된 코드에 몇 줄을 추가하여 매개 변수에 맞는 솔루션을 얻을 수있었습니다.

나는 또한 작은 이미지로 작업하고 있었기 때문에 같은 파일의 소형 및 대형 버전을 만들 필요가 없었습니다. 

$('.thumbnails img').click(function(){

 // Grab img.thumb class src attribute
 // NOTE: ALL img tags must have use this class, 
 // otherwise you can't click back to the first image.

 var thumbSrc = $('.thumb').attr('src');

 // Grab img#largeImage src attribute
 var largeSrc = $('#largeImage').attr('src');

  // Use variables to replace src instead of relying on file names.
  $('#largeImage').attr('src',$(this).attr('src').replace(thumbSrc,largeSrc));
  $('#description').html($(this).attr('alt'));

});

내 HTML이 어떻게 보이는지는 다음과 같습니다.

    <img src="path/to/file1.jpg" id="largeImage" class="thumb">
    <div id="description">1st image Description</div>

    <div class="thumbnails">

     <img src="path/to/file1.jpg" class="thumb" alt="1st image description">
     <img src="path/to/file2.jpg" class="thumb"alt="2nd image description">
     <img src="path/to/file3.jpg" class="thumb" alt="3rd image description">
     <img src="path/to/file4.jpg" class="thumb" alt="4th image description">
     <img src="path/to/file5.jpg" class="thumb" alt="5th image description">

    </div>

http://bradblogging.com/jquery/9-jquery-slideshow-applications-ocannot-miss/

jQuery에 9 개의 다른 사진 슬라이드 쇼가있는 페이지를 사용할 준비가되었습니다.

내 갤러리아 구현을 확인하십시오. Essex Gallery의 정원 디자인 조경사

노력하다 갤러리 픽, 필요한 모든 것이 있습니다.

이 스크립트 중 다수가 오래되지 않았으며 나에게 작동하지 않으며 썸네일에는 다른 이미지 세트가 필요합니다. 나는 심각한 사냥을했고 평범한 JS, jQuery가 필요하지 않은 매우 밝은 것을 발견했습니다.

<html>
<head>
<style>
* {margin:0; padding:0; border:0; outline:0; box-sizing:border-box;}
.image, .thumb {width:100%; height:100%;}
#product-image-wrap {position:relative; float:left; width:250px; height:325px; margin:50px 0 50px 50px;}
#product-image {position:relative; float:left; width:250px; height:250px; border:1px solid #d0d0d0; padding:20px; cursor:pointer; display:inline-block; transition:0.9s;}
#product-image:hover {opacity:0.7;}
.product-image-thumbnail {position:relative; float:left; width:55px; height:55px; border:1px solid #d0d0d0; margin-top:20px; padding:10px; cursor:pointer; display:inline-block; transition:0.9s;}
.product-image-thumbnail:hover {opacity:0.7;}
.product-image-thumbnail-spacer {position:relative; float:left; width:10px; height:130px;}
</style>

</head>
<body>

<div id='product-image-wrap'>

<!-- Main -->
<div id='product-image'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='0' class='image' alt='image 0'></div>

<!-- Thumbs -->
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='1' class='thumb' onclick='preview(this)' alt='image 0'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_02_large.jpg' id='2' class='thumb' onclick='preview(this)' alt='image 2'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_03_large.jpg' id='3' class='thumb' onclick='preview(this)' alt='image 3'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_04_large.jpg' id='4' class='thumb' onclick='preview(this)' alt='image 4'></div>

</div>

<!-- Javascript -->
<script>
var lastImg = 1;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id;
}
</script>

</body>
</html>

https://jsfiddle.net/uo6js5v7/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top