Difference between revisions of "Wavesalon javascript slideshow code"
From John Freier
| Line 10: | Line 10: | ||
Change the direction of caption, slideshow.css, line 93. | Change the direction of caption, slideshow.css, line 93. | ||
bottom: 1; | bottom: 1; | ||
| − | |||
| − | |||
Latest revision as of 10: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>
