link 里面的 link

Question

我正在制作一个投资组合网站

http://malthestigaard.com/

使用 Cube Portfolio - 响应式 jQuery 网格插件，版本：3.8.0 来显示我的个人投资组合案例。

单击组合案例会打开一个灯箱，其中会显示该案例的大图以及下方的说明。我正在寻找一种在该灯箱中添加 link 的方法，访问者可以通过该方法访问包含更多信息的另一个页面。最好的情况是访问者只需单击下面的文本即可跟随 link.

问题是灯箱本身已经是一个锚点，所以我当然不能在一个锚点内放置另一个锚点。我也试过把它做成一个里面有锚点的对象，但后来我在论坛上看到锚点根本不能包含交互元素。

我知道 html 和 css 可以四处走动，但对 JavaScript 和 jQuery 是新手，所以这就是为什么我一直试图找到基于以下内容的解决方案html/css，但我担心我必须深入研究 CubePortfolio 脚本并添加它，这对我来说似乎是一个很大的问题。

你建议我如何继续？

html:

<div class="wrapper">
    <section id="work">
        <div id="js-filters-masonry" class="cbp-l-filters-alignLeft">
            <div data-filter=".web-design" class="cbp-filter-item"> Web Design
                <div class="cbp-filter-counter"></div>
            </div>
        </div>
        <div id="js-grid-masonry" class="cbp">
            <div class="cbp-item web-design">
                <a href="images/portfolio-case-01.jpg" class="cbp-caption cbp-lightbox" data-title="Personal Trainer Jonas Roberts<br>Mobile and Desktop Website">
                    <div class="cbp-caption-defaultWrap"> <img src="images/portfolio-case-01-thumbnail.jpg" alt="portfolio Malthe Stigaard"></div>
                    <div class="cbp-caption-activeWrap">
                        <div class="cbp-l-caption-alignCenter">
                            <div class="cbp-l-caption-body">
                                <div class="cbp-l-caption-title">Personal Trainer Jonas Roberts</div>
                                <div class="cbp-l-caption-desc">Mobile and Desktop Website</div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </section>
</div>

脚本：

    <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
    <script>
        $('a[href^="#"]').on('click', function(event) {
            var target = $(this.getAttribute('href'));
            if (target.length) {
                event.preventDefault();
                $('html, body').stop().animate({
                    scrollTop: target.offset().top
                }, 1000);
            }
        });
        (function($, window, document, undefined) {
            'use strict';
            $('#js-grid-tabs').cubeportfolio({
                filters: '#js-filters-tabs',
                defaultFilter: '.tools',
                animationType: 'fadeOut',
                gridAdjustment: 'default',
                displayType: 'default',
                caption: '',
            });
        })(jQuery, window, document);
        (function($, window, document, undefined) {
            'use strict';
            $('#js-grid-masonry').cubeportfolio({
                filters: '#js-filters-masonry',
                layoutMode: 'grid',
                defaultFilter: '*',
                animationType: 'slideDelay',
                gapHorizontal: 20,
                gapVertical: 20,
                gridAdjustment: 'responsive',
                mediaQueries: [{
                    width: 1500,
                    cols: 4
                }, {
                    width: 1100,
                    cols: 4
                }, {
                    width: 800,
                    cols: 3
                }, {
                    width: 480,
                    cols: 2,
                    options: {
                        caption: ''
                    }
                }, {
                    width: 320,
                    cols: 1,
                    options: {
                        caption: ''
                    }
                }],
                caption: 'overlayBottomAlong',
                displayType: 'bottomToTop',
                displayTypeSpeed: 100,
                lightboxDelegate: '.cbp-lightbox',
                lightboxGallery: true,
                lightboxTitleSrc: 'data-title',
                lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',
            });
        })(jQuery, window, document);
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('#grid-container').cubeportfolio({});
        });
    </script>

Answer 1

您可以在 "data-title" 属性中放置一个锚标记。

<a href="images/portfolio-case-22.gif" class="cbp-caption cbp-lightbox" data-title="<a href='http://localhost/'>Click Here</a>">
                  .........
</a>

link 里面的 link

A link inside a link

html

javascript

anchor

jquery

lightbox