knut/album
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Snappier javascript with moveIntoView

Browse source
This commit is contained in:
knut 2008-11-25 06:10:06 +00:00
parent 00130d9823
commit c4b1a3ee5f
4 changed files with 32 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.cvsignore
View file

@ -1 +1,2 @@
build
target

9
gucci/assets/album.css
View file

@ -258,20 +258,13 @@ div.shadow-bottom div.start {
div.shadow-right {
background: url(shadow-right.gif) repeat-y;
height: 504px;
height: 510px;
position: absolute;
right: -6px;
top: 0;
width: 6px;
}
div.shadow-bottom div.start {
background: url(shadow-right-start.gif);
height: 6px;
position: absolute;
width: 6px;
}
div.picturebox div.darkening {
background: url(lightbox-lowlight-overlay.jpg);
position: absolute;

25
gucci/assets/album.js
View file

@ -10,7 +10,7 @@ var Album = {
spacerEvent: function (spacer, direction) {
var width = (direction < 0 ? _pictures[spacer].width : _pictures[spacer + 1].width) + 65;
new Effect.HScroll(width * direction);
new Effect.HScroll(width * direction, { queue: Album.queue, duration: 0.5, transition: Album.cubic });
},
initialize: function() {
@ -65,6 +65,7 @@ var Album = {
$(img).setStyle({ width: picture.width + 'px', height: picture.height + 'px' });
$(container).setStyle({ width: picture.width + 'px' });
$(picturebox).setStyle({ width: picture.width + 'px' });
$(container).onclick = function() { Album.moveIntoView(container); };
totalWidth += picture.width;
pictureCount += 1;
});
@ -80,7 +81,7 @@ var Album = {
setTimeout(function() {
this._loaderPause = false;
this.loadVisibleThumbs();
}.bind(this), 1050);
}.bind(this), 500);
},
loadVisibleThumbs: function() {
@ -129,22 +130,31 @@ var Album = {
img.setOpacity(0);
// alert(obj);
img.src = obj;
new Effect.Opacity(img, { from: 0, to: 1, delay: 0.2, transition: Album.cubic, duration: 0.8 });
new Effect.Opacity(img, { from: 0, to: 1, delay: 0.1, transition: Album.cubic, duration: 0.4 });
}});
});
}, 100);
},
moveIntoView: function(picturebox) {
picturebox = $(picturebox);
moveIntoView: function(container) {
container = $(container);
var picture = _pictures[container.id.substr(3)];
var windowWidth = Position.getPageSize().window.width;
var windowLeft = Position.scrollX();
var windowRight = windowLeft + windowWidth;
var pictureboxLeft = Position.page(picturebox)[0] - 32 + windowLeft;
var pictureboxRight = pictureboxLeft + 780 + 65;
var pictureboxLeft = Position.page(container)[0] - 32 + windowLeft;
var pictureboxRight = pictureboxLeft + picture.width;
var desiredCenter = (windowLeft + windowRight) / 2;
var actualCenter = (pictureboxLeft + pictureboxRight) / 2;
var delta = actualCenter - desiredCenter;
new Effect.HScroll(delta, { queue: Album.queue, duration: 0.5, transition: Album.cubic });
/*
if (pictureboxRight > windowRight) {
if (pictureboxRight > Position.getPageSize().page.width)
setTimeout(function() {
@ -155,6 +165,7 @@ var Album = {
}
else if (pictureboxLeft < windowLeft)
new Effect.HScrollTo(pictureboxLeft, { queue: Album.queue, duration: 0.5, transition: Album.cubic });
*/
},
initializeThumbsLoader: function() {

24
gucci/index.html
View file

@ -20,14 +20,6 @@
<div class="picturebox">
<div class="picture"><img src="assets/empty.gif" alt=""/></div>
<div class="shadow-bottom"><div class="start"></div></div>
<div class="shadow-right"><div class="start"></div></div>
</div>
<div class="spacer-column"></div>
<div class="picturebox">
<div class="picture"><img src="assets/empty.gif" alt=""/></div>
<div class="shadow-bottom"></div>
<div class="shadow-right"></div>
</div>
@ -35,7 +27,7 @@
<div class="picturebox">
<div class="picture"><img src="assets/empty.gif" alt=""/></div>
<div class="shadow-bottom"></div>
<div class="shadow-bottom"><div class="start"></div></div>
<div class="shadow-right"></div>
</div>
@ -43,7 +35,7 @@
<div class="picturebox">
<div class="picture"><img src="assets/empty.gif" alt=""/></div>
<div class="shadow-bottom"></div>
<div class="shadow-bottom"><div class="start"></div></div>
<div class="shadow-right"></div>
</div>
@ -51,7 +43,7 @@
<div class="picturebox">
<div class="picture"><img src="assets/empty.gif" alt=""/></div>
<div class="shadow-bottom"></div>
<div class="shadow-bottom"><div class="start"></div></div>
<div class="shadow-right"></div>
</div>
@ -59,7 +51,15 @@
<div class="picturebox">
<div class="picture"><img src="assets/empty.gif" alt=""/></div>
<div class="shadow-bottom"></div>
<div class="shadow-bottom"><div class="start"></div></div>
<div class="shadow-right"></div>
</div>
<div class="spacer-column"></div>
<div class="picturebox">
<div class="picture"><img src="assets/empty.gif" alt=""/></div>
<div class="shadow-bottom"><div class="start"></div></div>
<div class="shadow-right"></div>
</div>