链接

Question

我正在制作投资组合网站

  

http://malthestigaard.com/

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

点击投资组合案例会打开一个灯箱，该灯箱会显示该案例的较大图片，并在下方进行说明。我正在寻找一种在该灯箱中添加链接的方法，访问者可以关注到包含更多信息的其他页面。最好的情况是，访问者只需点击下面的文字即可关注该链接。

事实上，灯箱本身已经是某种锚，所以我当然不能在锚内放置另一个锚。我也尝试将它变成一个带有锚点的对象，但后来我在论坛上读到锚点根本不能包含交互元素。

我知道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

您可以将Ancor标记放在＆＃34;数据标题＆＃34;属性。

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