javascript/jquery를 사용하여 동적으로 이미지의 텍스트를 롤오버하는 방법

Question

나는 웹 개발에 익숙하지 않지만 큰 관심을 가지고 있습니다. 그래서 기본적으로 이미지의 축소판이 화면에 표시되고 사용자가 클릭하면 더 크게 표시되는 라이트 박스를 만듭니다. 이제 사용자가 갤러리 이미지/미리보기 이미지를 가리키면 현재 이미지 위에 일부 텍스트가 나타나야하며 일부 애니메이션이 있거나 기본적으로 마우스를 움직여 일부 이벤트가 발생해야하지만이를 수행 할 수 없습니다. 텍스트는 동적으로 추가되거나 이전에 배열이나 그 종류의 것으로 저장되어 있어야합니다. 내 코드를보고 그러한 효과를 얻기 위해 수정하는 방법을 알려주십시오. 그렇게 할 수있는 더 쉽고 쉬운 방법을 알고 있다면 자유롭게 공유하십시오. 정말 고맙습니다!!

HTML :

<div class="gallery"> 
    <ul id="images"></ul> 
    <div class="lightbox"> 
     <div class='limage'> 
     </div> 
     <div class='left'> 
     </div> 
     <div class='right'> 
     </div> 
     <div class='close'> 
      x 
     </div> 
    </div> 
</div> 

JAVASCRIPT :

var gallery_slider = new Array(); 
 
gallery_slider[0] = "im1.jpg"; 
 
gallery_slider[1] = "im2.jpg"; 
 
gallery_slider[2] = "im3.jpg"; 
 

 

 
function displayAllImages() { 
 
    var i = 0, 
 
     len = gallery_slider.length; 
 
    for (; i < gallery_slider.length; i++) { 
 

 
     var img = new Image(); 
 
     img.src = gallery_slider[i]; 
 
     img.style.width = '200px'; 
 
     img.style.height = '120px'; 
 
     img.style.margin = '3px'; 
 
     img.style.cursor = 'pointer'; 
 

 
     document.getElementById('images').appendChild(img); 
 
    } 
 
}; 
 

 

 
$(function() { 
 
    displayAllImages(); 
 
}); 
 

 

 

 
$(function() { 
 

 
    $('img').click(function() { 
 
     var hell = (this).src; 
 
     display(hell); 
 
    }); 
 
}); 
 

 
function display(hello) { 
 
    $('header').css('display', 'none'); /*for some other purposes*/ 
 
    $('.limage').html("<img src=" + hello + " >"); 
 
    $('.lightbox').css("display", "block"); 
 
    $('.lightbox').fadeIn(); 
 

 
    $('.right').click(function() { 
 
     var im = new Array(); 
 
     var x; 
 
     var p; 
 
     for (x = 0; x < gallery_slider.length; x++) { 
 
      im[x] = gallery_slider[x]; 
 
     } 
 
     for (p = 0; p < im.length; p++) { 
 
      if (im[p] == hello) { 
 
       break; 
 
      } else { 
 
       continue; 
 
      } 
 
     } 
 
     if (p >= (im.length - 1)) { 
 
      p = -1; 
 
     } 
 

 
     $('.limage').fadeOut(0); 
 
     $('.limage').html("<img src= " + im[p + 1] + ">"); 
 
     $('.limage').fadeIn(500); 
 
     hello = im[p + 1]; 
 
    }); 
 
    $('.left').click(function() { 
 
     var im = new Array(); 
 
     var x; 
 
     var p; 
 
     for (x = 0; x < gallery_slider.length; x++) { 
 
      im[x] = gallery_slider[x]; 
 
     } 
 
     for (p = 0; p < im.length; p++) { 
 
      if (im[p] == hello) { 
 
       break; 
 
      } else { 
 
       continue; 
 
      } 
 
     } 
 
     if (p == 0) { 
 
      p = (im.length); 
 
     } 
 

 
     $('.limage').fadeOut(0); 
 
     $('.limage').html("<img src= " + im[p - 1] + ">"); 
 
     $('.limage').fadeIn(500); 
 
     hello = im[p - 1]; 
 
    }); 
 
    $('.close').click(function() { 
 
     $('.lightbox').fadeOut(); 
 
     $('header').css('display', 'block'); /*for some other purposes*/ 
 
    }); 
 
};

CSS :

.gallery { 
 
    width: 100%; 
 
    height: 400px; 
 
    overflow: hidden; 
 
    margin: auto; 
 
} 
 
.gallery ul { 
 
    list-style: none; 
 
} 
 
.lightbox { 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: none; 
 
    z-index: 106; 
 
} 
 
.close { 
 
    color: #fff; 
 
    border: 1px solid #fff; 
 
    border-radius: 100px; 
 
    background-color: #000; 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 20px; 
 
    padding: 10px; 
 
    font-family: firstfont; 
 
    font-size: 30px; 
 
    z-index: 101; 
 
    cursor: pointer; 
 
} 
 
.close:hover { 
 
    background-color: #ebebeb; 
 
    color: #000; 
 
} 
 
.left { 
 
    width: 50%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    cursor: pointer; 
 
} 
 
.right { 
 
    width: 50%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    cursor: pointer; 
 
} 
 
.limage { 
 
    position: relative; 
 
    margin: auto; 
 
    top: 17%; 
 
    left: 15%; 
 
    max-width: 90%; 
 
    max-height: 90%; 
 
}

,129,

코딩에 몇 가지 버그가있을 수 있습니다. 조심해. 이 코드는 이미지를 매트릭스로 축소판으로 표시하고 클릭하면 라이트 박스의 슬라이더로 표시하기 위해 작동합니다. hover 기능을 초기 축소판에 추가하는 방법을 알 수 없습니다.

Jsfiddle : http://jsfiddle.net/psd6cbd7/1/

Answer 1

나는 그것을 표시/숨기기 위해 CSS를 사용하여 다음 텍스트가 포함 된 이미지 div 내부 div을 넣고 좋을 것.

HTML :

<div class="gallery"> 
     <ul id="images"></ul> 
     <div class="lightbox"> 
      <div class='limage'> 
       <div class=".caption">Caption here</div> 
      </div> 
      <div class='left'> 
      </div> 
      <div class='right'> 
      </div> 
      <div class='close'> 
       x 
      </div> 
     </div> 
    </div> 

CSS :

.limage { position: relative; } 
.caption { display: none; } 
.limage:hover .caption { display: block; position: absolute;} 

Answer 2

왜 이미지를 저장하는 배열을 사용하고 계십니까?

HTML :

<ul id="images"> 
</ul> 
<!-- assume this is the place that you want to display the caption --> 
<div id="caption"></div> 

자바 스크립트 :

var images = new Array(); 
images[0] = "p1.png"; 
images[1] = "p2.png"; 
images[2] = "p3.png"; 
images[3] = "p4.png"; 

var captions = new Array(); 
captions[0] = "Picture 1"; 
captions[1] = "Picture 2"; 
captions[2] = "Picture 3"; 
captions[3] = "Picture 4"; 

var x = $("#images"); 
var y = $("#caption"); 
const prefix = "image-"; 

것은 당신이 사용하는 경우 HTML5를 :

어쨌든, 당신은 여전히 ​​배열을 사용한다고 가정 아래 당신이 시도 할 몇 가지 예제 코드는

for (var i = 0; i < images.length; i++) { 
    x.append("<img class='roll' src='" + images[i] + "' data-caption='" + captions[i] + "'>"); 
} 

$(".roll").mouseover(function(){ 
    //do whatever effect here when mouse over 
    y.html($(this).attr("data-caption")); 
}); 

역방향 호환을 원하는 경우 :

for (var i = 0; i < images.length; i++) { 
    x.append("<img id='" + prefix + i + "' class='roll' src='" + images[i] + "'>"); 
} 

$(".roll").mouseover(function(){ 
    //do whatever effect here when mouse over 
    var index = $(this).attr("id").substring(prefix.length); 
    y.html(captions[index]); 
}); 

희망이 도움이 될 것입니다.