Difference between revisions of "Wavesalon javascript slideshow code"

From John Freier
Jump to: navigation, search
(Created page with ' <!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>Slide…')
 
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+
Web Widget Site
−
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
http://www.electricprism.com/aeron/slideshow/
−
<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">
+
−
//<![CDATA[
+
−
  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(){
+
Modify Caption location - slideshow.js
−
          //alert('clicked!');
+
Lines 154-155 move right below "//require elements" line 134
−
          window.location='http://www.google.com';
+
if (this.options.captions)
−
  });
+
      this._captions();
  
−
  $('show').addEvent('mouseenter', function(){
 
−
document.body.style.cursor='pointer'
 
−
  });
 
  
−
  $('show').addEvent('mouseleave', function(){
+
Change the direction of caption, slideshow.css, line 93.
−
document.body.style.cursor='auto'
+
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">
−
</script>
+
<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>
 
  </head>
 
  <body>
 
  <body>
−
  <div id="show" class="slideshow">
+
    < div id="show" class="slideshow">
−
    <img src="images/1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." />
+
          <img src="images/1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." />
−
  </div>
+
      < /div>
 
  </body>
 
  </body>
 
  </html>
 
  </html>

Latest revision as of 11:15, 10 March 2011

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"