By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,720 Members | 2,095 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,720 IT Pros & Developers. It's quick & easy.

Links not working in slideshow

KeredDrahcir
100+
P: 426
I needed a slide show that showed an image wider than my browser window so that at higher resolutions to image would still fill the screen.

To prevent getting scroll bars on a lower resolutions screen, I decided to do it as a background image and since I had five images that I wanted to show in a slideshow I found a background image slide show.

The problem I've got is a need to make the image link to something and putting an anchor on the image was the best options. I tried it with text first and although it shows the text underlined as a link, I can't click it and the pointer doesn't change.

Could anybody have a look at the code please and either let me know how I can make the link work or even better where I can find a more user friendly, background image slideshow that can have a fading transition and a custom speed?

HTML
Expand|Select|Wrap|Line Numbers
  1. <div style="height: 388px; width: 100%;">
  2.     <ul class="cb-slideshow">
  3.         <li>
  4.             <span>Image 01</span>
  5.             <div>
  6.                 <h3>
  7.                     &nbsp;</h3>
  8.             </div>
  9.         </li>
  10.         <li>
  11.             <span>Image 02</span>
  12.             <div>
  13.                 <h3>
  14.                     &nbsp;</h3>
  15.             </div>
  16.         </li>
  17.         <li>
  18.             <span>Image 03</span>
  19.             <div>
  20.                 <h3 style="cursor:pointer !important;">
  21.                     <a href="link">Dogs were invented before the wheel</a></h3>
  22.             </div>
  23.         </li>
  24.         <li>
  25.             <span>Image 04</span>
  26.             <div>
  27.                 <h3>
  28.                     &nbsp;</h3>
  29.             </div>
  30.         </li>
  31.         <li>
  32.             <span>Image 05</span>
  33.             <div>
  34.                 <h3>
  35.                     &nbsp;</h3>
  36.             </div>
  37.         </li>
  38.         <!--
  39.         <li>
  40.             <span>Image 06</span>
  41.             <div>
  42.                 <h3>
  43.                     &nbsp;</h3>
  44.             </div>
  45.         </li>-->
  46.     </ul>
  47. </div>
  48.  
CSS
Expand|Select|Wrap|Line Numbers
  1. .cb-slideshow,
  2. .cb-slideshow:after { 
  3.     margin-bottom: 0 !important;
  4. }
  5. .cb-slideshow:after { 
  6.     content: '';
  7. }
  8. .cb-slideshow li span { 
  9.     width: 100%;
  10.     height: 395px;
  11.     position: absolute;
  12.     top: 135px;
  13.     left: 0px;
  14.     color: transparent;
  15.     background-size: cover;
  16.     background-position: 50% 50%;
  17.     background-repeat: no-repeat;
  18.     opacity: 0;
  19.     z-index: 0;
  20.     -webkit-backface-visibility: hidden;
  21.     -webkit-animation: imageAnimation 30s linear infinite 0s;
  22.     -moz-animation: imageAnimation 30s linear infinite 0s;
  23.     -o-animation: imageAnimation 30s linear infinite 0s;
  24.     -ms-animation: imageAnimation 30s linear infinite 0s;
  25.     animation: imageAnimation 30s linear infinite 0s; 
  26. }
  27. .cb-slideshow li div { 
  28.     z-index: 1000;
  29.     position: absolute;
  30.     bottom: 30px;
  31.     left: 0px;
  32.     width: 100%;
  33.     text-align: center;
  34.     opacity: 0;
  35.     color: #fff;
  36.     -webkit-animation: titleAnimation 30s linear infinite 0s;
  37.     -moz-animation: titleAnimation 30s linear infinite 0s;
  38.     -o-animation: titleAnimation 30s linear infinite 0s;
  39.     -ms-animation: titleAnimation 30s linear infinite 0s;
  40.     animation: titleAnimation 30s linear infinite 0s; 
  41. }
  42. .cb-slideshow li div h3 { 
  43.     font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  44.     font-size: 240px;
  45.     padding: 0;
  46.     line-height: 200px; 
  47.     display: block;
  48.     z-index: 9000000;
  49. }
  50. .cb-slideshow li:nth-child(1) span { 
  51.     background-image: url(image1);
  52. }
  53. .cb-slideshow li:nth-child(2) span { 
  54.     background-image: url(image2);
  55.     -webkit-animation-delay: 6s;
  56.     -moz-animation-delay: 6s;
  57.     -o-animation-delay: 6s;
  58.     -ms-animation-delay: 6s;
  59.     animation-delay: 6s; 
  60. }
  61. .cb-slideshow li:nth-child(3) span { 
  62.     background-image: url(image3);
  63.     -webkit-animation-delay: 12s;
  64.     -moz-animation-delay: 12s;
  65.     -o-animation-delay: 12s;
  66.     -ms-animation-delay: 12s;
  67.     animation-delay: 12s; 
  68. }
  69. .cb-slideshow li:nth-child(4) span { 
  70.     background-image: url(image4);
  71.     -webkit-animation-delay: 18s;
  72.     -moz-animation-delay: 18s;
  73.     -o-animation-delay: 18s;
  74.     -ms-animation-delay: 18s;
  75.     animation-delay: 18s; 
  76. }
  77. .cb-slideshow li:nth-child(5) span { 
  78.     background-image: url(image5);
  79.     -webkit-animation-delay: 24s;
  80.     -moz-animation-delay: 24s;
  81.     -o-animation-delay: 24s;
  82.     -ms-animation-delay: 24s;
  83.     animation-delay: 24s; 
  84. }
  85. .cb-slideshow li:nth-child(6) span { 
  86.     background-image: url(image to come);
  87.     -webkit-animation-delay: 30s;
  88.     -moz-animation-delay: 30s;
  89.     -o-animation-delay: 30s;
  90.     -ms-animation-delay: 30s;
  91.     animation-delay: 30s; 
  92. }
  93. .cb-slideshow li:nth-child(2) div { 
  94.     -webkit-animation-delay: 6s;
  95.     -moz-animation-delay: 6s;
  96.     -o-animation-delay: 6s;
  97.     -ms-animation-delay: 6s;
  98.     animation-delay: 6s; 
  99. }
  100. .cb-slideshow li:nth-child(3) div { 
  101.     -webkit-animation-delay: 12s;
  102.     -moz-animation-delay: 12s;
  103.     -o-animation-delay: 12s;
  104.     -ms-animation-delay: 12s;
  105.     animation-delay: 12s; 
  106. }
  107. .cb-slideshow li:nth-child(4) div { 
  108.     -webkit-animation-delay: 18s;
  109.     -moz-animation-delay: 18s;
  110.     -o-animation-delay: 18s;
  111.     -ms-animation-delay: 18s;
  112.     animation-delay: 18s; 
  113. }
  114. .cb-slideshow li:nth-child(5) div { 
  115.     -webkit-animation-delay: 24s;
  116.     -moz-animation-delay: 24s;
  117.     -o-animation-delay: 24s;
  118.     -ms-animation-delay: 24s;
  119.     animation-delay: 24s; 
  120. }
  121. .cb-slideshow li:nth-child(6) div { 
  122.     -webkit-animation-delay: 30s;
  123.     -moz-animation-delay: 30s;
  124.     -o-animation-delay: 30s;
  125.     -ms-animation-delay: 30s;
  126.     animation-delay: 30s; 
  127. }
  128. /* Animation for the slideshow images */
  129. @-webkit-keyframes imageAnimation { 
  130.     0% { opacity: 0;
  131.     -webkit-animation-timing-function: ease-in; }
  132.     8% { opacity: 1;
  133.          -webkit-animation-timing-function: ease-out; }
  134.     17% { opacity: 1 }
  135.     25% { opacity: 0 }
  136.     100% { opacity: 0 }
  137. }
  138. @-moz-keyframes imageAnimation { 
  139.     0% { opacity: 0;
  140.     -moz-animation-timing-function: ease-in; }
  141.     8% { opacity: 1;
  142.          -moz-animation-timing-function: ease-out; }
  143.     17% { opacity: 1 }
  144.     25% { opacity: 0 }
  145.     100% { opacity: 0 }
  146. }
  147. @-o-keyframes imageAnimation { 
  148.     0% { opacity: 0;
  149.     -o-animation-timing-function: ease-in; }
  150.     8% { opacity: 1;
  151.          -o-animation-timing-function: ease-out; }
  152.     17% { opacity: 1 }
  153.     25% { opacity: 0 }
  154.     100% { opacity: 0 }
  155. }
  156. @-ms-keyframes imageAnimation { 
  157.     0% { opacity: 0;
  158.     -ms-animation-timing-function: ease-in; }
  159.     8% { opacity: 1;
  160.          -ms-animation-timing-function: ease-out; }
  161.     17% { opacity: 1 }
  162.     25% { opacity: 0 }
  163.     100% { opacity: 0 }
  164. }
  165. @keyframes imageAnimation { 
  166.     0% { opacity: 0;
  167.     animation-timing-function: ease-in; }
  168.     8% { opacity: 1;
  169.          animation-timing-function: ease-out; }
  170.     17% { opacity: 1 }
  171.     25% { opacity: 0 }
  172.     100% { opacity: 0 }
  173. }
  174. /* Animation for the title */
  175. @-webkit-keyframes titleAnimation { 
  176.     0% { opacity: 0 }
  177.     8% { opacity: 1 }
  178.     17% { opacity: 1 }
  179.     19% { opacity: 0 }
  180.     100% { opacity: 0 }
  181. }
  182. @-moz-keyframes titleAnimation { 
  183.     0% { opacity: 0 }
  184.     8% { opacity: 1 }
  185.     17% { opacity: 1 }
  186.     19% { opacity: 0 }
  187.     100% { opacity: 0 }
  188. }
  189. @-o-keyframes titleAnimation { 
  190.     0% { opacity: 0 }
  191.     8% { opacity: 1 }
  192.     17% { opacity: 1 }
  193.     19% { opacity: 0 }
  194.     100% { opacity: 0 }
  195. }
  196. @-ms-keyframes titleAnimation { 
  197.     0% { opacity: 0 }
  198.     8% { opacity: 1 }
  199.     17% { opacity: 1 }
  200.     19% { opacity: 0 }
  201.     100% { opacity: 0 }
  202. }
  203. @keyframes titleAnimation { 
  204.     0% { opacity: 0 }
  205.     8% { opacity: 1 }
  206.     17% { opacity: 1 }
  207.     19% { opacity: 0 }
  208.     100% { opacity: 0 }
  209. }
  210. /* Show at least something when animations not supported */
  211. .no-cssanimations .cb-slideshow li span{
  212.     opacity: 1;
  213. }
  214.  
  215. @media screen and (max-width: 1140px) { 
  216.     .cb-slideshow li div h3 { font-size: 140px }
  217. }
  218. @media screen and (max-width: 600px) { 
  219.     .cb-slideshow li div h3 { font-size: 80px }
  220. }
Can anyone help please?
May 31 '13 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.