ulfben

Simple slideshow

May 12th, 2015
250
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- CSS to hide all images except the first one, until the script loads.
  2.     Put this in header.php or style.css of your theme  -->
  3. <style type="text/css">
  4.     .slideshow img {
  5.         display: none
  6.     }
  7.     .slideshow img.first {
  8.         display: block
  9.     }
  10. </style>
  11.  
  12. <!--
  13. This is just a div holding all the images.
  14. You put this in whatever post or page you want.
  15.  
  16. I use the manual linebreaks to make sure images display one after another in case the script or css breaks -->
  17. <div class="slideshow">
  18.     <img class="first" src="wp-content/uploads/2011Slides/01.jpg" /><br />
  19.     <img src="wp-content/uploads/2011Slides/02.jpg" /><br />
  20.     <img src="wp-content/uploads/2011Slides/03.jpg" /><br />
  21.     <img src="wp-content/uploads/2011Slides/04.jpg" /><br />
  22.     <img src="wp-content/uploads/2011Slides/05.jpg" /><br />
  23.     <img src="wp-content/uploads/2011Slides/06.jpg" /><br />
  24.     <img src="wp-content/uploads/2011Slides/07.jpg" /><br />
  25.     <img src="wp-content/uploads/2011Slides/08.jpg" /><br />
  26.     <img src="wp-content/uploads/2011Slides/09.jpg" /><br />
  27.     <img src="wp-content/uploads/2011Slides/10.jpg" /><br />
  28.     <img src="wp-content/uploads/2011Slides/11.jpg" /><br />
  29.     <img src="wp-content/uploads/2011Slides/12.jpg" /><br />
  30.     <img src="wp-content/uploads/2011Slides/13.jpg" /><br />
  31.     <img src="wp-content/uploads/2011Slides/14.jpg" /><br />
  32.     <img src="wp-content/uploads/2011Slides/15.jpg" /><br />
  33.     <img src="wp-content/uploads/2011Slides/16.jpg" /><br />
  34.     <img src="wp-content/uploads/2011Slides/17.jpg" /><br />
  35.     <img src="wp-content/uploads/2011Slides/18.jpg" />
  36. </div>
  37.  
  38. <!-- the javascript goes in footer.php, between the <footer> html tags. -->
  39. <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
  40. <script type="text/javascript">
  41.     jQuery(document).ready(function() {
  42.         jQuery('.slideshow').cycle({
  43.             fx:     'fade',
  44.             speed:   1000,
  45.             timeout: 5000,
  46.             next:   '.slideshow',  //name of the div holding all images
  47.             pause:   1,
  48.             slideExpr: 'img',
  49.             random: 1
  50.         });
  51.     });
  52. </script>
RAW Paste Data