Hi,
I'm new to Prototype. I'm using it to write a little application for
our photoclub. Its goal is to allow users to upload photos, and then
vote for them.
I display all the thumbs, and a double-click on a thumb opens the
photo in full-screen (in a div). As the photo can take time to load, I
use setTimeout() to delay the display. The code looks like:
var ImageFullSimpleController = Class.create();
ImageFullSimpleController.prototype = {
initialize: function(model) {
this._model = model
this._navButtonFlashingCounter = 8;
this._navButtons = new Hash();
blabla
},
_showNavbuttons: function() {
this._navButtons.each(function(pair) {
setOpacity(pair.value, OPACITY_ON);
});
},
_hideNavbuttons: function() {
this._navButtons.each(function(pair) {
setOpacity(pair.value, OPACITY_OFF);
});
},
_flashNavButtons: function() {
this._navButtonFlashingCounter--;
if (this._navButtonFlashingCounter % 2) {
this._showNavButtons();
}
else {
this._hideNavButtons();
}
if (this._navButtonFlashingCounter) {
setTimeout(this._flashNavButtons, 300);
}
},
show: function(idx) {
this._currentIdx = idx;
var thumb = new Image();
thumb.src = "photos/thumbs/" + this._model.picts
[this._currentIdx].get('fileName');
var ratio = thumb.width / thumb.height;
if (thumb.width > thumb.height) {
var largeur = FULL_WIDTH + 2 * FULL_BORDER;
var hauteur = parseInt(FULL_WIDTH / ratio) + 2 *
FULL_BORDER;
}
else {
var largeur = parseInt(ratio * FULL_HEIGHT) + 2 *
FULL_BORDER;
var hauteur = FULL_HEIGHT + 2 * FULL_BORDER;
}
$("divFull").style.width = largeur + "px";
$("divFull").style.height = hauteur + "px";
$("divFull").style.marginLeft = -(parseInt(largeur / 2)) +
"px";
$("divFull").style.marginTop = -(parseInt(hauteur / 2)) +
"px";
$("imgFull").src = "photos/fulls/" + this._model.picts
[this._currentIdx].get('fileName');
setTimeout(this._show, 300);
},
_show: function() {
if ($("imgFull").width == FULL_WIDTH | $("imgFull").height ==
FULL_HEIGHT) {
$("divFullMask").style.display = 'block';
$("divFull").style.display = 'block';
this._flashNavButtons();
}
}
else {
setTimeout(this._show, 300);
}
},
hide: function() {
$("divFull").style.display = 'none';
$("divFullMask").style.display = 'none';
this._currentIdx = null;
},
blablabla
}
But it does not work. In the _show() method, the call to
this._flashNavButtons() leads to an error (this._flashNavButtons() is
not a function). I think I understand why: when called from the
timeout mecanism, 'this' no longer exists, or does not point anymore
on my object...
Is there a way to pass 'this' in the timeout callback? I also use such
timeout callback to make the navgation buttons blink 3 times when the
photo is opened in full size...
Thanks,
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
