summaryrefslogtreecommitdiff
path: root/javascript/jquery/plugins/magnify/jquery.magnify-mobile.js
diff options
context:
space:
mode:
Diffstat (limited to 'javascript/jquery/plugins/magnify/jquery.magnify-mobile.js')
-rw-r--r--javascript/jquery/plugins/magnify/jquery.magnify-mobile.js101
1 files changed, 0 insertions, 101 deletions
diff --git a/javascript/jquery/plugins/magnify/jquery.magnify-mobile.js b/javascript/jquery/plugins/magnify/jquery.magnify-mobile.js
deleted file mode 100644
index f54c52c..0000000
--- a/javascript/jquery/plugins/magnify/jquery.magnify-mobile.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/*!
- * Mobile plugin for jQuery Magnify (http://thdoan.github.io/magnify/)
- *
- * jQuery Magnify by T. H. Doan is licensed under the MIT License.
- * Read a copy of the license in the LICENSE file or at http://choosealicense.com/licenses/mit
- */
-
-(function($) {
- // Ensure this is loaded after jquery.magnify.js
- if (!$.fn.magnify) return;
- // Add required CSS
- $('<style>' +
- '.lens-mobile {' +
- 'position:fixed;' +
- 'top:0;' +
- 'left:0;' +
- 'width:100%;' +
- 'height:100%;' +
- 'background:#ccc;' +
- 'display:none;' +
- 'overflow:scroll;' +
- '-webkit-overflow-scrolling:touch;' +
- 'z-index:9999;' +
- '}' +
- '.magnify-mobile>.close {' +
- 'position:fixed;' +
- 'top:10px;' +
- 'right:10px;' +
- 'width:32px;' +
- 'height:32px;' +
- 'background:#333;' +
- 'border-radius:16px;' +
- 'color:#fff;' +
- 'display:inline-block;' +
- 'font:normal bold 20px/32px sans-serif;' +
- 'letter-spacing:0;' +
- 'opacity:0.8;' +
- 'text-align:center;' +
- 'text-shadow:none;' +
- 'z-index:9999;' +
- '}' +
- '@media only screen and (min-device-width:320px) and (max-device-width:773px) {' +
- '/* Assume QHD (1440 x 2560) is highest mobile resolution */' +
- '.lens-mobile { display:block; }' +
- '}' +
- '</style>').appendTo('head');
- // Ensure .magnify is rendered
- $(window).on('load', function() {
- $('body').append('<div class="magnify-mobile"><div class="lens-mobile"></div></div>');
- var $lensMobile = $('.lens-mobile');
- // Only enable mobile zoom on smartphones
- if ($lensMobile.is(':visible') && !!('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch) || navigator.msMaxTouchPoints)) {
- var $magnify = $('.magnify'),
- $magnifyMobile = $('.magnify-mobile');
- // Disable desktop magnifying lens
- $magnify.off();
- // Initiate mobile zoom
- // NOTE: Fixed elements inside a scrolling div have issues in iOS, so we need to insert the
- // close icon at the same level as the lens.
- $magnifyMobile.hide().append('<i class="close">&times;</i>');
- // Hook up event handlers
- $magnifyMobile.children('.close').on('touchstart', function() {
- $magnifyMobile.toggle();
- });
- $magnify.children('img').on({
- 'touchend': function() {
- // Only execute on tap
- if ($(this).data('drag')) return;
- var oScrollOffset = $(this).data('scrollOffset');
- $magnifyMobile.toggle();
- // Zoom into touch point
- $lensMobile.scrollLeft(oScrollOffset.x);
- $lensMobile.scrollTop(oScrollOffset.y);
- },
- 'touchmove': function() {
- // Set drag state
- $(this).data('drag', true);
- },
- 'touchstart': function(e) {
- // Render zoom image
- // NOTE: In iOS background-image is url(...), not url("...").
- $lensMobile.html('<img src="' + $(this).prev('.magnify-lens').css('background-image').replace(/url\(["']?|["']?\)/g, '') + '" alt="">');
- // Determine zoom position
- var $magnifyImage = $(this),
- oZoomSize = $magnifyImage.data('zoomSize'),
- nX = e.originalEvent.touches[0].pageX - $magnifyImage.offset().left,
- nXPct = nX / $magnifyImage.width(),
- nY = e.originalEvent.touches[0].pageY - $magnifyImage.offset().top,
- nYPct = nY / $magnifyImage.height();
- // Store scroll offsets
- $magnifyImage.data('scrollOffset', {
- 'x': (oZoomSize.width*nXPct)-(window.innerWidth/2),
- 'y': (oZoomSize.height*nYPct)-(window.innerHeight/2)
- });
- // Reset drag state
- $(this).data('drag', false);
- }
- });
- }
- });
-}(jQuery));