Как переносить текст на изображения динамически с помощью 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%; 
 
}

В кодировании могут быть некоторые ошибки. Осторожно. Этот код работает для отображения изображений в виде миниатюр в виде матрицы и в качестве слайдера в лайтбокс при нажатии на них. Я не могу понять, как добавить функциональность зависания в начальные миниатюры.

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

Answer 1

Я предложил бы положить div внутри образа div, содержащего текст, а затем с помощью CSS, чтобы скрыть/показать.

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> 

Javascript:

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]); 
}); 

Надеюсь, что это поможет.