0

I am trying to get a banner slideshow. If image is blank then do not display. Only if it's available. However slideshow is display image1 and not sliding.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1    /DTD/xhtml1-strict.dtd">
      <html>
      <head>
      <title>SlideShow for OHR</title>
     <style type="text/css"  media="screen">
     .slideshow {  
            height:  160px;  
            width:   400px;  
            padding: 0;  
            margin:  0; 
        } 

     .slideshow img {  
            padding: 15px;  
            border:  1px solid #ccc;  
            background-color: #eee; 
            width:  700px; 
            height: 125px; 
            top:  0; 
            left: 0;           
        }
   .slideshow a {
            display: none;
          }
   .slideshow a:first-child {
           display: block;
          }
 

   </style>
    <!-- include jQuery library -->
     <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js">     </script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.cycle.all.js"></script> 

   <script type="text/javascript">
      $(function() {
        var numFinished = 0;
         console.log(numFinished);
        imgFinished = function() {
          numFinished++;
          if (numFinished == 5) {
            // all images are loaded or removed - setup slideshow
            $('.slideshow').cycle({
              fx: 'fade',
              speedIn: 700,
              speedOut: 1200,
              timeout: 2000 ,
              pause:  1
            });
          }
        }
        window.alert(typeof $(document).on);
        $('.slideshow img').on('error', function(e) {
          $(e.target).closest('a').remove();
          imgFinished();
          });

        $('.slideshow img').on('load', function(image) {
          imgFinished();
        });
      });
    </script>
     </head>
     <body>
 
    <div class="slideshow">        
      <a target="_blank" href="http://www.cnn.com"><img src="image1.jpg"   /> </a>
      <a target="_blank" href="http://www.cnn.com"><img src="image2.jpg"   /> </a>
      <a target="_blank" href="http://www.cnn.com"><img src="image3.jpg"   /> </a>
      <a target="_blank" href="http://www.cnn.com"><img src="image4.jpg"   /> </a>
      <a target="_blank" href="http://www.cnn.com"><img src="image5.jpg"   /> </a>

    </div> 
    </body>
    </html>
 
 
 

<!-- begin snippet: js hide: false -->

I am trying to create a banner slideshow with jquery cycle. We will have total 5 images, however, all 5 images will not available to display everyday. We need to display image if image is not blank and if image is blank then do not display.

baao
  • 71,625
  • 17
  • 143
  • 203
Amy
  • 1
  • 1
  • Maybe this helps you http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript – Ben Spi Dec 01 '14 at 02:35

1 Answers1

0

You could use a function to check the onerror event of the image, and set a placeholder image.

<img onerror="imageError(this)" src="image1.png />

function imageError (image) {
    if(image.src === "undefined"){
        return;
    }
    image.src = "img/placeholder_image.png";        
}
svnm
  • 22,878
  • 21
  • 90
  • 105