flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2026-01-11 12:47:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed zooming, now uses the correct proportions...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-05-17 16:03:40 +04:00
parent 7bdc575a05
commit d41452a766
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/base.js
View File

@ -132,8 +132,12 @@ function getRelativeVisualPosition(outer, inner){
// Returns the image size (width) as viewed on screen... // Returns the image size (width) as viewed on screen...
function getVisibleImageSize(){ //
return $('.image').outerWidth() * getElementScale($('.ribbon-set')) // NOTE: dim can be either 'height' or 'width', this dimension will be
// used as image "diameter" (default: width)
function getVisibleImageSize(dim){
dim = dim != 'height' ? 'outerWidth' : 'outerHeight'
return $('.image')[dim]() * getElementScale($('.ribbon-set'))
} }
@ -788,15 +792,17 @@ function fitNImages(n){
} }
// NOTE: here we measure image height as width may change depending on
// proportions...
function zoomIn(){ function zoomIn(){
var w = getScreenWidthInImages() var w = getScreenWidthInImages(getVisibleImageSize('height'))
if(w > 1){ if(w > 1){
w = w / ZOOM_SCALE w = w / ZOOM_SCALE
fitNImages(w >= 1 ? w : 1) fitNImages(w >= 1 ? w : 1)
} }
} }
function zoomOut(){ function zoomOut(){
var w = getScreenWidthInImages() var w = getScreenWidthInImages(getVisibleImageSize('height'))
if(w <= MAX_SCREEN_IMAGES){ if(w <= MAX_SCREEN_IMAGES){
w = w * ZOOM_SCALE w = w * ZOOM_SCALE
fitNImages(w <= MAX_SCREEN_IMAGES ? w : MAX_SCREEN_IMAGES) fitNImages(w <= MAX_SCREEN_IMAGES ? w : MAX_SCREEN_IMAGES)

5
ui/index.html
View File

@ -257,16 +257,17 @@ body {
.single-image-mode.viewer .image { .single-image-mode.viewer .image {
background-color: transparent; background-color: transparent;
border: none; /* NOTE: need to keep a distance from screen borders... */
border: solid transparent 2px;
} }
.single-image-mode.viewer .image:not(.current) { .single-image-mode.viewer .image:not(.current) {
/* XXX for some reason this breaks the alignment on large magnifications... /* XXX for some reason this breaks the alignment on large magnifications...
display: none; display: none;
*/ */
visibility: hidden;
/* XXX this makes images pass through the :visible filter... /* XXX this makes images pass through the :visible filter...
opacity: 0; opacity: 0;
*/ */
visibility: hidden;
} }