Wavesalon javascript slideshow code

From John Freier
Jump to: navigation, search

Web Widget Site http://www.electricprism.com/aeron/slideshow/

Modify Caption location - slideshow.js Lines 154-155 move right below "//require elements" line 134 

if (this.options.captions)
     this._captions();


Change the direction of caption, slideshow.css, line 93. 

bottom: 1;


Main Page code. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Slideshow 2!</title>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <meta name="author" content="Aeron Glemann (http://www.electricprism.com/aeron/)" />
     <link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
     <script type="text/javascript" src="js/mootools.js"></script>
     <script type="text/javascript" src="js/slideshow.js"></script>
     <script type="text/javascript" src="js/slideshow.kenburns.js"></script>
     <script type="text/javascript">
          window.addEvent('domready', function(){
               var data = {
                           'http://wavesalon.biz/wp-content/uploads/2010/10/WS10_597_LR-72-Web900L.jpg': { caption: 'Click to enter.' },
                           'http://wavesalon.biz/wp-content/uploads/2010/06/WS10_129_LR-72-Web900L.jpg': { caption: 'Click to enter.' },
                           'http://wavesalon.biz/wp-content/uploads/2010/06/WS10_411_LR-72-Web900L1.jpg': { caption: 'Click to enter.' },
                           'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_423_LR-72-Web900L1.jpg': { caption: 'Click to enter.' },
                           'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_256_LR-72-Web900L1.jpg': { caption: 'Click to enter.' },
                           'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_366_LR-72-Web900L1.jpg': { caption: 'Click to enter.' },
                           'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_179_LR-72-Web900L1.jpg': { caption: 'Click to enter.' },
                           'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_190_LR-72-Web900L.jpg': { caption: 'Click to enter.' },
                           'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_267_LR-72-Web900L.jpg': { caption: 'Click to enter.' },
                           'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_039_LR-72-Web900L.jpg': { caption: 'Click to enter.' },
                           'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_160_LR-72-Web900L.jpg': { caption: 'Click to enter.' },
                           'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_015_LR-72-Web900L.jpg': { caption: 'Click to enter.' }
            };
            var myShow = new Slideshow.KenBurns('show', data, { captions: true, controller: false, delay: 3000, duration: 1000, height: 500, width: 600 });

            $('show').addEvent('click', function(){
                 window.location='http://www.google.com';
            });

            $('show').addEvent('mouseenter', function(){
                 document.body.style.cursor='pointer'
            });

            $('show').addEvent('mouseleave', function(){
                 document.body.style.cursor='auto'
            });

        });

       </script>
</head>
<body>
    < div id="show" class="slideshow">
         <img src="images/1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." />
     < /div>
</body>
</html>
Retrieved from "http://wiki.johnfreier.com/index.php?title=Wavesalon_javascript_slideshow_code&oldid=291"