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!
Related
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>
The user through the admin panel can add any number of sliders to the page. How to make all sliders with the same class initialized?
How do I make sure that the control buttons for each slider are applied separately, and not just for the last slider?
Now the buttons only work for the last slider.
$('.sliderBox').slick({
autoplay: true,
prevArrow: $('.sliderLeftBtn'),
nextArrow: $('.sliderRightBtn'),
dots: true,
appendDots: $('.sliderControl'),
});
.smallSlider-Item img{
width: 200px;
background: #red;
height:300px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="sliderBox">
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
</div>
<div class="sliderControl">
<div class="arrowLeft sliderLeftBtn"></div>
<div class="arrowRight sliderRightBtn"></div>
</div>
</div>
<div class="sliderBox">
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
<a class="smallSlider-Item" href="">
<img src="img/smallSlider/k.png" alt="" class="smallSlider-ItemImg">
</a>
</div>
<div class="sliderControl">
<div class="arrowLeft sliderLeftBtn"></div>
<div class="arrowRight sliderRightBtn"></div>
</div>
</div>
I have found a solution by running through each slider element. Since there were some errors in your markup, I have edited everything a little bit.
$(document).ready(function() {
$('.slider-container').each(function(index, element) {
var $sliderBox = $(element).find('.slider-box'),
$sliderControls = $sliderBox.next('.slider-controls');
$sliderBox.slick({
autoplay: true,
dots: true,
prevArrow: $sliderControls.find('.slider-button.button-prev'),
nextArrow: $sliderControls.find('.slider-button.button-next'),
appendDots: $sliderControls,
});
});
});
.slider-controls .slick-dots {
position: static;
bottom: initial;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="slider-container">
<div class="slider-box">
<h3>01</h3>
<h3>02</h3>
<h3>03</h3>
<h3>04</h3>
<h3>05</h3>
</div>
<div class="slider-controls">
<button class="slider-button button-prev">< Prev</button>
<button class="slider-button button-next">Next ></button>
</div>
</div>
<div class="slider-container">
<div class="slider-box">
<h3>06</h3>
<h3>07</h3>
<h3>08</h3>
<h3>09</h3>
<h3>10</h3>
</div>
<div class="slider-controls">
<button class="slider-button button-prev">< Prev</button>
<button class="slider-button button-next">Next ></button>
</div>
</div>
Having some issues with my sliding nav in safari. Basically it just doesn't work. In the inspector panel it is returning the error:
"TypeError: null is not an object (evaluating 'document.getElementById("contracted-menu").style')
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cuttsy+Cuttsy | How we work</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/fonts/fonts.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/media.css" rel="stylesheet" type="text/css">
<script src="js/menu.js"></script>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
if (window.matchMedia("(min-width: 769px)").matches) {
function openNav() {
document.getElementById("expanded-menu").style.marginLeft = "0";
document.getElementById("contracted-menu").style.marginLeft = "-75px";
}
function closeNav() {
document.getElementById("expanded-menu").style.marginLeft = "-230px";
document.getElementById("contracted-menu").style.marginLeft = "0";
}
} else if (window.matchMedia("(max-width: 768px)").matches){
function openNav() {
document.getElementById("expanded-menu").style.marginTop = "0";
document.getElementById("contracted-menu").style.marginTop = "-75px";
}
function closeNav() {
document.getElementById("expanded-menu").style.marginTop = "-100vh";
document.getElementById("contracted-menu").style.marginTop = "0";
}
}
</script>
</head>
<body>
<!-- ======================
========== MENU ===========
======================= -->
<div class="expanded-menu" id="expanded-menu">
<!-- MENU -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
<img src="images/Backarrow.png" alt="back arrow">
</a>
<a href="index.html">
<img src="images/Cuttsy+Cuttsy_Logo_Square_RGB.png" class="logo" alt="cuttsy and cuttsy logo">
</a>
who we are
<img src="images/Line.png" class="menu-line" alt="line">
how we work
<img src="images/Line.png" class="menu-line" alt="line">
what we do
<img src="images/Line.png" class="menu-line" alt="line">
who we do it for
<img src="images/Line.png" class="menu-line" alt="line">
cuttings
<img src="images/Line.png" class="menu-line" alt="line">
join us
<img src="images/Line.png" class="menu-line" alt="line">
contact
<div class="socialmedia">
<a href="https://www.facebook.com/cuttsyandcuttsy/" target="_blank">
<img src="images/social-media-icons/Facebook.png" alt="facebook logo">
</a>
<a href="https://www.instagram.com/cuttsyandcuttsy/?hl=en" target="_blank">
<img src="images/social-media-icons/Instagram.png" alt="instagram logo">
</a>
<a href="https://www.linkedin.com/company/2128917/" target="_blank">
<img src="images/social-media-icons/Linkedin.png" alt="linkedin logo">
</a>
<a href="https://twitter.com/cuttsyandcuttsy" target="_blank">
<img src="images/social-media-icons/Twitter.png" alt="twitter logo">
</a>
</div>
<div class="privacy">
<p>Privacy policy</p>
<p>© Cuttsy+Cuttsy 2018</p>
</div>
</div>
<!-- ======================
======= SMALL MENU ========
======================= -->
<div class="contracted-menu" id="contracted-menu">
<a href="javascript:void(0)" onclick="openNav()">
<img src="images/nav-icons/menu.png" class="burger" alt="open menu">
</a>
<div class="menu-icons">
<a href="who-we-are.html">
<img src="images/nav-icons/Who-we-are.png" alt="who we are">
</a>
<a href="how-we-work.html">
<img src="images/nav-icons/How-we-work.png" alt="how we work">
</a>
<a href="what-we-do.html">
<img src="images/nav-icons/What-we-do.png" alt="what we do">
</a>
<a href="who-we-do-it-for.html">
<img src="images/nav-icons/who-we-do-it-for.png" alt="who we do it for">
</a>
<a href="cuttings.html">
<img src="images/nav-icons/cuttings.png" alt="cuttings">
</a>
<a href="join-us.html">
<img src="images/nav-icons/join.png" alt="join us">
</a>
<a href="contact.html">
<img src="images/nav-icons/contact.png" alt="contact us">
</a>
<div class="socialmedia-sm">
<a href="https://www.facebook.com/cuttsyandcuttsy/" target="_blank">
<img src="images/social-media-icons/Facebook.png" class="sm-small" alt="facebook logo">
</a>
<a href="https://www.instagram.com/cuttsyandcuttsy/?hl=en" target="_blank">
<img src="images/social-media-icons/Instagram.png" class="sm-small" alt="instagram logo">
</a>
<a href="https://www.linkedin.com/company/2128917/" target="_blank">
<img src="images/social-media-icons/Linkedin.png" class="sm-small" alt="linkedin logo">
</a>
<a href="https://twitter.com/cuttsyandcuttsy" target="_blank">
<img src="images/social-media-icons/Twitter.png" class="sm-small" alt="twitter logo">
</a>
</div>
</div>
</div>
<!-- ======================
========= CONTENT =========
======================= -->
<div class="webcontent">
<div id="main">
<div>
<div class="row" class="col-sm-12">
<h1>How we work.</h1>
<p class="intro">At Cuttsy and Cuttsy, we never lose sight of what really matters – people. That’s why we pride ourselves on developing close and mutually respectful relationships with our clients. It’s why we constantly keep in mind what the patient or end-user really needs to know. And it’s why we work hard to maintain an award-winning culture of professional development to attract the very best people we can to join our team.</p>
</div>
<div class="secNav">
<ul>
<li class="subButton">Emotional Intelligence</li>
<li class="subButton">Co+Create</li>
<li class="subButton">Health Literacy</li>
</ul>
<ul class="secNav-level2">
<li class="subButton">Compliance</li>
<li class="subButton">CSR</li>
</ul>
</div>
<div class="row">
<hr class="dividingline">
<h2>Emotional Intelligence</h2>
<div class="col-sm-10">
<p id="intro-body">Emotional Intelligence (EI) is the capability of individuals to recognise their own and other people’s emotions and use emotional information to guide thinking and behaviour.</p>
<p class="body-copy">
One of our guiding principles is the power of EI. By guiding our thinking and behaviour, EI helps us to build meaningful and impactful connections in our communications.</p>
<h3>EI guides what we do</h3>
<img src="images/emotional-intelligence.png" class="bodyimg">
<hr class="dividingline">
<img src="images/reason-emotion.png" class="bodyimg">
<p class="body-copy" style="padding-top:30px;">
If you would like to find out more about how we use EI to guide our processes, let’s talk.</p>
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="global-footer">
<div class="footer-nav col-sm-10">
<div class="col-sm-3">
<ul>
<li>Home</li>
<li>Who we are</li>
<li>Meet the Team</li>
<li>CPD</li>
<li>How we work</li>
<li>Co+Create</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li>Health Literacy</li>
<li>Compliance</li>
<li>CSR</li>
<li>What we do</li>
<li>Books</li>
<li>Who we do it for</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li>Cuttings</li>
<li>Join us</li>
<li>Contact</li>
<li>Privacy policy</li>
</ul>
</div>
</div>
</footer>
</html>
Anyone have any ideas? It's the code between the script tags that doesn't want to work.
assign your functions to variables like this:
<script>
if (window.matchMedia("(min-width: 769px)").matches) {
var openNav = function() {
document.getElementById("expanded-menu").style.marginLeft = "0";
document.getElementById("contracted-menu").style.marginLeft = "-75px";
}
var closeNav = function() {
document.getElementById("expanded-menu").style.marginLeft = "-230px";
document.getElementById("contracted-menu").style.marginLeft = "0";
}
} else if (window.matchMedia("(max-width: 768px)").matches){
var openNav = function() {
document.getElementById("expanded-menu").style.marginTop = "0";
document.getElementById("contracted-menu").style.marginTop = "-75px";
}
var closeNav = function() {
document.getElementById("expanded-menu").style.marginTop = "-100vh";
document.getElementById("contracted-menu").style.marginTop = "0";
}
}
</script>
I have a lightbox (using fancybox.net) here: http://desertcinema.com/home-test/
And I use a gallery codes to show images in gallery form:
Here's my jQuery code:
$(document).ready(function() {
$(".gallery").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
And here's my HTML:
<li class="portfolio-box photography">
<a class="gallery" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4bav1hxsgwj54nvaww.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery" rel=gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/Mike-Full-Draw-30sp495yqivl82ubkxq5mo.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
using the class "gallery" that I place on <a href=""> however when clicking this images there is no next or previous button which must be working.
I just followed this instruction: http://fancyapps.com/fancybox/#examples
am I making any mistakes? You can inspect element using Chrome if you want.
Try this.You are missing rel="gallery1" in first < a >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<link href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
<li class="portfolio-box photography">
<a class="gallery" rel="gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4bav1hxsgwj54nvaww.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery" rel="gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/Mike-Full-Draw-30sp495yqivl82ubkxq5mo.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
<script>
$(document).ready(function() {
$(".gallery").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
try this way.. No div should be there in li
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<link href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
<a class="fancybox" rel="gallery1" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg" title="Morning Godafoss (Brads5)">
<img src="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3691/10185053775_701272da37_b.jpg" title="Vertical - Special Edition! (cedarsphoto)">
<img src="http://farm4.staticflickr.com/3691/10185053775_701272da37_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_b.jpg" title="Racing against the Protons (tom.leuzi)">
<img src="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/291/18653638823_a86b58523c_b.jpg" title="Lupines (Kiddi Einars)">
<img src="http://farm1.staticflickr.com/291/18653638823_a86b58523c_m.jpg" alt="" />
</a>
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>