2019-07-23 18:17:17 +02:00
let showcase = $ ( "#imgBig" ) ;
let showcaseButtonContainer = $ ( "#photoButtonsContainer" ) ;
let showcaseDownload = $ ( "#downloadButton" ) ;
let photoOverlay = $ ( "#photoOverlay" ) ;
2018-06-15 16:32:23 +02:00
let headerTop = $ ( "#header-top" ) ;
let sideNav = $ ( "#menuSidenav" ) ;
2019-07-23 18:17:17 +02:00
let loading = $ ( "#loadingIconContainer" ) ;
let move _photo = false ;
let grab _offsetX = 0 ;
let grab _offsetY = 0 ;
2018-06-24 07:41:02 +02:00
2019-07-23 18:17:17 +02:00
let idle _time = 0 ;
let isMobile = window . matchMedia ( "only screen and (max-width: 480px)" ) . matches ;
let isMouseOverButtons = false ;
2018-06-15 16:32:23 +02:00
$ ( document ) . ready (
function ( ) {
showcase . bind ( "mousewheel" , function ( event , delta ) {
let min _width = $ ( window ) . width ( ) / 5 ;
let min _height = $ ( window ) . height ( ) / 5 ;
let max _width = $ ( window ) . width ( ) * 5 ;
let max _height = $ ( window ) . height ( ) * 5 ;
let scale = 150 / 100 ;
if ( delta < 0 )
scale = 1 / scale ;
let cursorY = event . pageY - $ ( window ) . scrollTop ( ) ;
let offsetX = event . pageX - ( showcase . position ( ) . left + showcase . width ( ) / 2 ) ;
let offsetY = cursorY - ( showcase . position ( ) . top + showcase . height ( ) / 2 ) ;
let new _width = showcase . width ( ) * scale ;
let new _height = showcase . height ( ) * scale ;
if ( new _width > max _width || new _width < min _width )
new _width = 0 ;
if ( new _height > max _height || new _height < min _height )
new _height = 0 ;
if ( new _width !== 0 && new _height !== 0 ) {
let new _left = event . pageX - ( offsetX * scale ) ;
let new _top = cursorY - ( offsetY * scale ) ;
showcase . width ( new _width ) ;
showcase . height ( new _height ) ;
if ( new _height > $ ( window ) . height ( ) || new _width > $ ( window ) . width ( ) ) {
showcase . css ( 'left' , new _left + 'px' ) ;
showcase . css ( 'top' , new _top + 'px' ) ;
2018-06-24 07:41:02 +02:00
showcase . css ( 'cursor' , 'move' ) ;
2018-06-15 16:32:23 +02:00
}
else {
showcase . css ( 'left' , $ ( window ) . width ( ) / 2 + 'px' ) ;
showcase . css ( 'top' , $ ( window ) . height ( ) / 2 + 'px' ) ;
2018-06-24 07:41:02 +02:00
showcase . css ( 'cursor' , 'default' ) ;
2018-06-15 16:32:23 +02:00
}
}
return false ;
} ) ;
2019-07-23 18:17:17 +02:00
document . getElementById ( "photosTitle" ) . scrollIntoView ( ) ;
2018-10-04 14:05:53 +02:00
showcase . on ( 'dragstart' , function ( event ) { event . preventDefault ( ) ; } ) ; // Stop image drag out of page
if ( ! isMobile )
setInterval ( timerIncrement , 100 ) ;
2018-06-15 16:32:23 +02:00
}
) ;
2018-03-25 14:19:53 +02:00
2018-10-04 14:27:13 +02:00
$ ( document ) . mousemove ( function ( event ) {
let cursorY = event . pageY - $ ( window ) . scrollTop ( ) ;
2019-07-23 18:17:17 +02:00
let elem = document . elementFromPoint ( event . pageX , cursorY ) ;
isMouseOverButtons = ! ( elem . id === "closeBack" || elem . id === "loadingIconContainer" || elem . id === showcase . attr ( 'id' ) ) ; // Prevent entering fullscreen when cursor on control buttons
2018-06-24 07:41:02 +02:00
idle _time = 0 ;
} ) ;
showcase . mousemove ( function ( event ) {
if ( showcase . height ( ) > $ ( window ) . height ( ) || showcase . width ( ) > $ ( window ) . width ) {
showcase . css ( 'cursor' , 'move' ) ;
if ( move _photo ) {
let cursorY = event . pageY - $ ( window ) . scrollTop ( ) ;
let offsetX = event . pageX - ( showcase . position ( ) . left + showcase . width ( ) / 2 ) ;
let offsetY = cursorY - ( showcase . position ( ) . top + showcase . height ( ) / 2 ) ;
let new _left = showcase . position ( ) . left + showcase . width ( ) / 2 + offsetX - grab _offsetX ;
let new _top = showcase . position ( ) . top + showcase . height ( ) / 2 + offsetY - grab _offsetY ;
showcase . css ( 'left' , new _left + 'px' ) ;
showcase . css ( 'top' , new _top + 'px' ) ;
}
}
else {
showcase . css ( 'cursor' , 'default' ) ;
}
} ) ;
showcase . mousedown ( function ( event ) {
move _photo = true ;
let cursorY = event . pageY - $ ( window ) . scrollTop ( ) ;
grab _offsetX = event . pageX - ( showcase . position ( ) . left + showcase . width ( ) / 2 ) ;
grab _offsetY = cursorY - ( showcase . position ( ) . top + showcase . height ( ) / 2 ) ;
2018-10-04 14:05:53 +02:00
if ( isMobile )
toggleFullscreen ( ) ;
2018-06-24 07:41:02 +02:00
} ) ;
showcase . mouseup ( function ( ) {
move _photo = false ;
} ) ;
showcase . mouseleave ( function ( ) {
move _photo = false ;
} ) ;
2018-03-26 14:22:35 +02:00
/ *
* Display selected image in showcase
* When clicked , display image in full size
* /
2018-03-25 14:19:53 +02:00
function displayBig ( elem ) {
2019-07-23 18:17:17 +02:00
isMouseOverButtons = false ; // Allow fullscreen when clicking on an image without mouving the mouse
2018-03-26 14:22:35 +02:00
changeImage ( $ ( elem ) . attr ( 'src' ) ) ;
2018-04-22 11:37:22 +02:00
hideTopBar ( ) ;
2018-04-21 15:20:18 +02:00
disableFullscreen ( ) ;
photoOverlay . fadeIn ( 500 ) ;
2019-07-23 18:17:17 +02:00
$ ( 'body' ) . css ( 'overflow' , 'hidden' ) ;
2018-03-25 13:22:28 +02:00
}
2018-03-25 14:19:53 +02:00
2018-04-23 09:52:46 +02:00
function getSourceFromThumbnail ( source ) {
return source . replace ( "photos_thumb/" , "photos/" ) ;
}
2019-07-23 18:17:17 +02:00
function getThumbnailFromSource ( source ) {
return source . replace ( "photos/" , "photos_thumb/" ) ;
}
2018-03-26 14:22:35 +02:00
/ *
* Hide showcase image
* /
2018-03-25 13:22:28 +02:00
function closeBig ( ) {
2018-04-22 11:37:22 +02:00
showTopBar ( ) ;
2018-04-21 15:20:18 +02:00
disableFullscreen ( ) ;
photoOverlay . fadeOut ( 500 ) ;
2019-07-23 18:17:17 +02:00
$ ( 'body' ) . css ( 'overflow' , 'auto' ) ;
scrollToShowcaseImage ( ) ;
2018-03-25 13:22:28 +02:00
}
2018-03-25 14:19:53 +02:00
2019-07-23 18:17:17 +02:00
function scrollToShowcaseImage ( ) {
let source = showcase . attr ( 'src' ) ;
let image = $ ( "img[src$='" + getThumbnailFromSource ( source ) + "']" ) ;
if ( image !== undefined ) {
image . get ( 0 ) . scrollIntoView ( ) ;
}
}
2018-04-21 15:20:18 +02:00
function enableFullscreen ( ) {
2019-07-23 18:17:17 +02:00
showcaseButtonContainer . fadeOut ( 500 ) ;
2018-04-21 15:20:18 +02:00
}
function disableFullscreen ( ) {
2019-07-23 18:17:17 +02:00
showcaseButtonContainer . fadeIn ( 500 ) ;
2018-04-22 11:37:22 +02:00
}
2018-10-04 14:05:53 +02:00
function toggleFullscreen ( ) {
2019-07-23 18:17:17 +02:00
if ( isFullscreen ( ) )
2018-10-04 14:05:53 +02:00
disableFullscreen ( ) ;
else
enableFullscreen ( ) ;
}
2018-04-22 11:37:22 +02:00
function hideTopBar ( ) {
headerTop . fadeOut ( 500 ) ;
sideNav . fadeOut ( 500 ) ;
}
function showTopBar ( ) {
2018-04-21 15:20:18 +02:00
headerTop . fadeIn ( 500 ) ;
sideNav . fadeIn ( 500 ) ;
}
2019-07-23 18:17:17 +02:00
function isFullscreen ( ) {
return showcaseButtonContainer . css ( "display" ) === "none" ;
2018-06-24 07:41:02 +02:00
}
2018-04-22 11:37:22 +02:00
2018-06-24 07:41:02 +02:00
function timerIncrement ( ) {
2018-10-04 14:27:13 +02:00
if ( isMouseOverButtons )
idle _time = 0 ;
else
idle _time = idle _time + 1 ;
2019-07-23 18:17:17 +02:00
if ( idle _time > 10 && ! isFullscreen ( ) ) { // 1 second
2018-06-24 07:41:02 +02:00
enableFullscreen ( ) ;
2019-07-23 18:17:17 +02:00
} else if ( idle _time <= 10 && isFullscreen ( ) ) {
2018-06-24 07:41:02 +02:00
disableFullscreen ( ) ;
}
}
2018-04-22 11:37:22 +02:00
2018-04-21 15:20:18 +02:00
/ *
* Control images with keyboard arrows
* /
2018-06-15 16:32:23 +02:00
$ ( document ) . keydown ( function ( e ) {
2018-11-08 14:19:21 +01:00
switch ( e . keyCode ) {
2018-04-21 15:20:18 +02:00
case 37 : // left
displayNext ( - 1 ) ;
break ;
case 39 : // right
displayNext ( 1 ) ;
break ;
2019-07-23 18:17:17 +02:00
case 27 : // escape
2018-11-08 14:19:21 +01:00
closeBig ( ) ;
break ;
2018-06-15 16:32:23 +02:00
default :
return ; // exit this handler for other keys
2018-04-21 15:20:18 +02:00
}
e . preventDefault ( ) ; // prevent the default action (scroll / move caret)
} ) ;
2018-04-21 20:36:11 +02:00
2018-03-26 14:22:35 +02:00
/ *
* Display next / last image in showcase . When reaching end / start , loop back to start / end
* /
2018-03-25 13:22:28 +02:00
function displayNext ( direction ) {
2019-07-23 18:17:17 +02:00
let currentSrc = showcase . attr ( 'src' ) ;
let photos = document . getElementsByClassName ( "photo" ) ;
let current = 0 ;
for ( let i = 0 ; i < photos . length ; i ++ ) {
2018-04-23 09:52:46 +02:00
if ( getSourceFromThumbnail ( $ ( photos [ i ] ) . attr ( 'src' ) ) === currentSrc ) {
2018-03-25 13:22:28 +02:00
current = i ;
}
}
2019-07-23 18:17:17 +02:00
let next = current + direction ;
let nextId = "" ;
2018-03-25 13:22:28 +02:00
if ( direction > 0 ) {
nextId = "#photo-0" ;
} else {
nextId = "#photo-" + ( photos . length - 1 ) ;
}
2018-03-25 14:19:53 +02:00
if ( document . getElementById ( "photo-" + next ) != null ) {
2018-03-25 13:22:28 +02:00
nextId = "#photo-" + next ;
}
2019-07-23 18:17:17 +02:00
let nextSrc = $ ( nextId ) . attr ( 'src' ) ;
2018-03-26 14:22:35 +02:00
changeImage ( nextSrc ) ;
}
/ *
2018-04-22 11:37:22 +02:00
* Change image source , link and download
2018-03-26 14:22:35 +02:00
* /
2018-04-23 09:52:46 +02:00
function changeImage ( thumb ) {
2018-04-23 12:04:40 +02:00
displayLoading ( ) ;
2018-10-04 14:05:53 +02:00
showcase . css ( 'display' , 'none' ) ;
2018-06-15 16:32:23 +02:00
showcase . on ( 'load' , function ( ) {
2018-04-23 12:04:40 +02:00
hideLoading ( ) ;
2018-10-04 14:05:53 +02:00
showcase . css ( 'display' , 'block' ) ;
if ( $ ( showcase ) . width ( ) > $ ( window ) . width ( ) ) { // prevent display problems on portait devices
2019-07-23 18:17:17 +02:00
let scale = $ ( window ) . width ( ) * 0.9 / $ ( showcase ) . width ( ) ;
2018-10-04 14:05:53 +02:00
$ ( showcase ) . width ( scale * $ ( showcase ) . width ( ) ) ;
$ ( showcase ) . height ( scale * $ ( showcase ) . height ( ) ) ;
}
2018-04-23 12:04:40 +02:00
} ) ;
2019-07-23 18:17:17 +02:00
let source = getSourceFromThumbnail ( thumb ) ;
2018-04-23 09:52:46 +02:00
showcase . attr ( "src" , source ) ;
2018-06-15 16:32:23 +02:00
showcase . css ( {
width : 'auto' ,
2018-10-04 14:05:53 +02:00
height : '90%' ,
2018-06-15 16:32:23 +02:00
} ) ;
2018-06-24 07:41:02 +02:00
showcase . css ( 'left' , $ ( window ) . width ( ) / 2 + 'px' ) ;
showcase . css ( 'top' , $ ( window ) . height ( ) / 2 + 'px' ) ;
2018-04-23 09:52:46 +02:00
showcaseDownload . attr ( "href" , source ) ;
2018-10-04 14:05:53 +02:00
2018-03-25 13:22:28 +02:00
}
2018-04-23 12:04:40 +02:00
function displayLoading ( ) {
loading . show ( ) ;
}
function hideLoading ( ) {
loading . fadeOut ( 200 ) ;
2018-10-04 14:05:53 +02:00
}