I have this problem trying to have more than one gallery in one single page. I am using Twitter BOOTSTRAP for the page and blueimp Gallery for the images. The fact is when I duplicate (for testing purposes) the working gallery, I end up with one gallery (out of 3) showing the lightbox interface, but the image dimmed down almost to black, and the rest of the 2 galleries not having lightbox action at all.
This is the code I am using (of course I have the call to the styling in the header, and the call to the Js at the bottom of the page):
<section id="Section-2">
<div class="container">
<br />
<div class="row">
<div class="span12 page-header text-center">
<h3>DISEÑO</h3>
<p class="lead">
</div>
<h3 class="text-center"> Gráfica Vehicular</h3>
<h4 class="text-center">Hacer clic sobre las imágenes para ampliarlas</h4>
</div>
<div class="row">
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div><!--/row blueimp initialize -->
<div id="links">
<a href="images/carabela-grafica.jpg" title="Banana">
<img src="images/thumbnails/carabela-graficath.png" alt="Banana">
</a>
<a href="images/Estanciera.jpg" title="Apple">
<img src="images/thumbnails/Estancierath.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/fiat.jpg" title="Banana">
<img src="images/thumbnails/fiatth.png" alt="Banana">
</a>
<a href="images/fiat600.jpg" title="Apple">
<img src="images/thumbnails/fiat600th.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/carabela-grafica.jpg" title="Banana">
<img src="images/thumbnails/carabela-graficath.png" alt="Banana">
</a>
<a href="images/Estanciera.jpg" title="Apple">
<img src="images/thumbnails/Estancierath.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/fiat.jpg" title="Banana">
<img src="images/thumbnails/fiatth.png" alt="Banana">
</a>
<a href="images/fiat600.jpg" title="Apple">
<img src="images/thumbnails/fiat600th.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/carabela-grafica.jpg" title="Banana">
<img src="images/thumbnails/carabela-graficath.png" alt="Banana">
</a>
<a href="images/Estanciera.jpg" title="Apple">
<img src="images/thumbnails/Estancierath.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/fiat.jpg" title="Banana">
<img src="images/thumbnails/fiatth.png" alt="Banana">
</a>
<a href="images/fiat600.jpg" title="Apple">
<img src="images/thumbnails/fiat600th.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/carabela-grafica.jpg" title="Banana">
<img src="images/thumbnails/carabela-graficath.png" alt="Banana">
</a>
<a href="images/Estanciera.jpg" title="Apple">
<img src="images/thumbnails/Estancierath.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/fiat.jpg" title="Banana">
<img src="images/thumbnails/fiatth.png" alt="Banana">
</a>
<a href="images/fiat600.jpg" title="Apple">
<img src="images/thumbnails/fiat600th.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
</div><!--/div blueimp-gallery -->
<script>
document.getElementById('links').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);
};
</script>
I would really appreciate help in this issue, I am on a deadline and can't make head or tail out of it!
Thanks in advance!
I think You also duplicating this line
<div id="links">
which is prohibited, and this makes script
document.getElementById('links').onclick = function (event)
fail for other galleries
You use blueimp.Gallery, so see https://github.com/blueimp/Gallery#container-ids-and-link-grouping
The way I went about having two image galleries on a single page is like so:
(note: I'm using HAML for terseness, but you can convert it to HTML here: http://htmltohaml.com/)
In your HAML:
/ first gallery
#citizen-kane-gallery.blueimp-gallery.blueimp-gallery-controls
.slides
%h3.title
%a.prev ‹
%a.next ›
%a.close ×
%a.play-pause
%ol.indicator
#citizen-kane-images
%a{href: "/images/kane/rose-bud.png", title: "Rose Bud"}
%img{alt: "Rose Bud", src: "/images/kane/rose-bud-thumb.png"}
%a{href: "/images/kane/xanadu.png", title: "Xanadu"}
%img{alt: "Xanadu", src: "/images/kane/xanadu-thumb.png"}
%a{href: "/images/kane/speech.png", title: "Speech"}
%img{alt: "Speech", src: "/images/kane/speech-thumb.png"}
/ second gallery
#the-third-man-gallery.blueimp-gallery.blueimp-gallery-controls
.slides
%h3.title
%a.prev ‹
%a.next ›
%a.close ×
%a.play-pause
%ol.indicator
#the-third-man-images
%a{href: "/images/third-man/ferris-wheel.jpg", title: "Ferris Wheel"}
%img{alt: "Ferris Wheel", src: "/images/third-man/ferris-wheel-thumb.jpg"}
%a{href: "/images/third-man/orson.png", title: "Orson Welles"}
%img{alt: "Orson Welles", src: "/images/third-man/orson-thumb.png"}
%a{href: "/images/third-man/joseph.jpg", title: "Joseph Cotten"}
%img{alt: "Joseph Cotton", src: "/images/third-man/joseph-thumb.jpg"}
In your JavaScript:
// first gallery
document.getElementById('citizen-kane-images').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement;
var link = target.src ? target.parentNode : target;
var options = {
index: link,
event: event,
container : '#citizen-kane-gallery' // USE THE CONTAINER OPTION
};
var links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
// second gallery
document.getElementById('the-third-man-images').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement;
var link = target.src ? target.parentNode : target;
var options = {
index : link,
event : event,
container : '#the-third-man-gallery' // USE THE CONTAINER OPTION
};
var links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
I also found some info here: https://github.com/blueimp/Gallery/issues/10
By following this pattern, I would assume it's possible to add as many galleries as needed.
Hope this helps
As said in the documentation, you just need to add your second gallery with a different id and mention it in the data-gallery as this:
<div id="fruits">
<a href="images/banana.jpg" title="Banana" data-gallery="#blueimp-gallery-fruits">
<img src="images/thumbnails/banana.jpg" alt="Banana">
</a>
<a href="images/apple.jpg" title="Apple" data-gallery="#blueimp-gallery-fruits">
<img src="images/thumbnails/apple.jpg" alt="Apple">
</a>
</div>
<div id="vegetables">
<a href="images/tomato.jpg" title="Tomato" data-gallery="#blueimp-gallery-vegetables">
<img src="images/thumbnails/tomato.jpg" alt="Tomato">
</a>
<a href="images/potatoe.jpg" title="Potatoe" data-gallery="#blueimp-gallery-vegetables">
<img src="images/thumbnails/potatoe.jpg" alt="Potatoe">
</a>
</div>
Related
Currently i am building a storytelling website, where the client can iterate through several videos. However, there is also a page with chapters on the website. So when the client clicks on the next or previous button, the chapters should be lighten up on the chapter he currently is on.
At the moment i build a click counter, so the counter is counting up, when he clicked on next and counting down, when clicked on previous. I have 11 chapters, so 11 video's. I am checking the chapters by index. They are going from 0 to 11. When the client hits the next button, he's going to the next video and the click counter goes up with one.
At the moment i have trouble to connect this click counter to the current index of the chapter. So if the click counter goes to two for instance, the background of only chapter 2 (index 2) should be lighten up.
At the moment i have this:
<a href="#" class="vorige prev-rew button-sound">
<svg>icon</svg>
</a>
<a href="#" class="next prev-rew button-sound">
<svg> icon</svg>
</a>
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1">
<p>1</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-2">
<p>2</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-3">
<p>3</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-4">
<p>4</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-5">
<p>5</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-6">
<p>6</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-7">
<p>7</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-8">
<p>8</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-9">
<p>9</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-10">
<p>10</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-11">
<p>11</p>
</div>
</a>
</div>
// Anchorpoint loop
var set = $(".anchor-point");
var length = set.length;
var ViewportCount = 1;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
console.log('klikkert next');
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
console.log('klikkert vorige');
ViewportCount = ViewportCount - 1;
}
set.each(function(index) {
index = ViewportCount;
console.log(index);
console.log(ViewportCount);
if(index == ViewportCount){
// Change the background-color of the number, connected to the index. So
current chapter will light up
}
});
});
To do what you require you can use the eq() method to directly select the element in the collection without a loop:
var set = $(".anchor-point");
var ViewportCount = 0;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
ViewportCount = ViewportCount - 1;
}
set.removeClass('active').eq(ViewportCount % set.length).addClass('active');
});
.active { background-color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1 active"><p>1</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-2"><p>2</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-3"><p>3</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-4"><p>4</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-5"><p>5</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-6"><p>6</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-7"><p>7</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-8"><p>8</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-9"><p>9</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-10"><p>10</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-11"><p>11</p></div>
</a>
</div>
However, you can avoid the need for the counter variable and instead move the active class based on its current position in the DOM. The <a> elements wrapping the div can also be removed as it's invalid HTML, it makes the JS more straightforward and it's also not necessary in this case
$('.prev-rew').on("click", function() {
let $current = $('.active');
let $target = $current[$(this).data('action')]();
if ($target.length) {
$current.removeClass('active');
$target.addClass('active');
}
});
.active {
background-color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<div class="anchor-point chapter-1 active"><p>1</p></div>
<div class="anchor-point chapter-2"><p>2</p></div>
<div class="anchor-point chapter-3"><p>3</p></div>
<div class="anchor-point chapter-4"><p>4</p></div>
<div class="anchor-point chapter-5"><p>5</p></div>
<div class="anchor-point chapter-6"><p>6</p></div>
<div class="anchor-point chapter-7"><p>7</p></div>
<div class="anchor-point chapter-8"><p>8</p></div>
<div class="anchor-point chapter-9"><p>9</p></div>
<div class="anchor-point chapter-10"><p>10</p></div>
<div class="anchor-point chapter-11"><p>11</p></div>
</div>
I would like to ask you if there is any javascript method to grab link title and use it or change it to data-caption in fancybox 3? The only condition is if the link title exists.
This is what I have now:
<a data-fancybox="gallery" title="some-title" href="big_1.jpg">
<img src="small_1.jpg">
</a>
and I would like to somehow change it to this:
<a data-fancybox="gallery" data-caption="some-title" href="big_1.jpg">
<img src="small_1.jpg">
</a>
Thanks for all help.
use some JS code to do
jQuery(function(){
$('a[data-fancybox="gallery"]').each(function(){
if($(this).attr('title') != '' ){
$(this).attr('data-caption', $(this).attr('title'));
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-fancybox="gallery" title="some-title" href="big_1.jpg">
<img src="small_1.jpg">
</a>
<a data-fancybox="gallery" title="title" href="big_1.jpg">
<img src="small_1.jpg">
</a>
<a data-fancybox="gallery" href="big_1.jpg">
<img src="small_1.jpg">
</a>
can I hide, jump or delete images not found
in balise
<a href="...">
and
<img src="...">
I already use :
$("img").error(function(){ $(this).hide(); });
images not found are hidden but when i'm in my gallery i can see a white screen.
HERE IS MY GALLERY EXAMPLE
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt=""/>
</a>
How about removing the a:-
$("img").error(function() {
$(this).parent().remove();
});
$("a.fancyboxgallery").fancybox();
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt="" />
</a>
My guess is that the empty space is coming from the empty a tag, so you might want to select the parent instead. So instead of $(this).hide(); try $(this).parent().hide();.
Additionally, by using this method, you might want a more specific selector than just $('img'). So maybe try $('.fancyboxthumbnailsgallery').error(function(){ $(this).parent().hide(); });.
To hide all images, I would check for the the class and handle the hiding differently, like so:
$('img').error(function(){
if($(this).hasClass('fancyboxthumbnailsgallery')){
$(this).parent().hide();
} else {
$(this).hide();
}
});
jQuery().parent()
I need help to render 6 images retrieved from mysql database in mvc razor view. Images 1 and 6 are put in their separate divs called "item". Images 2,3,4 and 5 are all put in one div called "item -item-small" Below is the original rendering:
<div class="owl-photos">
<a href="post.html" class="item-photo">
<img src="images/photos/image-1.jpg" alt="" />image1
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-2.jpg" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-3.jpg" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-4.jpg" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-5.jpg" alt="" />image5
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-6.jpg" alt="" />image6
</a>
</div>
Below is what I want to achieve:
<div class ="owl-photos">
<div class="item">
<a href="post.html" class="item-photo">
<img src="images/photos/image-1.jpg" alt="" />image1
</a>
</div>
<div class="item item-small">
<a href="post.html" class="item-photo">
<img src="images/photos/image-2.jpg" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-3.jpg" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-4.jpg" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-5.jpg" alt="" />image5
</a>
</div>
<div class="item">
<a href="post.html" class="item-photo">
<img src="images/photos/image-6.jpg" alt="" />image6
</a>
</div>
</div>
Any help in using JQuery will be appreciated I do not know how to start this. I can add classes to first element but this is a big challenge
Attempted with the code below:
$(".owl-photos>div:nth-child(1n)").before("<div class="item">");
$(".owl-photos>div:nth-child(1n)").after("</div><div class="item item-small">");
$(".owl-photos>div:nth-child(1n)").after("<div class="item item-small">");
$(".owl-photos>div:nth-child(5n)").after("</div><div class="item ">");
$(".owl-photos>div:nth-child(6n)").after("</div>");
$(function () {
var $result = $('<div class="owl-photos"></div>');
var length = $('.owl-photos a').length;
$('.owl-photos a').each(function (key, item) {
if (key == 0 || key == length - 1) {
var $div = $('<div class="item"></div>').append(item);
$result.append($div);
} else {
var $small = $result.find('.item-small');
console.log($small);
if (!$small.length) {
var $div = $('<div class="item item-small"></div>').append(item);
$result.append($div);
} else {
$small.append(item);
}
}
});
$('.owl-photos').html($result.html());
});
https://jsfiddle.net/atw4gwrr/
You can create elements with JavaScript, append the specific elements to them, then place the new elements into .owl-photos. By appending the <a> elements to the newly made <div>s they are moved from their previous place, that's why you don't see them duplicate.
Below, I get the list of childs, then group them as such:
The .first() child is placed in a <div class="item">, then appended
The :not(:first-child) and :not(:last-child) elements are placed in <div class="item item-small">, then appended
The .last() child is placed in a <div class="item">, then appended
$(function(){
var $photos = $('.owl-photos'),
$childs = $photos.children(),
$itemWrapper = $(document.createElement('div')).attr('class','item'),
$itemSmallWrapper = $(document.createElement('div')).attr('class','item item-small');
$photos.append(
$itemWrapper.clone().append($childs.first()),
$itemSmallWrapper.clone().append($childs.filter(':not(:first-child), :not(:last-child)')),
$itemWrapper.clone().append($childs.last())
);
})
.item { border: 3px solid green }
.item.item-small { border: 3px solid blue }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="owl-photos">
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=1" alt="" />image1
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=2" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=3" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=4" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=5" alt="" />image5
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=6" alt="" />image6
</a>
</div>
I am trying to integrate the Blueimp image gallery within a website with bootstrap and the lightbox script just doesn't start when clicking on a thumbnail. Instead, the linked image is shown in a new opened page, like it's supposed to do by default. Here is the code:
in the head goes the css:
HEAD:
<link rel="stylesheet" type="text/css" href="js/blueimp_gallery/css/blueimp- gallery.min.css">
<link rel="stylesheet" type="text/css" href="/js/blueimp_gallery/css/blueimp-gallery-indicator.css">
BODY:
<div class="dgallery2 row">
<div class="content">
<div class="bg effect2">
<div id="links">
<a href="images/portfolio/1.jpg" title="Banana" data-gallery>
<img src="images/portfolio/thumbnail.jpg" alt="Banana">
</a>
<a href="images/portfolio/2.jpg" title="Apple" data-gallery>
<img src="images/portfolio/thumbnail.jpg" alt="Apple">
</a>
<a href="images/portfolio/3.jpg" title="Orange" data-gallery>
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
<a href="images/portfolio/3.jpg" title="Orange" data-gallery>
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
<a href="images/portfolio/3.jpg" title="Orange" data-gallery>
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
<a href="images/portfolio/3.jpg" title="Orange">
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
<a href="images/portfolio/3.jpg" title="Orange" data-gallery>
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
<a href="images/portfolio/3.jpg" title="Orange">
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
<a href="images/portfolio/3.jpg" title="Orange" data-gallery >
<img src="images/portfolio/thumbnail.jpg" alt="Orange">
</a>
</div>
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</div>
</div>
</div>
and then the scripts at the bottom of body:
<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-helper.js"></script>
<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-gallery.min.js"></script>
<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-gallery-fullscreen.js"></script>
<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-gallery-indicator.js"></script>
<script type="text/javascript" src="/js/blueimp_gallery/js/jquery.blueimp-gallery.min.js"></script>
<script>
document.getElementById('links').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);
};
</script>
And the lightbox just won't start. Any ideas? Thank you very much!
So the code was correct and all, only that there were some errors when loading some other Javascript scripts that I located through Error Console in the Developper panel...so I sorted those out and now blueimp works like a charm and it's responsive too :D Thanks anyway!