mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-04 05:10:07 +00:00
- fixed problems with binSearch (still ugly and needs revision)
- added preview loading, straight forward, might need to make it stamrter (still stub data) - some minor tweeks and changes... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
14710e2996
commit
8a99050d6b
@ -34,6 +34,17 @@ var DATA = {
|
||||
// the images object, this is indexed by image GID and contains all
|
||||
// the needed data...
|
||||
images: {
|
||||
// sub image, for testing load mechanics...
|
||||
SIZE: {
|
||||
id: 'SIZE',
|
||||
ctime: 0,
|
||||
path: './images/sizes/900px/SIZE.jpg',
|
||||
preview: {
|
||||
'150px': './images/sizes/150px/SIZE.jpg',
|
||||
'350px': './images/sizes/350px/SIZE.jpg',
|
||||
'900px': './images/sizes/900px/SIZE.jpg',
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -184,6 +195,7 @@ function isBetween(a, i, lst){
|
||||
// NOTE: this still depends on .indexOf(...), to disable set
|
||||
// disable_direct_indexing to true
|
||||
// XXX BUG this tends to fall into infinite loops...
|
||||
// XXX this is a mess, needs revision...
|
||||
function binSearch(target, lst, check, return_position, disable_direct_indexing){
|
||||
// XXX is this the correct default?
|
||||
check = check == null ? isBetween : check
|
||||
@ -209,7 +221,8 @@ function binSearch(target, lst, check, return_position, disable_direct_indexing)
|
||||
var i = l
|
||||
|
||||
while(l > 0){
|
||||
l = Math.ceil(l/2)
|
||||
// XXX this is a hack -- should we reach 0 using floor(..) instead?
|
||||
l = l <= 1 ? 0 : Math.ceil(l/2)
|
||||
res = check(target, i, lst)
|
||||
// right branch...
|
||||
if(res > 0){
|
||||
@ -514,12 +527,38 @@ function updateImage(image, gid, size){
|
||||
|
||||
// XXX STUB
|
||||
image.text(gid)
|
||||
// XXX slect best preview by size...
|
||||
// XXX
|
||||
// XXX update classes...
|
||||
|
||||
// select best preview by size...
|
||||
var url
|
||||
// XXX STUB, use real image GID...
|
||||
gid = 'SIZE'
|
||||
for(var k in DATA.images[gid].preview){
|
||||
var s = parseInt(k)
|
||||
if(s > size){
|
||||
url = 'url('+ DATA.images[gid].preview[k] +')'
|
||||
break
|
||||
}
|
||||
}
|
||||
// if no preview found use the original...
|
||||
if(url == null){
|
||||
url = 'url('+DATA.images[gid].path+')'
|
||||
}
|
||||
image.css({
|
||||
'background-image': url,
|
||||
})
|
||||
|
||||
// update classes and other indicators...
|
||||
// XXX
|
||||
}
|
||||
|
||||
// shorthand...
|
||||
function updateImages(size){
|
||||
size = size == null ? getVisibleImageSize() : size
|
||||
return $('.image').each(function(){
|
||||
updateImage($(this), null, size)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// Load count images around a given image/gid into the given ribbon.
|
||||
//
|
||||
@ -1007,6 +1046,8 @@ function fitNImages(n){
|
||||
// XXX if animating, the next two likes must be animated together...
|
||||
setElementScale($('.ribbon-set'), scale)
|
||||
centerImage(image, 'css')
|
||||
|
||||
$('.viewer').trigger('fittingImages', [n])
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -66,13 +66,20 @@
|
||||
font-size: 12pt;
|
||||
overflow: hidden;
|
||||
|
||||
background: black;
|
||||
box-sizing: border-box;
|
||||
border: solid gray 1px;
|
||||
color: white;
|
||||
|
||||
background: no-repeat 50% black;
|
||||
background-size: contain;
|
||||
/* XXX do we need this? */
|
||||
border: solid black 5px;
|
||||
}
|
||||
.current.image {
|
||||
background: red;
|
||||
background: no-repeat 50% black;
|
||||
background-size: contain;
|
||||
|
||||
/* XXX remove this... */
|
||||
border: solid red 5px;
|
||||
}
|
||||
|
||||
/* dot mark... */
|
||||
@ -258,32 +265,39 @@ $(function(){
|
||||
if(DYNAMIC_LOADING){
|
||||
// XXX move to a setup function in the lib...
|
||||
// XXX update this depending on zoom and navigation speed...
|
||||
var LOADER_THRESHOLD = 2
|
||||
var LOAD_SCREENS = 2
|
||||
// XXX update this depending on zoom and navigation speed...
|
||||
var LOADER_CHUNK = LOADER_THRESHOLD * 2
|
||||
var LOAD_THRESHOLD = 0.5
|
||||
$('.viewer')
|
||||
.on('preCenteringRibbon', function(evt, ribbon, image){
|
||||
// NOTE: we do not need to worry about centering the ribbon
|
||||
// here, just ball-park-load the correct batch...
|
||||
|
||||
// check if we are in the right range...
|
||||
var gid = getImageGID(image)
|
||||
var r = getRibbonIndex(ribbon)
|
||||
var img_before = getImageBefore(image, ribbon)
|
||||
var gid_before = getGIDBefore(gid, r)
|
||||
|
||||
// need to load a new set of images...
|
||||
if((img_before.length == 0 && gid_before != null)
|
||||
// load the head of the images...
|
||||
if(img_before.length == 0 && gid_before == null){
|
||||
var gr = DATA.ribbons[r]
|
||||
// NOTE: rolling to any number of positions greater than length
|
||||
// of the ribbon will set the ribbon to its start/end
|
||||
// depending on the sign...
|
||||
rollImages(-gr.length, ribbon)
|
||||
|
||||
// load a new set of images...
|
||||
} else if(img_before.length == 0
|
||||
|| (getImageGID(img_before)
|
||||
&& getImageGID(img_before) != gid_before)){
|
||||
// get the distance...
|
||||
var images = ribbon.find('.image')
|
||||
// middle image...
|
||||
var cur = getImageGID(images.eq(Math.round(images.length/2)))
|
||||
var gr = DATA.ribbons[r]
|
||||
//console.log('>>>', gr.indexOf(gid_before) - gr.indexOf(cur))
|
||||
rollImages(gr.indexOf(gid_before) - gr.indexOf(cur), ribbon)
|
||||
}
|
||||
})
|
||||
// XXX it takes several steps for adjacent ribbons to catch up...
|
||||
.on('centeringRibbon', function(evt, ribbon, image){
|
||||
// check if we are in the right range...
|
||||
var gid = getImageGID(image)
|
||||
@ -302,13 +316,23 @@ $(function(){
|
||||
var first = head.first()
|
||||
var last = head.first()
|
||||
|
||||
// get the frame size to load...
|
||||
var screen_size = getScreenWidthInImages()
|
||||
// NOTE: if this is greater than the number of images currently
|
||||
// loaded, it might lead to odd effects...
|
||||
// XXX need to load additional images and keep track of the
|
||||
// loaded chunk size...
|
||||
var frame_size = screen_size * LOAD_SCREENS
|
||||
var threshold = screen_size * LOAD_THRESHOLD
|
||||
|
||||
// do the loading...
|
||||
// XXX need to expand/contract the ribbon depending on zoom and speed...
|
||||
// XXX use extendRibbon, to both roll and expand/contract...
|
||||
if(tail.length < LOADER_THRESHOLD){
|
||||
var rolled = rollImages(LOADER_CHUNK, ribbon)
|
||||
if(tail.length < threshold){
|
||||
var rolled = rollImages(frame_size, ribbon)
|
||||
}
|
||||
if(head.length < LOADER_THRESHOLD){
|
||||
var rolled = rollImages(-LOADER_CHUNK, ribbon)
|
||||
if(head.length < threshold){
|
||||
var rolled = rollImages(-frame_size, ribbon)
|
||||
}
|
||||
})
|
||||
.on('shiftedImage', function(evt, image, from, to){
|
||||
@ -358,12 +382,17 @@ $(function(){
|
||||
var gr = DATA.ribbons[r]
|
||||
rollImages(gr.length, ribbon)
|
||||
})
|
||||
// XXX do we need to make this less global?
|
||||
.on('fittingImages', function(evt, n){
|
||||
updateImages()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// XXX stub...
|
||||
centerImage(focusImage($('.image').first()), 'css')
|
||||
updateImages()
|
||||
|
||||
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user