Image Zoom effect

Question

How is this effect accomplished?
http://www.collegian.psu.edu/archive/2009/11/16/student_section_to_shift_in_20.aspx 
Speciffically if you click the image of the seating chart to the right it enlarges.  I looked at the source and there is a small bit of javascript but I can't understand it.  Is it simple or some 3rd party piece?  Thanks for the help!

Answer 1

Hi
First it is not java but javascript, there is a big difference between the two.
When trying to incorporate anything new into a web page it is always better to start with a blank html page, and create what is generally know as a 'proof of concept'. This ensures that you get to understand how to do something without other code getting in the way.
The links too the two js files, (mootools.js and remooz.js) go in the head content of your page, along with the link to the css file.
The code shown in the 'how to use' section of the tutorial goes inside the script tags as indicated below, (also inside the head content, but after the links to the js files.
<script type="text/javascript">
               /* <![CDATA[ */
                    insert the code here
               /* ]]> */
          </script>
You the create an unordered list with a class name of thumbnails and place your image references in this list -
<ul class="thumbnails">
     <li>
          <a link to large image goes here>
               <img src= link to small image here/>
          </a>
     </li>
     <li>
          <a href="http://yourwebsitefolder.imagenamelarge.jpg" title="It is an image" >
               <img src="http://yourwebsitefolder.imagenamesmall.jpg" />
          </a>
     </li>
The various items in the ReMooz.assign can be customized to your requirements, see - http://digitarald.de/project/remooz/1-0/showcase/simple-caption/.
PZ