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

working experiment, getting happy about the code...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-09-04 01:06:35 +04:00
parent aa422c076e
commit 4f43673549
2 changed files with 33 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
ui/experiments/dynamic-loading.html
View File

@ -117,21 +117,7 @@ function makeImage(id){
return $('<div class="image"/>') return $('<div class="image"/>')
.attr({id: id}) .attr({id: id})
.click(selectImage) .click(selectImage)
} .addClass('unloaded')
function updateImage(image, cur, r, index){
console.log(cur, r, index)
var id = image.attr('id')
if(id == cur){
image.addClass('current')
}
var cur_i = index.indexOf(cur)
if(cur_i < 0 || Math.abs(index.indexOf(id)-cur_i) > r){
image.addClass('unloaded')
} else {
image.removeClass('unloaded')
}
return image
} }
function loadJSON(json){ function loadJSON(json){
@ -145,18 +131,35 @@ function loadJSON(json){
for(var i=0; i<ribbons.length; i++){ for(var i=0; i<ribbons.length; i++){
var images = ribbons[i] var images = ribbons[i]
var index = enumerate(images) var index = enumerate(images)
if(view_ribbons[i] == null){
var ribbon = $('<div class="ribbon"/>').appendTo(field) var ribbon = $('<div class="ribbon"/>').appendTo(field)
for(var j in images){ for(var j in images){
updateImage(makeImage(j), cur_id, r, index).appendTo(ribbon) makeImage(j).appendTo(ribbon)
}
} else {
var ribbon = $(view_ribbons[i])
for(var j in images){
updateImage(ribbon.children('#'+j), cur_id, r, index)
} }
} }
$('#'+cur_id).click()
} }
function updateRibbon(img){
var images = img.parents('.ribbon').children('.image')
var r = Math.floor(LOAD/2)
var cur_i = images.index(img)
// load...
var loading = $([])
for(var i=Math.max(0, cur_i-r); i<=Math.min(images.length, cur_i+r); i++){
loading.push(images[i])
images[i] = {}
}
loading
.addClass('loaded')
.removeClass('unloaded')
// unload...
images.filter('.loaded').removeClass('loaded').addClass('unloaded')
//$('.image.loaded').not('._cur').removeClass('loaded').addClass('unloaded')
//images.filter('._cur').removeClass('_cur')
$('.image._cur').removeClass('_cur')
} }
function selectImage(){ function selectImage(){
@ -166,7 +169,8 @@ function selectImage(){
// update json... // update json...
json.position = $(this).attr('id') json.position = $(this).attr('id')
// update visible images... // update visible images...
loadJSON(json) //loadJSON(json)
updateRibbon($('.current.image'))
} }
loadJSON(json) loadJSON(json)

6
ui/gallery-prototype.js
View File

@ -1161,7 +1161,7 @@ function makeImage(url, order, set_order){
set_order = setImageOrder set_order = setImageOrder
} }
return (setupImageEventHandlers( return (setupImageEventHandlers(
set_order($('<div class="image"></div>') set_order($('<div class="image"/>')
.css({ 'background-image': 'url('+url+')' }), order))) .css({ 'background-image': 'url('+url+')' }), order)))
} }
@ -1270,9 +1270,9 @@ function loadJSON(data, position, set_order){
var ribbon = $('<div class="ribbon"></div>') var ribbon = $('<div class="ribbon"></div>')
.appendTo(field) .appendTo(field)
for(var j in images){ for(var j in images){
var image = $(images[j]) var image = images[j]
// create image... // create image...
makeImage(image.attr('url'), j, set_order) makeImage(image['url'], j, set_order)
.appendTo(ribbon) .appendTo(ribbon)
} }
} }