| | 3 | |
|---|
| | 4 | var Slideshow = Class.create({ |
|---|
| | 5 | initialize: function(placeholder, messageholder, flickr_users_url, imgs, opt_random_order) { |
|---|
| | 6 | this.placeholder = $(placeholder); |
|---|
| | 7 | this.messageholder = $(messageholder); |
|---|
| | 8 | this.flickr_users_url = flickr_users_url; |
|---|
| | 9 | this.imgs = imgs; |
|---|
| | 10 | this.random_order = opt_random_order; |
|---|
| | 11 | this.curImgNum = 0; |
|---|
| | 12 | this.curImg = null; |
|---|
| | 13 | }, |
|---|
| | 14 | |
|---|
| | 15 | open_user: function(imgnum) { |
|---|
| | 16 | this.messageholder.innerHTML = "Loading photosets from the requested user..." |
|---|
| | 17 | location.href = this.flickr_users_url + this.imgs[this.curImgNum].owner; |
|---|
| | 18 | }, |
|---|
| | 19 | |
|---|
| | 20 | show: function() { |
|---|
| | 21 | var imgEl = new Element('img', {src: this.imgs[this.curImgNum].src, id: "coverFlowImageId" }); |
|---|
| | 22 | var a = new Element('a', { style: "cursor:pointer"}); |
|---|
| | 23 | a.appendChild(imgEl); |
|---|
| | 24 | this.placeholder.update(a); |
|---|
| | 25 | Event.observe(a, 'click', this.open_user.bind(this, this.curImgNum)); |
|---|
| | 26 | cvi_reflex.add(document.getElementById("coverFlowImageId"), { tilt: "right", distance: 5, border: 10, transparency: 80,color: "#ffffff" }); |
|---|
| | 27 | Effect.Appear(this.placeholder, {duration: 0.5}); |
|---|
| | 28 | setTimeout(this.load_next_image.bind(this),5000); |
|---|
| | 29 | }, |
|---|
| | 30 | |
|---|
| | 31 | fade_and_show: function() { |
|---|
| | 32 | Effect.Fade(this.placeholder, { duration: 0.5, afterFinish: this.show.bind(this)}); |
|---|
| | 33 | }, |
|---|
| | 34 | |
|---|
| | 35 | load_next_image: function() { |
|---|
| | 36 | if (this.random_order) { |
|---|
| | 37 | this.curImgNum = Math.floor(Math.random()*this.imgs.length); |
|---|
| | 38 | } else { |
|---|
| | 39 | this.curImgNum += 1; |
|---|
| | 40 | if (this.curImgNum == this.imgs.length) { |
|---|
| | 41 | this.curImgNum = 0; |
|---|
| | 42 | } |
|---|
| | 43 | } |
|---|
| | 44 | this.curImg = new Image ; |
|---|
| | 45 | this.curImg.onload = this.fade_and_show.bind(this); |
|---|
| | 46 | this.curImg.src = this.imgs[this.curImgNum].src; |
|---|
| | 47 | }, |
|---|
| | 48 | |
|---|
| | 49 | start: function() { |
|---|
| | 50 | this.load_next_image(); |
|---|
| | 51 | } |
|---|
| | 52 | }); |
|---|
