SHARE
TWEET

Simple slideshow

ulfben May 12th, 2015 (edited) 220 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
Top