Miscellaneous

  Home arrow Miscellaneous arrow Page 5 - Flickr Puzzle Mashup
MISCELLANEOUS

Flickr Puzzle Mashup
By: bluephoenix
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2006-11-13

    Table of Contents:
  • Flickr Puzzle Mashup
  • Getting the Image
  • Slicing the Image
  • Sending the Pieces
  • Client-Side JavaScript
  • Conclusion

  •  
     

    SEARCH CODEWALKERS

    TOOLS YOU CAN USE

    advertisement

    Flickr Puzzle Mashup - Client-Side JavaScript


    (Page 5 of 6 )

    JavaScript is used on the client side to enable the user to move the puzzle pieces. Here I chose to make use of Yahoo's User Interface Library available from developer.yahoo.com, but you can use which ever library you may feel more comfortable with or even roll your own. All that's needed here is to include the necessary dependency files and then pass each image's id to new dragable objects.

    <script type="text/javascript" src="yui/yahoo.js"></script>
    <script type="text/javascript" src="yui/dom.js"></script>
    <script type="text/javascript" src="yui/event.js"></script>
    <script type="text/javascript" src="yui/dragdrop.js"></script>
    <script type="text/javascript">

    window.onload = function() {

    <?php for ($x = 0; $x < $numPieces; $x++) { ?>
      new YAHOO.util.DD("piece<?php echo $x; ?>");
    <?php } ?>
    }

    As the page loads, users will see the puzzle pieces in order. They can move the pieces about themselves and then put the puzzle back together again, but it would be better to offer them an automatic way to scramble the puzzle.

    window.onload = function() {
      ...
      document.getElementById("randomizeBtn").click = randomize;
    }

    function randomize() {
    <?php for ($x = 0; $x < $numPieces; $x++) { ?>
      YAHOO.util.Dom.setX("piece<?php echo $x; ?>", Math.floor(
        Math.random() * YAHOO.util.Dom.getViewportWidth()));
      YAHOO.util.Dom.setY("piece<?php echo $x; ?>", Math.floor(
        Math.random() * YAHOO.util.Dom.getViewportHeight()));
    <?php } ?>
    }

    <input type="button" value="Randomize" id="randomizeBtn" />

    More Miscellaneous Articles
    More By bluephoenix

    blog comments powered by Disqus

    MISCELLANEOUS ARTICLES

    - Oracle Database XE: Indexes and Sequences
    - Modifying Tables in Oracle Database XE
    - Oracle Database XE: Tables and Constraints
    - More on Oracle Databases and Datatypes
    - Oracle Database XE Datatypes: Datetime and L...
    - Oracle Database XE Datatypes: Character and ...
    - From Databases to Datatypes
    - Firefox 3.6.6 Released with Improved Plug-in...
    - Attention Bloggers: WordPress 3.0 Now Releas...
    - Reflection in PHP 5
    - Inheritance and Other Advanced OOP Features
    - Advanced OOP Features
    - Linux from Scratch V.6.6 Review
    - Linux Gaining in Strength
    - Install Slackware on Your Old PC


    © 2003-2012 by Developer Shed. All rights reserved. DS Cluster 2 - Follow our Sitemap