Я создаю веб-сайт портфолио
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>