html - 如何使用 magnific 弹出窗口在画廊的网页上包含标题？

Question

我正在尝试在图片下方的实际网页上添加标题，同时使用宏伟的弹出式画廊。使用 div 和类标题或旋转木马标题，如果画廊中的图像不一张一张地垂直堆叠，我将无法这样做。我该怎么做？

    <a href="img/base/ggg.PNG" title="HELLO" class="chicken">
  <img src="img/base/pop.PNG" alt="remember your alt tag" />
</a>

$(document).ready(function() {
      $('.chicken').magnificPopup({ 
         type: 'image',
         gallery:{enabled:true}
         // other options here
         // end each line (except the last) with a comma
      });
   });

js fiddle :https://jsfiddle.net/sb4btox7

Answer 1

好吧，你看看这个，我稍微调整了一下你的功能:

$(document).ready(function() {
    $('.chicken').magnificPopup({
        type: 'image',
        gallery: {
            enabled: true
        }
    }).each(function() { // Here I chain a loop to each .chicken element
        // Now we append the title inside the .chicken element
        $(this).append('<div class="title">' + $(this).attr('title') + '</div>');
    });
});

CSS:

.chicken {
    display: inline-block;
    width: 20%;
    margin: 10px;
}

.chicken img {
    width: 100%; /* set it to 100% of it's parents width */
    vertical-align: bottom;
}

.chicken .title {
    text-align: center;
}

这是DEMO .

现在您也可以像这样直接将标题添加到 html 中:

<a href="http://placehold.it/350x250" title="The Title A" class="chicken">
  <img src="http://placehold.it/350x250" />
  <div class="title">The Title A</div>
</a>