不确定什么是相关的或有多深的解释。我找到了一个很好的工作廊,来自" magnific-popups" 。
我可以让一切工作正常,但用户必须点击图库div
中的图片才能打开图库。
我希望来自其他div
的链接打开图库,但我无法在div
中添加图库body
div
包括链接。
我想过使用onclick
来引用驻留在我的 script.js 上的 js 函数,但我无法让它工作而且我不确定它是否正确。
我还考虑将链接上的href
设置为其中一张图片照片的id
,因此点击该链接可能会打开一张图库图片并导致图库打开。
无法完成这项工作。
我粘贴了一些代码,但我不知道我的问题是否可以理解(或希望简单回答!)
修改 (添加代码)
不确定如何格式化。这是我的index.html。我想要菜单弹出画廊,但我能得到的最好的是一个图标,从下面的第一个div中弹出一个画廊:
<nav>
<div class="row">
<img src="Resources/img/Pizza_Pi_Logo_Trans.gif" alt="Pizza Pi logo" class="logo">
<img src="Resources/img/Pizza_Pi_Logo_Trans.gif" alt="Pizza Pi logo" class="logo-black">
<div class="popup-gallery">
<a href="Resources/img/Pizza_Pi_Menu.png" title="The Cleaner"><img src="Resources/img/Pizza_Pi_Menu.png" width="75" height="75"></a>
<a href="Resources/img/Pizza_Pi_Menu2.png" title="The Cleaner"></a>
</div>
<ul class="main-nav js--main-nav">
<li><a href="#features">HOME</a></li>
<li><a href="#cities">PIZZAS</a></li>
<li><a href="#plans">SPECIALS</a></li>
<li><a href="#form">CONTACT</a></li>
<li><a href="#">MENU</a></li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</div>
</nav>
script.js文件包含:
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
}
}
});
编辑3:我想要菜单链接弹出画廊,但是如果我把它放了 div class =&#34; popup-gallery&#34;在菜单链接周围,它运行列表/导航显示。
答案 0 :(得分:0)
<li><a href="#features">HOME</a></li>
<li><a href="#cities">PIZZAS</a></li>
<li><a href="#plans">SPECIALS</a></li>
<li><a href="#Resources/img/Pizza_Pi_Menu.png">CONTACT</a></li>
<li class="popup-gallery"><a href="Resources/img/Pizza_Pi_Menu.png" Title="Menu">MENU</a></li></ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</div>
</nav>
<div class="popup-gallery">
<a href="Resources/img/Pizza_Pi_Menu2.png" title="Menu 2"></a>
</div>