Hi, Those of you who know me really well know really well that I am a very big fan of the bicycle.
http://en.wikipedia.org/wiki/Bicycle I really think it is the most efficient vehicle on the planet. wikipedia says that much from a technical standpoint. Whereas I say so from a practical viewpoint. I find that a cycle can make anyone's life simple. It along with other things improves your looks, your health, your ability to get where you want fast in Chennai (within few kilometres radius) and so on. At other times I use the public transport, our excellent buses and trains. Anyway now coming to the point, I am here to talk about the marvelous cycle plugin by Mike Alsup. Check out http://malsup.com/jquery/cycle/more.html?v2.23 If you know javascript programming, then you can look at each of the pages and view the source. The effects I see in his code are given below. *) scrollUp *) scrollDown *) scrollLeft *) scrollRight *) scrollHoriz *) scrollVert *) slideX *) slideY *) shuffle *) turnUp *) turnDown *) turnLeft *) turnRight *) zoom *) fadezoom *) blindX *) blindY *) blindZ *) growX *) growY *) curtainX *) curtainY *) cover *) uncover *) toss *) wipe Oops! Maddening, ain't it? With the cycle plugin showing off your photos to your friends is no longer a drab thing to do. Moreover I always use the image preloading technology along with the effects that I use to ensure that the images are fully loaded before they show up. We know quite well that bandwidth sucks in India. I recently created 4 simultaneous slideshows since I had to show a vast array of images(462 in number) and I know very well how short our attention spans are. The photos are very pretty, they were taken in Europe but I had to work really hard to ensure that they work properly in a web based slideshow. I have attached my code. If you need anything more, please let me know. Thanks. ;) Happy cycling! -Girish PS: If you want to see the page in action mail me privately <================== CUT HERE ====================> <!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"; xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Girish's lug post! ;) </title? <link rel="stylesheet" type="text/css" media="screen" href="cycle.css" /> <style type="text/css"> #slideshow-topleft { top: 10%; left: 10%; position: absolute; } #slideshow-topright { top: 10%; left: 60%; position: absolute; } #slideshow-bottomleft { top: 60%; left: 10%; position: absolute; } #slideshow-bottomright { top: 60%; left: 60%; position: absolute; } #slideshow, #slideshow2 { position: relative; width: 230px; margin: 35px; } #controls, #controls2 { z-index: 1000; position: absolute; top: 0; left: 0; display: none; background-color: #ffc; border: 1px solid #ddd; margin: 0; padding: 6px; width: 218px; } #controls span, #controls2 span { margin: 0 5px } </style> <script type="text/javascript" src="jquery-latest.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript"> $(function() { var imgstacktopleft = []; var imgstacktopright = []; var imgstackbottomleft = []; var imgstackbottomright = []; function preloadimagestopleft() { for (var i=1; i < 9; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Luzern-to-Paris_00' + i + '.jpg'; if(img.complete) imgstacktopleft.push(img); else $(img).bind('load', function() { imgstacktopleft.push(this); }); } for (var i=10; i < 27; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Luzern-to-Paris_0' + i + '.jpg'; if(img.complete) imgstacktopleft.push(img); else $(img).bind('load', function() { imgstacktopleft.push(this); }); } for (var i=1; i <9; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Luzern-Mount-Titlis_00' + i + '.jpg'; if(img.complete) imgstacktopleft.push(img); else $(img).bind('load', function() { imgstacktopleft.push(this); }); } for (var i=10; i <55; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Luzern-Mount-Titlis_0' + i + '.jpg'; if(img.complete) imgstacktopleft.push(img); else $(img).bind('load', function() { imgstacktopleft.push(this); }); } } function preloadimagestopright() { for (var i=0; i <9; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Venizia_00' + i + '.jpg'; if(img.complete) imgstacktopright.push(img); else $(img).bind('load', function() { imgstacktopright.push(this); }); } for (var i=10; i <37; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Venizia_0' + i + '.jpg'; if(img.complete) imgstacktopright.push(img); else $(img).bind('load', function() { imgstacktopright.push(this); }); } for (var i=3; i <9; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Dubai-2_00' + i + '.jpg'; if(img.complete) imgstacktopright.push(img); else $(img).bind('load', function() { imgstacktopright.push(this); }); } for (var i=13; i <72; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Dubai-2_0' + i + '.jpg'; if(img.complete) imgstacktopright.push(img); else $(img).bind('load', function() { imgstacktopright.push(this); }); } } function preloadimagesbottomleft() { for (var i=1; i <9; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Innsbruck-Swarovski_00' + i + '.jpg'; if(img.complete) imgstackbottomleft.push(img); else $(img).bind('load', function() { imgstackbottomleft.push(this); }); } for (var i=10; i <72; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Innsbruck-Swarovski_0' + i + '.jpg'; if(img.complete) imgstackbottomleft.push(img); else $(img).bind('load', function() { imgstackbottomleft.push(this); }); } for (var i=1; i <9; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Liechtenstein-Vaduz_00' + i + '.jpg'; if(img.complete) imgstackbottomleft.push(img); else $(img).bind('load', function() { imgstackbottomleft.push(this); }); } for (var i=10; i <34; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Liechtenstein-Vaduz_0'+ i + '.jpg'; if(img.complete) imgstackbottomleft.push(img); else $(img).bind('load', function() { imgstackbottomleft.push(this); }); } } function preloadimagesbottomright() { for (var i=13; i <99; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-London_0' + i + '.jpg'; if(img.complete) imgstackbottomright.push(img); else $(img).bind('load', function() { imgstackbottomright.push(this); }); } for (var i=100; i <129; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-London_' + i + '.jpg'; if(img.complete) imgstackbottomright.push(img); else $(img).bind('load', function() { imgstackbottomright.push(this); }); } for (var i=10; i <99; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Paris_0' + i + '.jpg'; if(img.complete) imgstackbottomright.push(img); else $(img).bind('load', function() { imgstackbottomright.push(this); }); } for (var i=3; i <9; i++) { var img = new Image(200, 200); img.src = 'Europe-May-08-Paris_00' + i + '.jpg'; if(img.complete) imgstackbottomright.push(img); else $(img).bind('load', function() { imgstackbottomright.push(this); }); } } function showsnapstopleft() { stem = 'topleft'; $('#pause-' +stem).click(function() { $('#slides-'+ stem).cycle('pause'); return false; }); $('#play-' +stem).click(function() { $('#slides-'+stem).cycle('resume'); return false; }); $('#slideshow-'+stem).hover( function() { $('#controls-'+stem).fadeIn(); }, function() { $('#controls-'+stem).fadeOut(); } ); $('#slides-' +stem).cycle({ fx: 'growY', speed: 4000, timeout: 6000, delay: 2000, before: popImgstacktopleft, next: '#next-' +stem, prev: '#prev-' +stem }); return; } function showsnapstopright() { stem = 'topright'; $('#pause-' +stem).click(function() { $('#slides-'+ stem).cycle('pause'); return false; }); $('#play-' +stem).click(function() { $('#slides-'+stem).cycle('resume'); return false; }); $('#slideshow-'+stem).hover( function() { $('#controls-'+stem).fadeIn(); }, function() { $('#controls-'+stem).fadeOut(); } ); $('#slides-' +stem).cycle({ fx: 'growY', speed: 4000, timeout: 6000, delay: 2000, before: popImgstacktopright, next: '#next-' +stem, prev: '#prev-' +stem }); return; } function showsnapsbottomleft() { stem = 'bottomleft'; $('#pause-' +stem).click(function() { $('#slides-'+ stem).cycle('pause'); return false; }); $('#play-' +stem).click(function() { $('#slides-'+stem).cycle('resume'); return false; }); $('#slideshow-'+stem).hover( function() { $('#controls-'+stem).fadeIn(); }, function() { $('#controls-'+stem).fadeOut(); } ); $('#slides-' +stem).cycle({ fx: 'growY', speed: 4000, timeout: 6000, delay: 2000, before: popImgstackbottomleft, next: '#next-' +stem, prev: '#prev-' +stem }); return; } function showsnapsbottomright() { stem = 'bottomright'; $('#pause-' +stem).click(function() { $('#slides-'+ stem).cycle('pause'); return false; }); $('#play-' +stem).click(function() { $('#slides-'+stem).cycle('resume'); return false; }); $('#slideshow-'+stem).hover( function() { $('#controls-'+stem).fadeIn(); }, function() { $('#controls-'+stem).fadeOut(); } ); $('#slides-' +stem).cycle({ fx: 'growY', speed: 4000, timeout: 6000, delay: 2000, before: popImgstackbottomright, next: '#next-' +stem, prev: '#prev-' +stem }); return; } function popImgstacktopleft(curr, next, opts) { if(opts.addSlide) while(imgstacktopleft.length) opts.addSlide(imgstacktopleft.pop()); } function popImgstacktopright(curr, next, opts) { if(opts.addSlide) while(imgstacktopright.length) opts.addSlide(imgstacktopright.pop()); } function popImgstackbottomleft(curr, next, opts) { if(opts.addSlide) while(imgstackbottomleft.length) opts.addSlide(imgstackbottomleft.pop()); } function popImgstackbottomright(curr, next, opts) { if(opts.addSlide) while(imgstackbottomright.length) opts.addSlide(imgstackbottomright.pop()); } preloadimagestopright(); preloadimagestopleft(); showsnapstopleft(); showsnapstopright(); preloadimagesbottomleft(); showsnapsbottomleft(); preloadimagesbottomright(); showsnapsbottomright(); }); </script> </head> <body> <div><a id="logo" href="http://jquery.com"; title="Powered By jQuery"></a></div> <h1 id="banner"><a id="backnav" href="./">‹‹ cycle home</a> Girish's LUG post! </h1> <div id="main"> <div id="slideshow-topleft"> <div id="controls-topleft"> <span><a href="" id="prev-topleft">Prev</a></span> <span><a href="" id="next-topleft">Next</a></span> <span><a href="" id="pause-topleft">Pause</a></span> <span><a href="" id="play-topleft">Play</a></span> </div> <div id="slides-topleft" class="pics"> <!-- bottom XXX --> <img width=200 height=200 src="Europe-May-08-Liechtenstein-Vaduz_001.jpg" /> <img width=200 height=200 src="Europe-May-08-Liechtenstein-Vaduz_020.jpg" /> </div> </div><!-- topleft --> <div id="slideshow-topright"> <div id="controls-topright"> <span><a href="" id="prev-topright">Prev</a></span> <span><a href="" id="next-topright">Next</a></span> <span><a href="" id="pause-topright">Pause</a></span> <span><a href="" id="play-topright">Play</a></span> </div> <div id="slides-topright" class="pics"> <!-- top XXX --> <img height="200" width="200" src="Copy_of_Europe-May-08-Dubai-2_001.jpg" /> <img height="200" width="200" src="Europe-May-08-Dubai-1_003.jpg" /> </div> </div><!-- topright--> <div id="slideshow-bottomleft"> <div id="controls-bottomleft"> <span><a href="" id="prev-bottomleft">Prev</a></span> <span><a href="" id="next-bottomleft">Next</a></span> <span><a href="" id="pause-bottomleft">Pause</a></span> <span><a href="" id="play-bottomleft">Play</a></span> </div> <div id="slides-bottomleft" class="pics"> <!-- top XXX --> <img width=200 height=200 src="Europe-May-08-Luzern-Mount-Titlis_001.jpg" /> <img width=200 height=200 src="Europe-May-08-Luzern-Mount-Titlis_002.jpg" /> </div> </div><!-- bottomleft--> <div id="slideshow-bottomright"> <div id="controls-bottomright"> <span><a href="" id="prev-bottomright">Prev</a></span> <span><a href="" id="next-bottomright">Next</a></span> <span><a href="" id="pause-bottomright">Pause</a></span> <span><a href="" id="play-bottomright">Play</a></span> </div> <div id="slides-bottomright" class="pics"> <!-- top XXX --> <img height="200" width="200" src="Europe-May-08-London_047.jpg" /> <img height="200" width="200" src="Europe-May-08-London_048.jpg" /> </div> </div><!-- bottomright--> </div> </body> </html> <================== CUT HERE ====================> _______________________________________________ To unsubscribe, email [EMAIL PROTECTED] with "unsubscribe <password> <address>" in the subject or body of the message. http://www.ae.iitm.ac.in/mailman/listinfo/ilugc
