如何解决如何通过编辑此现有代码向图片库添加标题?
我在网上找到了这个画廊,目前我有一些带有标题(class="project-category")和描述(class="project-name")预览的图像。当弹出窗口被激活时,图像的编号出现在右下角。我还希望图像描述 (class="project-name") 显示在弹出窗口中(在图像底部)。谁能帮我修改下面的代码来实现这个显示?
$('#portfolio').magnificPopup({
delegate: 'a',type: 'image',tLoading: 'Loading image #%curr%...',mainClass: 'mfp-img-mobile',gallery: {
enabled: true,navigateByImgClick: true,preload: [0,1]
},image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" />
<div id="portfolio">
<div class="container-fluid p-0">
<div class="row no-gutters">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="https://via.placeholder.com/500/FF0000/FFFFFF?text=Image%201">
<img class="img-fluid" src="https://via.placeholder.com/500/FF0000/FFFFFF?text=Image%201" alt="" />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Lorem ipsum</div>
<div class="project-name">Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aenean massa mauris,rutrum et erat nec,dapibus pretium enim. Nullam non felis ut tortor euismod mattis vel id libero. Duis eget justo rutrum elit aliquam vestibulum. Sed sem sem,pulvinar
et sapien eu,varius gravida dui.</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="https://via.placeholder.com/500/FF0000/FFFFFF?text=Image%202">
<img class="img-fluid" src="https://via.placeholder.com/500/FF00DD/FFFFFF?text=Image%202" alt="" />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Lorem ipsum</div>
<div>
<h6 class="project-name"> Lorem ipsum dolor sit amet,pulvinar et sapien eu,varius gravida dui.</h6>
</div>
</div>
</a>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。