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>

如何使用大胆的弹出窗口在图库的网页上添加标题？

1 个答案: