full background slider with URL

Manganix

Member
Hi,

could someone help...

I've got this full screen slideshow and I want to make each of the background images clickable with URL's.

Tried lots of combo's with <a href...> but couldn't get it working.

What am I doing wrong or am I missing?

Thanks for your help.


HTML
Code:
         <content>
            <ul class="fullPageSlideShow">
               <li><span>Image 01</span><div><h3>CURRENTLY PLAYING</h3></div></li>
               <li><span>Image 02</span><div><h3>COMPLETED</h3></div></li>
               <li><span>Image 03</span><div><h3>OUTSOON</h3></div></li>
               <li><span>Image 04</span><div><h3>CHEATS</h3></div></li>
               <li><span>Image 05</span><div><h3>FILE</h3></div></li>
               <li><span>Image 06</span><div><h3>SCREEN</h3></div></li>
            </ul>
         </content><!--content-->


CSS
Code:
.fullPageSlideShow,
.fullPageSlideShow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.fullPageSlideShow:after { 
    content: '';
    background: transparent url(../SLIDERGALLERY/sliderImages/pattern.png) repeat top left; 
}
.fullPageSlideShow li span {
    display: block;
    width: 100%;
    height: 85%;
    position: absolute;
    top: 15%;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.fullPageSlideShow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s; 
}
.fullPageSlideShow li div h3 { 
    font-family: 'bebas_neueregular', 'Arial Narrow', Arial, sans-serif;
    font-size: 150px;
    padding: 0;
    line-height: 200px;
    text-shadow:10px 10px 10px #000;
}
.fullPageSlideShow li:nth-child(1) span { 
    background-image: url(../SLIDERGALLERY/sliderImages/1.jpg);
}
.fullPageSlideShow li:nth-child(2) span { 
    background-image: url(../SLIDERGALLERY/sliderImages/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.fullPageSlideShow li:nth-child(3) span { 
    background-image: url(../SLIDERGALLERY/sliderImages/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.fullPageSlideShow li:nth-child(4) span { 
    background-image: url(../SLIDERGALLERY/sliderImages/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.fullPageSlideShow li:nth-child(5) span { 
    background-image: url(../SLIDERGALLERY/sliderImages/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.fullPageSlideShow li:nth-child(6) span { 
    background-image: url(../SLIDERGALLERY/sliderImages/6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
.fullPageSlideShow li:nth-child(2) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.fullPageSlideShow li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.fullPageSlideShow li:nth-child(4) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.fullPageSlideShow li:nth-child(5) div { 
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.fullPageSlideShow li:nth-child(6) div { 
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
 

chrishirst

Well-Known Member
Staff member
You cannot make a background image directly "clickable", so you have to make the anchor elements fill the parent container, by making them display as a block element, with 100% width and heght.
 
Another thing you COULD try ( I THINK this should work) is to infuse a little JS into the mix. Give each li a data-type and set it to be the url you want. Then loop thru with a .each to pull out the url and set a click event for it to open a new window for it.

The way you are doing this.. Im not sure it will work but its an idea at least to stash somewhere else.
 

Manganix

Member
Hi,


I tried something and put online a test. My intention is to get it responsive, but I'm not there yet...

http://gamanga.com/conceptTest2.html

I'm not the slider for starting works well:

1. do the images cover the whole screen? Even when sliding?
I seem to have issues with having the images cover the total screen, with width/heigt 100%... sometimes while sliding, the images are out of proprtion ans they only fill X% of the screen.
When I test on 'screenfly', they do on most resolutions -after I refresh since it isn't responsive yet.

2. When the page is displayed the first time, and I click on the left arrow (previous slide), the animation goes crazy in stead of sliding: the image does fly into the right corner.

Could you please check? Maybe you'll see what is going wrong or discover faults in the code?

The smaller version works just OK, here:http://gamanga.com/
I must have messed up something while trying to make the slider 100%?

Thanks for you help!


Kr,
 

Manganix

Member
Hey,

thanks for the check and feedback.
Normally the the slider issue should be solved now (? as far as I can see here).

I'm trying out / struggling with some responsive design ...

Always welcome to check and give your feedback/tips! ;-)



Thanks!
 
Top