mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 19:00:09 +00:00
added image info on hover...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
bf1766351e
commit
d575d1b618
40
ui/data.js
40
ui/data.js
@ -15,7 +15,7 @@ var MAX_SCREEN_IMAGES = 12
|
||||
|
||||
// if set to true each image will have basic info written to its html
|
||||
// title attr.
|
||||
var IMAGE_TITLE_DATA = true
|
||||
var IMAGE_INFO = true
|
||||
|
||||
var CACHE_DIR = '.ImageGridCache'
|
||||
|
||||
@ -390,7 +390,7 @@ function imagesFromUrls(lst){
|
||||
|
||||
$.each(lst, function(i, e){
|
||||
|
||||
// this is ugly but I'm bored so this pretty...
|
||||
// this is ugly but I'm bored so this is pretty...
|
||||
var ii = i < 10 ? '0000000' + i
|
||||
: i < 100 ? '000000' + i
|
||||
: i < 1000 ? '00000' + i
|
||||
@ -436,12 +436,6 @@ function dataFromImages(images){
|
||||
function ribbonsFromFavDirs(path, images, cmp){
|
||||
path = path == null ? BASE_URL : path
|
||||
images = images == null ? IMAGES : images
|
||||
/*cmp = cmp == null ?
|
||||
function(a, b){
|
||||
return imageDateCmp(a, b, images)
|
||||
}
|
||||
: cmp
|
||||
*/
|
||||
|
||||
// build a reverse name-gid index for fast access...
|
||||
var index = {}
|
||||
@ -554,13 +548,14 @@ function updateImage(image, gid, size){
|
||||
}
|
||||
size = size == null ? getVisibleImageSize('max') : size
|
||||
|
||||
// get the image data...
|
||||
var img_data = IMAGES[gid]
|
||||
if(img_data == null){
|
||||
img_data = STUB_IMAGE_DATA
|
||||
}
|
||||
var name = img_data.path.split('/').pop()
|
||||
|
||||
// get the url...
|
||||
// preview...
|
||||
var preview = getBestPreview(gid, size)
|
||||
image
|
||||
.css({
|
||||
@ -569,21 +564,34 @@ function updateImage(image, gid, size){
|
||||
.attr({
|
||||
order: DATA.order.indexOf(gid),
|
||||
orientation: img_data.orientation == null ? 0 : img_data.orientation,
|
||||
title: IMAGE_TITLE_DATA ?
|
||||
'Image: ' + name +'\n'+
|
||||
'Order: ' + DATA.order.indexOf(gid) +'\n'+
|
||||
'GID: '+ gid +'\n'+
|
||||
'Preview size:'+ preview.size : '',
|
||||
})
|
||||
|
||||
// setup marks...
|
||||
// image info...
|
||||
if(IMAGE_INFO){
|
||||
var info = image.find('.info')
|
||||
if(info.length == 0){
|
||||
info = $('<div/>')
|
||||
.addClass('info')
|
||||
.appendTo(image)
|
||||
}
|
||||
info.html(
|
||||
'Image: ' + name +
|
||||
'<br>Order: ' + DATA.order.indexOf(gid) +
|
||||
'<br>GID: '+ gid +
|
||||
(window.DEBUG ? '<br>Preview size:'+ preview.size : '') +
|
||||
''
|
||||
)
|
||||
} else {
|
||||
image.find('.info').remove()
|
||||
}
|
||||
|
||||
// marks...
|
||||
if(MARKED.indexOf(gid) != -1){
|
||||
image.addClass('marked')
|
||||
} else {
|
||||
image.removeClass('marked')
|
||||
}
|
||||
|
||||
|
||||
return image
|
||||
}
|
||||
|
||||
|
||||
@ -56,6 +56,7 @@ body {
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ribbon {
|
||||
position: relative;
|
||||
display: block;
|
||||
@ -78,6 +79,8 @@ body {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -106,6 +109,8 @@ body {
|
||||
border: solid red 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* image turning... */
|
||||
/* NOTE: need to account for proportions after turning... */
|
||||
.image[orientation="90"] {
|
||||
@ -131,6 +136,7 @@ body {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* dot mark... */
|
||||
.marks-visible.viewer .marked.image:after {
|
||||
display: block;
|
||||
@ -238,6 +244,75 @@ body {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Image info */
|
||||
.image .info {
|
||||
display: none;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
background: black;
|
||||
opacity: 0.7;
|
||||
|
||||
-moz-user-select: auto;
|
||||
-webkit-user-select: auto;
|
||||
-o-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
}
|
||||
.image .info::selection {
|
||||
color: white;
|
||||
background: red;
|
||||
}
|
||||
.image-info-visible.viewer .image:hover .info {
|
||||
display: block;
|
||||
}
|
||||
.single-image-mode.viewer .image .info {
|
||||
display: none;
|
||||
}
|
||||
.image[orientation="90"] .info {
|
||||
top: auto;
|
||||
left: 100%;
|
||||
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.image[orientation="180"] .info {
|
||||
top: 0px;
|
||||
bottom: auto;
|
||||
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.image[orientation="270"] .info {
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
|
||||
-ms-transform-origin: bottom right;
|
||||
-webkit-transform-origin: bottom right;
|
||||
transform-origin: bottom right;
|
||||
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.up-indicator,
|
||||
.down-indicator,
|
||||
.start-indicator,
|
||||
|
||||
@ -16,6 +16,29 @@ var DIRECTION = 'next'
|
||||
/*********************************************************************/
|
||||
|
||||
var KEYBOARD_CONFIG = {
|
||||
// help mode...
|
||||
// NOTE: need to keep all info modes before the rest so as to give
|
||||
// their bindings priority...
|
||||
'.help-mode': {
|
||||
title: 'Help',
|
||||
doc: 'NOTE: In this mode all other key bindings are disabled, except '+
|
||||
'the ones explicitly defined here.',
|
||||
ignore: '*',
|
||||
|
||||
Esc: doc('Close help',
|
||||
function(){
|
||||
toggleKeyboardHelp('off')
|
||||
return false
|
||||
}),
|
||||
H: 'Esc',
|
||||
Q: 'Esc',
|
||||
// '?'
|
||||
'/': {
|
||||
shift: 'Esc',
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
// single image mode only...
|
||||
'.single-image-mode': {
|
||||
title: 'Single image mode',
|
||||
@ -27,34 +50,23 @@ var KEYBOARD_CONFIG = {
|
||||
centerRibbons()
|
||||
}),
|
||||
Esc: doc('Exit single image mode',
|
||||
function(){ toggleSingleImageMode('off') }),
|
||||
function(){
|
||||
toggleSingleImageMode('off')
|
||||
return false
|
||||
}),
|
||||
Q: 'Esc',
|
||||
},
|
||||
|
||||
|
||||
// single image mode only...
|
||||
'.marked-only-view:not(.single-image-mode)': {
|
||||
title: 'Marked only view',
|
||||
|
||||
Esc: doc('Exit marked only view',
|
||||
function(){ toggleMarkedOnlyView('off') })
|
||||
},
|
||||
|
||||
|
||||
// help mode...
|
||||
'.help-mode': {
|
||||
title: 'Help',
|
||||
doc: 'NOTE: In this mode all other key bindings are disabled, except '+
|
||||
'the ones explicitly defined here.',
|
||||
ignore: '*',
|
||||
|
||||
Esc: doc('Close help',
|
||||
function(){ toggleKeyboardHelp('off') }),
|
||||
H: 'Esc',
|
||||
Q: 'Esc',
|
||||
// '?'
|
||||
'/': {
|
||||
shift: 'Esc',
|
||||
},
|
||||
function(){
|
||||
toggleMarkedOnlyView('off')
|
||||
return false
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@ -291,6 +303,9 @@ var KEYBOARD_CONFIG = {
|
||||
'Position (global): '+ order +'/'+ DATA.order.length +'\n'+
|
||||
'')
|
||||
}),
|
||||
// XXX group this with other info stuff into a single on/off toggle...
|
||||
shift: doc('Toggle image info visibility (on hover)',
|
||||
function(){ toggleImageInfo() }),
|
||||
ctrl: doc('Invert image marks',
|
||||
function(){ invertImageMarks() }),
|
||||
},
|
||||
|
||||
@ -61,6 +61,9 @@ var toggleTheme = createCSSClassToggler('.viewer',
|
||||
})
|
||||
|
||||
|
||||
var toggleImageInfo = createCSSClassToggler('.viewer', '.image-info-visible')
|
||||
|
||||
|
||||
// NOTE: this confirmsto the css toggler protocol, but is not implemented
|
||||
// via createCSSClassToggler as we do not need to set any classes,
|
||||
// al least at this point...
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user