I'm making a portfolio website
using Cube Portfolio - Responsive jQuery Grid Plugin, version: 3.8.0 to show my individual portfolio cases.
Clicking a portfolio case opens a lightbox that show a larger image of that case with a description below. I'm looking for a way to add a link in that lightbox, that visitors can follow to another page with more info. Best case scenario would be if visitors could just click the text below to follow the link.
The thing is that the lightbox in itself already is an anchor somehow, so of course I cannot put another anchor inside an anchor. I also tried by making it into an object with an anchor inside it, but then I later read on the forum that anchors can't contain interactive elements at all.
I know html and css to get around, but am new to JavaScript and jQuery, so that's why I have been trying to find solutions based on html/css, but I fear I have to dive into the CubePortfolio script and add to that, which seems like a very big bite for me to chew through.
How do you recommend that I proceed?
The 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>
The script:
<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>
You can put an Ancor tag inside the "data-title" attribute.
<a href="images/portfolio-case-22.gif" class="cbp-caption cbp-lightbox" data-title="<a href='http://localhost/'>Click Here</a>">
.........
</a>