flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

- Switched to browser animation (silly me for not doing it in the first place)...

Browse Source 
- minor fixes and cleanup...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-06-05 17:35:13 +04:00
parent 0032531b76
commit 82e1345fb8
1 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ui/gallery.html
View File

@ -27,35 +27,32 @@ ISSUES:
$(document).ready(function() { $(document).ready(function() {
$(".image").click(function(e) { $(".image").click(function(e) {
var cur = $(this)
// switch classes... // switch classes...
$(this).parents().siblings().children(".image").removeClass("current-image"); cur.parents().siblings().children(".image").removeClass("current-image")
$(this).siblings(".image").removeClass("current-image"); cur.siblings(".image").removeClass("current-image")
$(this).siblings().children(".image").removeClass("current-image"); cur.siblings().children(".image").removeClass("current-image")
$(this).parents().siblings(".ribbon").removeClass("current-ribbon"); cur.parents().siblings(".ribbon").removeClass("current-ribbon")
$(this).addClass("current-image"); cur.addClass("current-image")
$(this).parents(".ribbon").addClass("current-ribbon"); cur.parents(".ribbon").addClass("current-ribbon")
var container = $(this).parents('.container') var container = cur.parents('.container')
var field = $(this).parents(".field") var field = cur.parents(".field")
var cur_image = $(this)
var container_offset = container.offset() var image_offset = cur.offset()
var image_offset = cur_image.offset()
var field_offset = field.offset() var field_offset = field.offset()
// center the current image... // center the current image...
/* XXX this is really jumpy...
field.animate({
*/
field.css({ field.css({
left: field_offset.left - image_offset.left + (container.innerWidth() - cur_image.innerWidth())/2, left: field_offset.left - image_offset.left + (container.innerWidth() - cur.innerWidth())/2,
top: field_offset.top - image_offset.top + (container.innerHeight() - cur_image.innerHeight())/2 top: field_offset.top - image_offset.top + (container.innerHeight() - cur.innerHeight())/2
}) })
// XXX do I need this???
e.preventDefault(); e.preventDefault();
}); });
@ -101,6 +98,12 @@ function nextImage(){
overflow: visible; overflow: visible;
top: 0px; top: 0px;
left: -100px; left: -100px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
} }
.ribbon { .ribbon {