Posted By

elightbo on 10/07/08


Tagged

prototype slidedshow


Versions (?)

Who likes this?

8 people have marked this snippet as a favorite

jamesming
basicmagic
wizard04
drye
Potlatch
shapeshifta

aegony


Prototype and scriptaculous slideshow


 / Published in: JavaScript
 

URL: www.uwgb.edu

Slideshow class I made up for UWGB using the prototype framework and scriptaculous. Slideshows div and everything within. Pre-caches all images within div. Could easily incorporate back button with the frame.

  1. function mran(ma,mi)
  2. {return(Math.round(Math.random()*(ma-mi))+mi)}
  3.  
  4. var Slideshow = Class.create({
  5. initialize: function(delay, totalElmt, elmtName) {
  6. this.delay = delay;
  7. this.totalElmt = totalElmt;
  8. this.paused = 0;
  9. this.arrSlideElmt = [totalElmt];
  10. this.curElmtNum = mran(totalElmt, 1); //randomize first element
  11. //preload all elements into array and preload all images within element
  12. for (i = 1; i <= totalElmt; i++) {
  13. this.arrSlideElmt[i] = $(elmtName + i);
  14. this.arrSlideElmt[i].observe('mouseover', function() { this.paused = 1; }.bind(this)); //pause on mouseover
  15. this.arrSlideElmt[i].observe('mouseout', function() { this.paused = 0; }.bind(this)); //resume on mouseout
  16. $$(this.arrSlideElmt[i].img).each(function(img) {
  17. img = new Image();
  18. });
  19. }
  20. $$('img.arrow').each(function(node) { //looks for all arrows (pointing right) and handles click event
  21. node.observe('click', function(s){
  22. this.arrSlideElmt[this.curElmtNum].setStyle({
  23. display: 'none'
  24. });
  25. this.checkSlide();
  26. this.arrSlideElmt[this.curElmtNum].setStyle({
  27. display: 'block'
  28. });
  29. s.stop();
  30. }.bind(this));
  31. }.bind(this));
  32. },
  33. start: function() {
  34. //show first element without effect
  35. this.arrSlideElmt[this.curElmtNum].setStyle({
  36. display: 'block'
  37. });
  38. this.executor = new PeriodicalExecuter(function() {
  39. this.next(); //start slidehow
  40. }.bind(this), this.delay);
  41. },
  42.  
  43. next: function(){
  44. if (!this.paused) {
  45. this.update();
  46. }
  47. },
  48. update: function() {
  49. new Effect.Fade(this.arrSlideElmt[this.curElmtNum],{afterFinish:function(){
  50. this.checkSlide();
  51. new Effect.Appear(this.arrSlideElmt[this.curElmtNum]);
  52. }.bind(this)});
  53. },
  54. checkSlide: function() {
  55. if (this.curElmtNum == this.totalElmt) { this.curElmtNum = 1; }
  56. else { this.curElmtNum ++; }
  57. }
  58. });
  59.  
  60. window.onload = function() {
  61. // setTimeout("fadeOut(" + random + ")", 10000);
  62. totalFeatures = $('rotateFeature').childElements().size();
  63. var slideshow = new Slideshow(6, totalFeatures, "rotate");
  64. slideshow.start();
  65. }
  66. <!--
  67. For this example, a sample slide element looks like this every element id is labled rotate plus #. should have set this up to not be dependent on the div id #//-->
  68. <div id="rotate2" style="display: none;">
  69. <div>
  70. <a href="http://blog.uwgb.edu/inside/index.php/featured/leading-learning/09/17/jackie_nitschke_center/">
  71. <img src="/univcomm/includes/images/feature/feature4.jpg" alt="Nitschke fans" />
  72. </a>
  73. <h5>
  74. <a href="http://blog.uwgb.edu/inside/index.php/featured/leading-learning/09/17/jackie_nitschke_center/">Nitschke fans</a>
  75. </h5>
  76. <p>Marketing students lend hand to AODA center</p>
  77. </div>
  78. <a href="http://blog.uwgb.edu/inside/">
  79. <img src="/files/images/icons/arrow.gif" class="arrow" alt="arrow" />
  80. </a>
  81. <p class="featuredConnections"><a href="http://blog.uwgb.edu/inside/">featured connections</a></p>
  82. </div>

Report this snippet  

You need to login to post a comment.