I am trying to use owl carousel and echo.js for image carousel and and lazy loading.
Now the problem is only some of the images are loaded in the carousel. say 7 out of 10 is loading remaining 3 the echo js is not loading the image.
Why is this happening?
here is my code
<div id="brand-slider" class="owl-carousel brand-slider custom-carousel owl-theme">
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/univers.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/kelloggs.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/pampers.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/pepsico.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/p-g.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/vini.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/itc.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/nestle.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/cadbury.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/coco.jpg" src="assets/images/blank.gif" alt="">
</a>
</div><!--/.item-->
<div class="item">
<a href="#" class="image">
<img data-echo="assets/images/brands/kraft.jpg" src="assets/images/blank.jpg" alt="">
</a>
</div><!--/.item-->
</div><!-- /.owl-carousel #logo-slider -->
according to the docs here the default max of items is 5. So you need to set it to what you want. Like this
$(document).ready(function() {
$("#brand-slider").owlCarousel({
items : 10
});
});
Other examples of how to do this can be found here
I found the answer.
echo.init({
offset: 1000,
throttle: 250,
unload: false
});
we can use the offset parameter of the echo js to target the the images off the viewport.
Related
I have a gallery and images contains other images. So After click on image thubnail I want to see full size of thubnail image and other images which are not represent on gallery because they are just part of that main image. This images will be reached trough scrolling and will be shown in same window with main image.
Now i Have code like this(with one image after click on thubnail) :
<div class="col-3 thumb">
<a data-fancybox="gallery" href="1.jpg" class="fancybox" data-caption="Description 1">
<div class="hovereffect">
<img class="img-fluid" src="1.jpg" alt="">
<div class="overlay">
<h2>Tittle 1</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="2.jpg" class="fancybox" data-caption="Description 2">
<div class="hovereffect">
<img class="img-fluid" src="2.jpg" alt="">
<div class="overlay">
<h2>Tittle 2</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="3.jpg" data-caption="Description 3">
<div class="hovereffect">
<img class="img-fluid" src="3.jpg" alt="">
<div class="overlay">
<h2>Tittle 3</h2>
</div>
</div>
</a>
</div>
Update
Solve this with id:
<a data-fancybox="gallery" href="#img_1" class="fancybox">
<div style="display:none">
<div id="img_1"">
<div class="container">
<div class="row">
<div class="col-7" >
<a data-fancybox="gallery1" href="1.jpg" class="fancybox">
<img class="img-fluid" src="1.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
So, basically, you are asking for two way navigation (e.g., two dimensional), but I have never stumbled upon such script that would fully support that.
You can display additional images under the main image, but they will not have the same functionality (e.g., zooming/dragging/etc) or you can display them as inline elements (obviously, there would be no image-related functionality).
This is not my script. I just copy scripts and learn something of them so I can advance in HTML knowledge. This code it works only in a part. It shows ok by part of design, but when I press arrows it won't slide to new images
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-630px, 0px, 0px);"><div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="2" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='fallout/'" href="fallout/">
<img src="ASSETS/img/fallout.png">
<div title="Hacking is now possible without vision!" class="caption">Fallout Version</div>
</a>
<a id="green" onclick="location.href='blue/'" href="blue/">
<img src="http://i.imgur.com/57C9mln.png">
<div class="caption">GeekTyper Blue</div>
</a>
<a onclick="location.href='writer/'" href="writer/">
<img src="ASSETS/img/writer.png">
<div title="Hacking is now possible without vision!" class="caption">Writer</div>
</a>
<br><br>
<a style="color:white;padding:20px;" href="mailto:geektyper#outlook.com">Suggest a theme</a>
</div>
</div>
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a id="green" style="background:#bd0101;" onclick="location.href='tegnio/'" href="tegnio/">
<img src="ASSETS/img/main.png" title="Remembers your settings">
<div class="caption">Tegnio (Customizable)</div>
</a>
<a onclick="location.href='shield/'" href="shield/">
<img src="ASSETS/img/shield.png">
<div title="" class="caption">SHIELD Version</div>
</a>
<a id="green" onclick="location.href='scp/'" href="scp/">
<img src="http://i.imgur.com/bF2tc2V.jpg">
<div class="caption">SCP</div>
</a>
<a onclick="location.href='umbrella/'" href="umbrella/">
<img src="ASSETS/img/umbrella_thumb.png">
<div class="caption">Umbrella Corp</div>
</a>
<a onclick="location.href='aperture/'" href="aperture/">
<img src="http://i.imgur.com/Kb4o0uI.jpg">
<div class="caption">Aperture Science</div>
</a>
<a onclick="location.href='combine/'" href="combine/">
<img src="http://i.imgur.com/sxaHAoi.jpg">
<div class="caption">Combine</div>
</a>
<a onclick="location.href='blackmesa/'" href="blackmesa/">
<img src="http://i.imgur.com/T1pL2ib.jpg">
<div class="caption">Black Mesa</div>
</a>
<a onclick="location.href='plain/'" href="plain/">
<img src="http://i.imgur.com/RZG9ghe.png">
<div class="caption">Plain Terminal</div>
</a>
<a onclick="location.href='matrix/'" href="matrix/">
<img src="http://i.imgur.com/lHjKmQT.png">
<div class="caption">Matrix</div>
</a>
</div>
</div>
<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='dharma/'" href="dharma/">
<img src="http://i.imgur.com/QXMmQwN.png">
<div class="caption">Dharma</div>
</a>
<a onclick="location.href='tegnio/'" href="tegnio/">
<img src="http://i.imgur.com/DXB4jK7.png">
<div class="caption">Sliv</div>
</a>
<a onclick="location.href='pony/'" href="pony/">
<img src="http://i.imgur.com/bMwdWFF.png">
<div class="caption">MLP Typer</div>
</a>
<a onclick="location.href='word/'" href="word/">
<img src="http://i.imgur.com/8QWNpb4.png">
<div class="caption">Microsoft Word</div>
</a>
<a onclick="location.href='studio/'" href="studio/">
<img src="http://i.imgur.com/tTwtzQz.png">
<div class="caption">Visual Studio</div>
</a>
<a onclick="location.href='lolcode/'" href="lolcode/">
<img src="http://i.imgur.com/OzxnXFb.png">
<div class="caption">LOLCODE</div>
</a>
<a onclick="location.href='hey/'" href="hey/">
<img src="http://i.imgur.com/5Sqs6jO.png">
<div class="caption">HE-MAN</div>
</a>
<a onclick="location.href='braile/'" href="braile/">
<img src="http://i.imgur.com/vV4t9Jm.png">
<div title="" class="caption">Braile Version</div>
</a>
<a onclick="location.href='alien/'" href="alien/">
<img src="ASSETS/img/alien.png">
<div title="" class="caption">Alien Version</div>
</a>
</div>
</div>
<div class="swiper-slide" data-swiper-slide-index="2" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='fallout/'" href="fallout/">
<img src="ASSETS/img/fallout.png">
<div title="Hacking is now possible without vision!" class="caption">Fallout Version</div>
</a>
<a id="green" onclick="location.href='blue/'" href="blue/">
<img src="http://i.imgur.com/57C9mln.png">
<div class="caption">GeekTyper Blue</div>
</a>
<a onclick="location.href='writer/'" href="writer/">
<img src="ASSETS/img/writer.png">
<div title="Hacking is now possible without vision!" class="caption">Writer</div>
</a>
<br><br>
<a style="color:white;padding:20px;" href="mailto:geektyper#outlook.com">Suggest a theme</a>
</div>
</div>
<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a id="green" style="background:#bd0101;" onclick="location.href='tegnio/'" href="tegnio/">
<img src="ASSETS/img/main.png" title="Remembers your settings">
<div class="caption">Tegnio (Customizable)</div>
</a>
<a onclick="location.href='shield/'" href="shield/">
<img src="ASSETS/img/shield.png">
<div title="" class="caption">SHIELD Version</div>
</a>
<a id="green" onclick="location.href='scp/'" href="scp/">
<img src="http://i.imgur.com/bF2tc2V.jpg">
<div class="caption">SCP</div>
</a>
<a onclick="location.href='umbrella/'" href="umbrella/">
<img src="ASSETS/img/umbrella_thumb.png">
<div class="caption">Umbrella Corp</div>
</a>
<a onclick="location.href='aperture/'" href="aperture/">
<img src="http://i.imgur.com/Kb4o0uI.jpg">
<div class="caption">Aperture Science</div>
</a>
<a onclick="location.href='combine/'" href="combine/">
<img src="http://i.imgur.com/sxaHAoi.jpg">
<div class="caption">Combine</div>
</a>
<a onclick="location.href='blackmesa/'" href="blackmesa/">
<img src="http://i.imgur.com/T1pL2ib.jpg">
<div class="caption">Black Mesa</div>
</a>
<a onclick="location.href='plain/'" href="plain/">
<img src="http://i.imgur.com/RZG9ghe.png">
<div class="caption">Plain Terminal</div>
</a>
<a onclick="location.href='matrix/'" href="matrix/">
<img src="http://i.imgur.com/lHjKmQT.png">
<div class="caption">Matrix</div>
</a>
</div>
</div></div>
<div class="swiper-pagination swiper-pagination-clickable"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
this is script
<script data-rocketsrc="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop: true,
spaceBetween: 30
});
</script>
Always check the console!
[F12] on the keyboard
When you have errors, look for 404 (Not Found) on .js files first.
Then, you'll probaly see errors like Swiper is not defined dissapear too.
About ERR_BLOCKED_BY_CLIENT, this is due to the use of Ad Block. It isn't due to your code.
I have a number of links with various data attributes assigned to them, and am trying to grab the content of data-short-description attribute when the link is clicked. The content of data-short-description would then be set into the .description div. This process would be repeated each time a different link is clicked, replacing the content inside .description.
I am able to hack JS but not fluent enough to write from scratch, so if somebody could help me using a mixture of (I assume) .data(),.onclick() etc that would be great.
A simplified version of my code:
HTML
<div id="container">
<div class="thumbnails">
<figure class="thumbnail">
<a href="#" data-short-description="DESCRIPTION 1 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a href="#" data-short-description="DESCRIPTION 2 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a href="#" data-short-description="DESCRIPTION 3 HERE!">
<img src="#">
</a>
</figure>
</div>
</div>
<div class="description">
data-short-description to go here upon clicking link.
</div>
Since you tagged your question with jQuery, I guess it's fine for me to use it.
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('.thumbnail a').click(function() {
$('.description').html($(this).attr('data-short-description'));
});
});
</script>
But, as alou mentioned, you could provide a class for the links and give the target div an own id. I used class="description-link" and id="description", so the whole thing looks like this:
<div id="container">
<div class="thumbnails">
<figure class="thumbnail">
<a class="description-link" id="default-description" href="#" data-short-description="DESCRIPTION 1 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 2 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 3 HERE!">
<img src="#">
</a>
</figure>
</div>
</div>
<div id="description">
data-short-description to go here upon clicking link.
</div>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
// fill in default description on page load
$('.description').html($('#default-description').attr('data-short-description'));
// change description when a link is clicked
$('.description-link').click(function() {
$('#description').html($(this).attr('data-short-description'));
});
});
</script>
This should do it
$('.thumbnail a').on('click', function(evt){
evt.preventDefault(); //dont do default anchor stuff
var description = $(this).data('short-description'); //get the text
$('.description').html(description);
});
However it would be better to use a generic class for the specific set of links, like descriptionlink or something and use this to trigger the event $('.descriptionlink').on('click'... and an id for the target (maybe the same as the class, #description )
Other than that should be fine.
A huge thank you to #hexaholic for the following answer. Brilliant!
HTML
<div class="container">
<div class="thumbnails">
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 1 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 2 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 3 HERE!">
<img src="#">
</a>
</figure>
</div>
</div>
<div class="description">
data-short-description to go here upon clicking link.
</div>
<div class="container">
<div class="thumbnails">
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 1 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 2 HERE!">
<img src="#">
</a>
</figure>
<figure class="thumbnail">
<a class="description-link" href="#" data-short-description="DESCRIPTION 3 HERE!">
<img src="#">
</a>
</figure>
</div>
</div>
<div class="description">
data-short-description to go here upon clicking link.
</div>
JS
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
// updates a description box with the value of the given link
function updateDescription(link) {
// find the parent container
var parentContainer = link.closest('.container');
// the description box comes right after the container
var targetDiv = parentContainer.next();
//finally, update the content
targetDiv.html(link.attr('data-short-description'));
};
// fill in default description for each container
$('.container').each(function() {
var firstLink = $(this).find('.description-link').first();
updateDescription(firstLink);
});
// change description when a link is clicked
$('.description-link').click(function() {
// call the update function
updateDescription($(this));
});
});
</script>
I have a jQuery slider that I am trying to repeat on the page nearly 20 times. If I have just one of the sliders, it works great! However, I need help figuring out what is wrong with it that makes it break if there are more more the initial set of sliders. If I can create solve this problem dynamically that would be optimal, so that an indefinite number of sliders can be added to the page. Code below:
jQuery:
<script type="text/javascript">
// Call plugin if you put in head if not not require DOMContentLoaded
document.addEventListener('DOMContentLoaded',function(){
new boxSlider(document.querySelector('#slide-one'),{
delay: '1000', // ms
effect: 'ease-in-out'
});
new boxSlider(document.querySelector('#slide-two'),{
delay: '2000', // ms
effect: 'ease'
});
new boxSlider(document.querySelector('#slide-three'),{
delay: '500', // ms
effect: 'linear'
});
});
</script>
HTML:
<div id="row1mini">
<section id="slide-one" class="slide">
<article class="slide-inner">
<figure>
<img src="http://ep.yimg.com/ay/stylinonline/superman-vintage-logo-3-4-raglan-t-shirt-sheer-4.jpg" alt=""/>
<figcaption>The Underground</figcaption>
</figure>
<figure>
<img src="https://s7.jcrew.com/is/image/jcrew/78151_WW0699?$pdp_fs418$" alt=""/>
<figcaption>The city</figcaption>
</figure>
<figure>
<img src="http://www.royalrobbins.co.uk/images/coolmesh-baja-l-s-shirt-soapstone-p130-119_zoom.jpg" alt=""/>
<figcaption>The map</figcaption>
</figure>
</article>
<a href="#" class="btn right" >></a>
<a href="#" class="btn left" ><</a>
</section>
<section id="slide-two" class="slide">
<article class="slide-inner">
<figure>
<img src="http://www.patagonia.com/tsimages/55005_579.fpx?wid=1000&hei=1000&ftr=8&effect=dropshadow,0x000000,10,8,120,8&cvt=jpeg" alt=""/>
<figcaption>The Underground</figcaption>
</figure>
<figure>
<img src="http://www.peterglenn.com/sites/default/files/imagecache/product_1000x1000/product_images_new/70288_13_BRT_BLUE_LG.jpg" alt=""/>
<figcaption>The city</figcaption>
</figure>
<figure>
<img src="http://www.oldnavy.com/products/res/thumbimg/fleece-pants-for-baby-tangelo.jpg" alt=""/>
<figcaption>The map</figcaption>
</figure>
</article>
<a href="#" class="btn right" >></a>
<a href="#" class="btn left" ><</a>
</section>
<section id="slide-three" class="slide">
<article class="slide-inner">
<figure>
<img src="http://www.photo-dictionary.com/photofiles/list/2517/3301gym_shoes.jpg" alt=""/>
<figcaption>The Underground</figcaption>
</figure>
<figure>
<img src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Mens'_ballroom_shoes,_Eurodance_CZ.jpg" alt=""/>
<figcaption>The city</figcaption>
</figure>
<figure>
<img src="http://www.dunklowbox.com/images/dunks/Reebok-Hello-Kitty-Travel-PT-20-INT-White-Red-RBK-Brass.jpg" alt=""/>
<figcaption>The map</figcaption>
</figure>
</article>
<a href="#" class="btn right" >></a>
<a href="#" class="btn left" ><</a>
</section>
</div>
HERE I DUPLICATE THE ABOVE HTML, CAUSING THE SLIDER TO BREAK
<div id="row1mini">
<section id="slide-one" class="slide">
<article class="slide-inner">
<figure>
<img src="http://ep.yimg.com/ay/stylinonline/superman-vintage-logo-3-4-raglan-t-shirt-sheer-4.jpg" alt=""/>
<figcaption>The Underground</figcaption>
</figure>
<figure>
<img src="https://s7.jcrew.com/is/image/jcrew/78151_WW0699?$pdp_fs418$" alt=""/>
<figcaption>The city</figcaption>
</figure>
<figure>
<img src="http://www.royalrobbins.co.uk/images/coolmesh-baja-l-s-shirt-soapstone-p130-119_zoom.jpg" alt=""/>
<figcaption>The map</figcaption>
</figure>
</article>
<a href="#" class="btn right" >></a>
<a href="#" class="btn left" ><</a>
</section>
<section id="slide-two" class="slide">
<article class="slide-inner">
<figure>
<img src="http://www.patagonia.com/tsimages/55005_579.fpx?wid=1000&hei=1000&ftr=8&effect=dropshadow,0x000000,10,8,120,8&cvt=jpeg" alt=""/>
<figcaption>The Underground</figcaption>
</figure>
<figure>
<img src="http://www.peterglenn.com/sites/default/files/imagecache/product_1000x1000/product_images_new/70288_13_BRT_BLUE_LG.jpg" alt=""/>
<figcaption>The city</figcaption>
</figure>
<figure>
<img src="http://www.oldnavy.com/products/res/thumbimg/fleece-pants-for-baby-tangelo.jpg" alt=""/>
<figcaption>The map</figcaption>
</figure>
</article>
<a href="#" class="btn right" >></a>
<a href="#" class="btn left" ><</a>
</section>
<section id="slide-three" class="slide">
<article class="slide-inner">
<figure>
<img src="http://www.photo-dictionary.com/photofiles/list/2517/3301gym_shoes.jpg" alt=""/>
<figcaption>The Underground</figcaption>
</figure>
<figure>
<img src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Mens'_ballroom_shoes,_Eurodance_CZ.jpg" alt=""/>
<figcaption>The city</figcaption>
</figure>
<figure>
<img src="http://www.dunklowbox.com/images/dunks/Reebok-Hello-Kitty-Travel-PT-20-INT-White-Red-RBK-Brass.jpg" alt=""/>
<figcaption>The map</figcaption>
</figure>
</article>
<a href="#" class="btn right" >></a>
<a href="#" class="btn left" ><</a>
</section>
</div>
You can repeat the HTML but need to change the id's of the added sliders... id's need to be unique.. you'll need to add more slider instances for each set of unique id's
I am setting up blueimp lightbox,the lighbox is starting but is not loading/displaying the images, am new what shall i add in the script to allow it to find the images..? i would like to just be able to have the lighbox display images from any thumbnail image clicked on...
thanks for your help.
here is my code:
<body>
.
.
.
<div class="container marketing">
<div class="row">
<div class="col-md-12">
<!--slideshowarea-->
<div class="col-md-offset-2 col-md-10">
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<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><!-- blueimp-gallery -->
<!--links-->
<div id="links">
<div class="row">
<div class="col-md-12" id="links1row">
<a href="./imgs/ibiziriko/1.0.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/1.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/2.0.jpg" title="Apple" >
<img src="./imgs/thumbnails/ibiziriko/2.0.jpg" alt="Apple" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/4.jpg" title="Orange" >
<img src="./imgs/thumbnails/ibiziriko/4.jpg" alt="Orange" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/5.jpg" title="Orange" >
<img src="./imgs/thumbnails/ibiziriko/5.jpg" alt="Orange" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12" id="links2row">
<a href="./imgs/6.0.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/6.0.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/7.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/7.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/8.0.jpg" title="Banana">
<img src="./imgs/thumbnails/ibiziriko/8.0.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/8.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/8.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12" id="links1row">
<a href="./imgs/ibiziriko/9.jpg" title="Banana" >
<img src="imgs/thumbnails/ibiziriko/9.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/10.0.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/10.0.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/10.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/10.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/11.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/11.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="./imgs/ibiziriko/12.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/12.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/13.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/13.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/14.1.jpg" title="Banana" >
<img src="imgs/thumbnails/ibiziriko/14.1.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/14.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/14.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="./imgs/ibiziriko/16.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/16.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/18.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/18.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/21.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/21.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/22.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/22.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="./imgs/ibiziriko/23.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/23.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/24.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/24.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/25.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/25.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/26.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/26.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a href="./imgs/ibiziriko/27.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/27.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/28.jpg" title="Banana" >
<img src="imgs/thumbnails/ibiziriko/28.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/29.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/29.jpg" alt="Banana" class="img-thumbnail">
</a>
<a href="./imgs/ibiziriko/30.jpg" title="Banana" >
<img src="./imgs/thumbnails/ibiziriko/30.jpg" alt="Banana" class="img-thumbnail">
</a>
</div>
</div>
</div><!--/links-->
</div>
</div>
</div><!--/row-->
.
.
.
</div><!-- /.container -->
<script src="./dist/js/jquery-1.11.0/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>
<script src="./docs/assets/js/docs.min.js"></script>
<script src="./js/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>
I have it working fine here with your code: http://jsfiddle.net/3su8Y/
Wondering if you maybe don't have your href pointing to the right image. You do have to have a different file for both thumbnail and main image.
<a href="http://placehold.it/400x400&text=Photo" title="Banana">
<img src="http://placehold.it/100x100&text=Thumbnail" alt="Banana" class="img-thumbnail">
</a>