Hintergrundbilder erstellen Diashow-Bilder einzeln anklickbar

Question

Ich versuche, eine Hintergrundbild-Diashow für mein Fotoportfolio zu erstellen. Wenn jedes Bild eingeblendet wird, möchte ich, dass es mit der entsprechenden Galerie verknüpft wird. Ich habe auch eine Textbox, die mit den Bildern verblasst. Ich möchte auch auf die jeweilige Galerie verlinken. Ich habe den Code dafür noch nicht hinzugefügt, da ich nicht weiß, wie, ohne den ganzen Code zu beschädigen, der mit dem verbunden ist. Im Moment, egal wo ich die Links zu setzen scheinen, überlappen sie und der Boden (link3) ist nur anklickbar.

Mein HTML:

<ul class="cb-slideshow"> 
<li> 
    <span><a id="gallerylink" href="link1"></a></span> 
    <div> 
     <h3>Fire &amp; 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 &amp; Nature</h3> 
    </div> 
</li> 
</ul> 

Meine 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 Ich nehme nicht Kredit für die meisten dieses Codes; es ist von http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

Ich erkenne das Hintergrundbild und eine href sind nicht echte Links. Ich entfernte sie, damit ich diese Frage mit geringem Ansehen posten konnte. Hier ist die Seite in Frage, wenn das hilft: http://kalemhornphoto.format.com/ Diese bestimmte Website läuft von Format, die kümmert sich um meine Website Thema (und Code) Hosting und Backend, obwohl meine CSS und HTML ihre übergeht. Vielen Dank im Voraus!

Answer 1

jQuery ist ein Weg:

// 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(); 
    }); 
});