如何从链接打开图库?

时间:2016-02-15 08:47:39

标签: html css

不确定什么是相关的或有多深的解释。我找到了一个很好的工作廊,来自" 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;在菜单链接周围,它运行列表/导航显示。

1 个答案:

答案 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>