topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

mashup-delicious-10-slideshow-index.php / php


  <?php
  
  //base tag feed url
  define('BASE_IMAGE_FEED_URL','http://del.icio.us/rss/tag/system:media:image');
  
  //bring in magpie goodness
  require_once('lib/rss_fetch.inc');
  
  //set cache directory
  define('MAGPIE_CACHE_DIR', 'cache');
  
  //get rid of error Notices because magpie produces some
  error_reporting(E_ERROR | E_WARNING | E_PARSE);
  
  //add any tag hotness
  if (isset( $_GET['tag']))$ feed_url = BASE_IMAGE_FEED_URL."+". $_GET['tag'];
  else$ feed_url = BASE_IMAGE_FEED_URL;
  
  //grab the feed
   $rss = fetch_rss($ feed_url);
                
  ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>A del.icio.us Image Feed Slideshow!</title>
      <style type="text/css">
      body
      {
          margin: 1em;
          font-family: Helvetica, Arial, Sans-Serif;
          color: #FFF; 
          background: #000;
      }
      a { color: #FF0; }
      </style>
      <script language="JavaScript">
      //how many seconds before switching images
      var num_seconds_per_image = 20;
      //which image are we on? (start with 0)
      var cur_image_num = 0;
      //how many total images (set by initSlideshow())
      var total_images = 0;
      //setup array of image paths (the extra '' is added on purpose)
      var images = [
      <?php
      foreach ( $rss->items as$ item)      
          echo "'". $item['link']."',\n";
      ?>
      ''
      ];$ //array of image titles
      var image_title = [
      <?php
      foreach (rss->items as  $item)
          echo "'".htmlentities($ item['title'],ENT_QUOTES)."',\n";
      ?>
      ''
      ];
      //the timer object
      var timer;
      //initalize the slideshow
      function initSlideshow() {
          //set total_image_num
          total_images = images.length - 2;
          document.getElementById('total_image_num').innerHTML = total_images;
          //load first image
          nextImage();
      }
      //show the next image
      function nextImage() {
          //set automatic execution of nextImage()
          window.clearTimeout(timer);
          timer = setTimeout("nextImage()",num_seconds_per_image * 1000);
          //set the next slide
          if (cur_image_num == total_images)
              cur_image_num = 1;
          else
              cur_image_num++;
          setImage();
      }
      //show the previous image
      function prevImage() {
          //set automatic execution of nextImage()
          window.clearTimeout(timer);
          timer = setTimeout("nextImage()",num_seconds_per_image * 1000);
          //set the next slide
          if (cur_image_num == 1)
              cur_image_num = total_images;
          else
              cur_image_num--;
          setImage();
      }
      //sets the image
      function setImage()
      {
          //set the current image number
          document.getElementById('cur_image_num').innerHTML = cur_image_num;
          //set image info
          document.getElementById('image_info_holder').innerHTML = image_title[cur_image_num];
          //set the image
          image_holder = document.getElementById('image_holder');
          //remove image_holder's children if they exist (which was prev img)
          if (image_holder.childNodes.length == 1) {
              image_holder.removeChild(image_holder.childNodes[0]);
          }
          img = document.createElement('img');
          img.setAttribute('src',images[cur_image_num]);
          image_holder.appendChild(img);
      }
      </script>
  </head>
  <body onload="initSlideshow()">
  <div align="center" style="padding: 1em">
      <form method="get">
      Images live from <a href="http://del.icio.us/tag/system:media:image">del.icio.us</a>.
      Want to narrow it down? Enter a tag: 
      <input type="text" name="tag" value="<?php if (isset( $_GET['tag'])) echo$ _GET['tag']; ?>" />
      <input type="submit" value="Go" />
      </form>
      <br />
      <input type="button" value="<< Prev" onclick="prevImage()" />
      <span id="cur_image_num">0</span> of <span id="total_image_num">0</span>
      <input type="button" value="Next >>" onclick="nextImage()" />
  </div>
  
  <div align="center" style="font-weight: bold" id="image_info_holder">
      If you see this message, then there are no images for this tag or something went wrong.
  </div>
  
  <div align="center" style="padding-top: 1em" id="image_holder">
  </div>
  
  </body>
  </html>

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.