Blueimp Gallery: external link to carousel images
I created a carousel with the Blueimp Gallery plugin ( https://github.com/blueimp/Gallery ), it works, but when I click on the image, I want to turn off the controls on the controls and instead use the default link behavior on another web page site.
I need the indicators to be always visible. Is it possible to use the "a" value of the href tag to navigate to another page?
HTML:
<div id="images-slider">
<a href="http://www.google.fr" data-link="http://lorempixel.com/878/330/nature/9/">
<img src="http://lorempixel.com/878/330/nature/9/" alt="">
</a>
<a href="http://www.google.fr" data-link="http://lorempixel.com/878/330/nature/4/">
<img src="http://lorempixel.com/878/330/nature/4/" alt="">
</a>
<a href="http://www.google.fr" data-link="http://lorempixel.com/878/330/nature/5/">
<img src="http://lorempixel.com/878/330/nature/5/" alt="">
</a>
</div>
JS:
blueimp.Gallery(
document.getElementById('images-slider').getElementsByTagName('a'),
{
container: '#slider',
carousel: true,
thumbnailIndicators: false,
urlProperty: 'link'
}
);
here's a fiddle: http://jsfiddle.net/0hb7gdeq/1/
THH
source to share
I don't think this is optimal anyway, but I got it to work by wrapping another tag around innerHTML like this.
blueimp.Gallery(
document.getElementById('images-slider').getElementsByTagName('a'),
{
container: '#slider',
carousel: true,
thumbnailIndicators: false,
urlProperty: 'link',
onslidecomplete: function (index, slide) {
var href = this.list[index].getAttribute('href');
slide.innerHTML = "<a href='"+href+"'>" + slide.innerHTML + "</a>";
}
);
Css also needs tweaking after this hack
.blueimp-gallery>.slides .slide .slide-content {
position: relative;
float: left;
height: 100%;
text-align: center;
}
source to share
Thanks oBo, I extended your code to work with the title attribute that I need in my slides with some jQuery to find the title attribute.
var title;
// [...]
onslidecomplete: function(index, slide) {
title = $(slide).find("img").attr("title");
var href = this.list[index].getAttribute('href');
slide.innerHTML = "<a href='" + href + "' title='"+title+"'>" + slide.innerHTML + "</a>";
}
Complete code:
Html
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery-carousel-home" class="my-blueimp-gallery blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls">
<div class="slides"></div>
<div class="menu-tile-text">
<h4 class="title"></h4>
<span class="icon-bar"></span>
</div>
<a class="play-pause"></a>
<ol style="bottom: 12px;" class="indicator"></ol>
</div>
<div id="links-home" style="display:none;">
<a href="#/somesite" data-link="assets/img/640x360.jpg" title="banana">
<img src="assets/img/640x360.jpg" alt="banana">
</a>
<a href="#/site" data-link="assets/img/640x360.jpg" title="banana">
<img src="assets/img/640x360.jpg" alt="banana">
</a>
</div>
Js
$(document).ready(function() {
//BlueImp Carousel
document.getElementById('links-home').onclick = function(event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {
index: link,
event: event
},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
var title;
blueimp.Gallery(
document.getElementById('links-home').getElementsByTagName('a'), {
container: '#blueimp-gallery-carousel-home',
carousel: true,
thumbnailIndicators: false,
transitionSpeed: 400,
slideshowInterval: 8000,
clearSlides: true,
titleElement: 'h4',
urlProperty: 'link',
onslidecomplete: function(index, slide) {
title = $(slide).find("img").attr("title");
var href = this.list[index].getAttribute('href');
slide.innerHTML = "<a href='" + href + "' title='" + title + "'>" + slide.innerHTML + "</a>";
}
}
);
});
source to share