Make Background Slideshow Images Individually Clickable - html

Question

I'm trying to make a background image slideshow for my photography portfolio.
When each image fades in, I want it to link to its respective gallery.
I also have a text box that fades with the images. I would like to also link to the respective gallery. I have not added the code in for that yet as I do not know how without ruining all the code linked to the .
At the moment, no matter where I seem to put the links, they overlap and the bottom (link3) is only clickable.
My HTML:
<ul class="cb-slideshow">
<li>
<span><a id="gallerylink" href="link1"></a></span>
<div>
<h3>Fire & Light</h3>
</div>
</li>
<li>
<span><a id="gallerylink" href="link2"></a></span>
<div>
<h3>Live Music</h3>
</div>
</li>
<li>
<span><a id="gallerylink" href="link3"></a></span>
<div>
<h3>Water & Nature</h3>
</div>
</li>
</ul>
My CSS:
#gallerylink {
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: transparent;
z-index: 999;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
list-style-type: none;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 18s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 5%;
right:5%;
width: 10%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 18s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 25px;
font-weight: 400;
letter-spacing: 2px;
padding: 0;
background-color: white;
line-height: 45px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(iamge1)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(image2);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(image3);
animation-delay: 12s;
}
.cb-slideshow li:nth-child(2) div {
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
animation-delay: 12s;
}
#keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
5% { opacity: 1; animation-timing-function: ease-out; }
30% { opacity: 1 }
35% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% { opacity: 0 }
5% { opacity: 1 }
30% { opacity: 1 }
33% { opacity: 0 }
100% { opacity: 0 }
}
#media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 20px }
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 14px }
}
FYI I'm not taking credit for most of this code; its from: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
I realise the background-image and a href 's are not real links. I removed them so it would allow me to post this question with low reputation.
Here is the page in question if that helps: http://kalemhornphoto.format.com/
This particular site runs off Format, which takes care of my site theme (and code) hosting and backend, though my CSS and HTML overrides theirs.
Thanks in advance!

Answer 1

jQuery is one way:
// Go trough every li with #gallerylink inside
$("li #gallerylink").each(function()
{
// Bind click event to it
$(this).parent().on("click", function()
{
// Click the link if the li is clicked
$(this).find("#gallerylink")[0].click();
});
});