diff --git a/css/style.css b/css/style.css index b1c8ba0..a99ee81 100755 --- a/css/style.css +++ b/css/style.css @@ -147,6 +147,15 @@ button.gamma-btn-close:before { content: '\2715'; } +button.gamma-btn-view { + width: 130px; + display: none; +} + +button.gamma-btn-view:before { + content: 'Full image'; +} + button.gamma-btn-ssplay:before { content: '\25b6'; } diff --git a/js/gamma.js b/js/gamma.js index f399a0b..46a3a35 100644 --- a/js/gamma.js +++ b/js/gamma.js @@ -169,6 +169,10 @@ var Gamma = (function() { overlayAnimated : true, // if true, the navigate next function is called when the image (singleview) is clicked nextOnClickImage : true, + // if true, then view the big image on click + viewBigOnClickImage: false, + // if true, then view the Full Image button + viewFullImageButton: false, // circular navigation circular : true, // transition settings for the image in the single view. @@ -256,12 +260,17 @@ var Gamma = (function() { if( !Gamma.singleview ) { - $( '
' ) + $('
') .appendTo( Gamma.container ); Gamma.singleview = Gamma.container.children( 'div.gamma-single-view' ); - Gamma.svclose = Gamma.singleview.find( 'button.gamma-btn-close' ); + Gamma.svclose = Gamma.singleview.find('button.gamma-btn-close'); + if (Gamma.settings.viewFullImageButton) { + Gamma.fullImageButton = Gamma.singleview.find('button.gamma-btn-view'); + Gamma.fullImageButton.css({ display: "block" }); + } + _initEvents( 'singleview' ); _createSingleViewNavigation(); @@ -278,7 +287,7 @@ var Gamma = (function() { if( Gamma.itemsCount > 1 ) { - Gamma.svplay = $( '' ).insertAfter( Gamma.svclose ); + Gamma.svplay = $( '' ).insertBefore( Gamma.svclose ); Gamma.nav = $( '' ).appendTo( Gamma.singleview ); Gamma.svnavnext = Gamma.nav.find( 'span.gamma-next' ); Gamma.svnavprev = Gamma.nav.find( 'span.gamma-prev' ); @@ -396,11 +405,12 @@ var Gamma = (function() { // replace each div element with an image element with the right source $items.each( function() { - var $item = $( this ), + var $item = $(this), $picEl = $item.children(), sources = _getImgSources( $picEl ), source = _chooseImgSource( sources, $item.outerWidth( true ) ), - description = $picEl.data( 'description' ); + description = $picEl.data( 'description' ), + url = $picEl.data("url"); // data is saved in the
  • element $item.data( { @@ -410,14 +420,29 @@ var Gamma = (function() { maxheight : $picEl.data( 'maxHeight' ) } ); - $( '
    ' ).addClass( 'gamma-description' ).html( description ).insertAfter( $picEl ); - - $( '' ).attr( { - alt : $picEl.data( 'alt' ), - title : $picEl.data( 'title' ), - src : source.src - } ).insertAfter( $picEl ); + var overlay = $(''); + if (url != null) { + overlay.attr("href", url); + } + overlay.addClass('gamma-description').html(description).insertAfter($picEl); + + var img = $('').attr({ + alt: $picEl.data('alt'), + title: $picEl.data('title'), + src: source.src + }); + + if (url != null) { + var anchor = $(''); + img.appendTo(anchor); + anchor.insertAfter($picEl); + } + else + { + img.insertAfter($picEl); + } + $picEl.remove(); } ); @@ -475,7 +500,7 @@ var Gamma = (function() { Gamma.gallery.masonry( { itemSelector : 'li', columnWidth : function( containerWidth ) { - return containerWidth / Gamma.columns; + return containerWidth / Gamma.columns; } } ); @@ -747,7 +772,7 @@ var Gamma = (function() { var id = $item.index(), data = $item.data(), - $img = $item.children( 'img' ); + $img = $item.find( 'img' ); if( anim ) { @@ -1247,6 +1272,13 @@ var Gamma = (function() { Gamma.gallery.on( 'click.gamma', 'li', _singleview ); Gamma.svclose.on( 'click.gamma', _closesingleview ); + if (Gamma.fullImageButton) { + Gamma.fullImageButton.on('click.gamma', function () { + var imageAddress = _getHighQualityImage($(Gamma.items[Gamma.current]).data().source).src || e.currentTarget.src; + window.location = imageAddress; + }); + } + break; case 'singleviewnavigation' : @@ -1258,6 +1290,16 @@ var Gamma = (function() { Gamma.singleview.on( 'click.gamma', 'img', function() { _onnavigate( 'next' ); } ); + } else { + + if (Gamma.settings.viewBigOnClickImage) { + Gamma.singleview.on('click.gamma', 'img', function (e) { + var imageAddress = _getHighQualityImage($(e.currentTarget).data().source).src || e.currentTarget.src; + + window.location = imageAddress; + }); + } + } if ( Gamma.settings.keyboard ) { @@ -1327,6 +1369,17 @@ var Gamma = (function() { }; }, + //get high resolution image + _getHighQualityImage = function (source) { + + var result = source[0]; + for (var i = 1 ; i < source.length ; i++) { + if (source[i].width > result.width) + result = source[i]; + } + return result; + + }, // sets a transition for an element _setTransition = function( el , property, speed, easing ) {