|
|
| Line 1,688: |
Line 1,688: |
| | <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> | | <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> |
| | | | |
| − | <script> | + | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/jqueryPP&action=raw&ctype=text/javascript"</script> |
| − | (function() {
| + | |
| | | | |
| − | var event = jQuery.event,
| + | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bookBlockjsP&action=raw&ctype=text/javascript"</script> |
| | | | |
| − | //helper that finds handlers by type and calls back a function, this is basically handle
| + | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomjs&action=raw&ctype=text/javascript"</script> |
| − | // events - the events object
| + | |
| − | // types - an array of event types to look for
| + | |
| − | // callback(type, handlerFunc, selector) - a callback
| + | |
| − | // selector - an optional selector to filter with, if there, matches by selector
| + | |
| − | // if null, matches anything, otherwise, matches with no selector
| + | |
| − | findHelper = function( events, types, callback, selector ) {
| + | |
| − | var t, type, typeHandlers, all, h, handle,
| + | |
| − | namespaces, namespace,
| + | |
| − | match;
| + | |
| − | for ( t = 0; t < types.length; t++ ) {
| + | |
| − | type = types[t];
| + | |
| − | all = type.indexOf(".") < 0;
| + | |
| − | if (!all ) {
| + | |
| − | namespaces = type.split(".");
| + | |
| − | type = namespaces.shift();
| + | |
| − | namespace = new RegExp("(^|\\.)" + namespaces.slice(0).sort().join("\\.(?:.*\\.)?") + "(\\.|$)");
| + | |
| − | }
| + | |
| − | typeHandlers = (events[type] || []).slice(0);
| + | |
| | | | |
| − | for ( h = 0; h < typeHandlers.length; h++ ) {
| |
| − | handle = typeHandlers[h];
| |
| − |
| |
| − | match = (all || namespace.test(handle.namespace));
| |
| − |
| |
| − | if(match){
| |
| − | if(selector){
| |
| − | if (handle.selector === selector ) {
| |
| − | callback(type, handle.origHandler || handle.handler);
| |
| − | }
| |
| − | } else if (selector === null){
| |
| − | callback(type, handle.origHandler || handle.handler, handle.selector);
| |
| − | }
| |
| − | else if (!handle.selector ) {
| |
| − | callback(type, handle.origHandler || handle.handler);
| |
| − |
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| − | }
| |
| − | };
| |
| | | | |
| − | /**
| |
| − | * Finds event handlers of a given type on an element.
| |
| − | * @param {HTMLElement} el
| |
| − | * @param {Array} types an array of event names
| |
| − | * @param {String} [selector] optional selector
| |
| − | * @return {Array} an array of event handlers
| |
| − | */
| |
| − | event.find = function( el, types, selector ) {
| |
| − | var events = ( $._data(el) || {} ).events,
| |
| − | handlers = [],
| |
| − | t, liver, live;
| |
| | | | |
| − | if (!events ) {
| |
| − | return handlers;
| |
| − | }
| |
| − | findHelper(events, types, function( type, handler ) {
| |
| − | handlers.push(handler);
| |
| − | }, selector);
| |
| − | return handlers;
| |
| − | };
| |
| − | /**
| |
| − | * Finds all events. Group by selector.
| |
| − | * @param {HTMLElement} el the element
| |
| − | * @param {Array} types event types
| |
| − | */
| |
| − | event.findBySelector = function( el, types ) {
| |
| − | var events = $._data(el).events,
| |
| − | selectors = {},
| |
| − | //adds a handler for a given selector and event
| |
| − | add = function( selector, event, handler ) {
| |
| − | var select = selectors[selector] || (selectors[selector] = {}),
| |
| − | events = select[event] || (select[event] = []);
| |
| − | events.push(handler);
| |
| − | };
| |
| | | | |
| − | if (!events ) {
| |
| − | return selectors;
| |
| − | }
| |
| − | //first check live:
| |
| − | /*$.each(events.live || [], function( i, live ) {
| |
| − | if ( $.inArray(live.origType, types) !== -1 ) {
| |
| − | add(live.selector, live.origType, live.origHandler || live.handler);
| |
| − | }
| |
| − | });*/
| |
| − | //then check straight binds
| |
| − | findHelper(events, types, function( type, handler, selector ) {
| |
| − | add(selector || "", type, handler);
| |
| − | }, null);
| |
| − |
| |
| − | return selectors;
| |
| − | };
| |
| − | event.supportTouch = "ontouchend" in document;
| |
| − |
| |
| − | $.fn.respondsTo = function( events ) {
| |
| − | if (!this.length ) {
| |
| − | return false;
| |
| − | } else {
| |
| − | //add default ?
| |
| − | return event.find(this[0], $.isArray(events) ? events : [events]).length > 0;
| |
| − | }
| |
| − | };
| |
| − | $.fn.triggerHandled = function( event, data ) {
| |
| − | event = (typeof event == "string" ? $.Event(event) : event);
| |
| − | this.trigger(event, data);
| |
| − | return event.handled;
| |
| − | };
| |
| − | /**
| |
| − | * Only attaches one event handler for all types ...
| |
| − | * @param {Array} types llist of types that will delegate here
| |
| − | * @param {Object} startingEvent the first event to start listening to
| |
| − | * @param {Object} onFirst a function to call
| |
| − | */
| |
| − | event.setupHelper = function( types, startingEvent, onFirst ) {
| |
| − | if (!onFirst ) {
| |
| − | onFirst = startingEvent;
| |
| − | startingEvent = null;
| |
| − | }
| |
| − | var add = function( handleObj ) {
| |
| − |
| |
| − | var bySelector, selector = handleObj.selector || "";
| |
| − | if ( selector ) {
| |
| − | bySelector = event.find(this, types, selector);
| |
| − | if (!bySelector.length ) {
| |
| − | $(this).delegate(selector, startingEvent, onFirst);
| |
| − | }
| |
| − | }
| |
| − | else {
| |
| − | //var bySelector = event.find(this, types, selector);
| |
| − | if (!event.find(this, types, selector).length ) {
| |
| − | event.add(this, startingEvent, onFirst, {
| |
| − | selector: selector,
| |
| − | delegate: this
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | },
| |
| − | remove = function( handleObj ) {
| |
| − | var bySelector, selector = handleObj.selector || "";
| |
| − | if ( selector ) {
| |
| − | bySelector = event.find(this, types, selector);
| |
| − | if (!bySelector.length ) {
| |
| − | $(this).undelegate(selector, startingEvent, onFirst);
| |
| − | }
| |
| − | }
| |
| − | else {
| |
| − | if (!event.find(this, types, selector).length ) {
| |
| − | event.remove(this, startingEvent, onFirst, {
| |
| − | selector: selector,
| |
| − | delegate: this
| |
| − | });
| |
| − | }
| |
| − | }
| |
| − | };
| |
| − | $.each(types, function() {
| |
| − | event.special[this] = {
| |
| − | add: add,
| |
| − | remove: remove,
| |
| − | setup: function() {},
| |
| − | teardown: function() {}
| |
| − | };
| |
| − | });
| |
| − | };
| |
| − | })(jQuery);
| |
| − | (function($){
| |
| − | var isPhantom = /Phantom/.test(navigator.userAgent),
| |
| − | supportTouch = !isPhantom && ("ontouchend" in document),
| |
| − | scrollEvent = "touchmove scroll",
| |
| − | // Use touch events or map it to mouse events
| |
| − | touchStartEvent = supportTouch ? "touchstart" : "mousedown",
| |
| − | touchStopEvent = supportTouch ? "touchend" : "mouseup",
| |
| − | touchMoveEvent = supportTouch ? "touchmove" : "mousemove",
| |
| − | data = function(event){
| |
| − | var d = event.originalEvent.touches ?
| |
| − | event.originalEvent.touches[ 0 ] :
| |
| − | event;
| |
| − | return {
| |
| − | time: (new Date).getTime(),
| |
| − | coords: [ d.pageX, d.pageY ],
| |
| − | origin: $( event.target )
| |
| − | };
| |
| − | };
| |
| − |
| |
| − | /**
| |
| − | * @add jQuery.event.swipe
| |
| − | */
| |
| − | var swipe = $.event.swipe = {
| |
| − | /**
| |
| − | * @attribute delay
| |
| − | * Delay is the upper limit of time the swipe motion can take in milliseconds. This defaults to 500.
| |
| − | *
| |
| − | * A user must perform the swipe motion in this much time.
| |
| − | */
| |
| − | delay : 500,
| |
| − | /**
| |
| − | * @attribute max
| |
| − | * The maximum distance the pointer must travel in pixels. The default is 75 pixels.
| |
| − | */
| |
| − | max : 75,
| |
| − | /**
| |
| − | * @attribute min
| |
| − | * The minimum distance the pointer must travel in pixels. The default is 30 pixels.
| |
| − | */
| |
| − | min : 30
| |
| − | };
| |
| − |
| |
| − | $.event.setupHelper( [
| |
| − |
| |
| − | /**
| |
| − | * @hide
| |
| − | * @attribute swipe
| |
| − | */
| |
| − | "swipe",
| |
| − | /**
| |
| − | * @hide
| |
| − | * @attribute swipeleft
| |
| − | */
| |
| − | 'swipeleft',
| |
| − | /**
| |
| − | * @hide
| |
| − | * @attribute swiperight
| |
| − | */
| |
| − | 'swiperight',
| |
| − | /**
| |
| − | * @hide
| |
| − | * @attribute swipeup
| |
| − | */
| |
| − | 'swipeup',
| |
| − | /**
| |
| − | * @hide
| |
| − | * @attribute swipedown
| |
| − | */
| |
| − | 'swipedown'], touchStartEvent, function(ev){
| |
| − | var
| |
| − | // update with data when the event was started
| |
| − | start = data(ev),
| |
| − | stop,
| |
| − | delegate = ev.delegateTarget || ev.currentTarget,
| |
| − | selector = ev.handleObj.selector,
| |
| − | entered = this;
| |
| − |
| |
| − | function moveHandler(event){
| |
| − | if ( !start ) {
| |
| − | return;
| |
| − | }
| |
| − | // update stop with the data from the current event
| |
| − | stop = data(event);
| |
| − |
| |
| − | // prevent scrolling
| |
| − | if ( Math.abs( start.coords[0] - stop.coords[0] ) > 10 ) {
| |
| − | event.preventDefault();
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | // Attach to the touch move events
| |
| − | $(document.documentElement).bind(touchMoveEvent, moveHandler)
| |
| − | .one(touchStopEvent, function(event){
| |
| − | $(this).unbind( touchMoveEvent, moveHandler);
| |
| − | // if start and stop contain data figure out if we have a swipe event
| |
| − | if ( start && stop ) {
| |
| − | // calculate the distance between start and stop data
| |
| − | var deltaX = Math.abs(start.coords[0] - stop.coords[0]),
| |
| − | deltaY = Math.abs(start.coords[1] - stop.coords[1]),
| |
| − | distance = Math.sqrt(deltaX*deltaX+deltaY*deltaY);
| |
| − |
| |
| − | // check if the delay and distance are matched
| |
| − | if ( stop.time - start.time < swipe.delay && distance >= swipe.min ) {
| |
| − | var events = ['swipe'];
| |
| − | // check if we moved horizontally
| |
| − | if( deltaX >= swipe.min && deltaY < swipe.min) {
| |
| − | // based on the x coordinate check if we moved left or right
| |
| − | events.push( start.coords[0] > stop.coords[0] ? "swipeleft" : "swiperight" );
| |
| − | } else
| |
| − | // check if we moved vertically
| |
| − | if(deltaY >= swipe.min && deltaX < swipe.min){
| |
| − | // based on the y coordinate check if we moved up or down
| |
| − | events.push( start.coords[1] < stop.coords[1] ? "swipedown" : "swipeup" );
| |
| − | }
| |
| − |
| |
| − | // trigger swipe events on this guy
| |
| − | $.each($.event.find(delegate, events, selector), function(){
| |
| − | this.call(entered, ev, {start : start, end: stop})
| |
| − | })
| |
| − |
| |
| − | }
| |
| − | }
| |
| − | // reset start and stop
| |
| − | start = stop = undefined;
| |
| − | })
| |
| − | });
| |
| − |
| |
| − | })(jQuery)
| |
| − | </script>
| |
| − |
| |
| − | <script>
| |
| − | /**
| |
| − | * jquery.bookblock.min.js v2.0.1
| |
| − | * http://www.codrops.com
| |
| − | *
| |
| − | * Licensed under the MIT license.
| |
| − | * http://www.opensource.org/licenses/mit-license.php
| |
| − | *
| |
| − | * Copyright 2013, Codrops
| |
| − | * http://www.codrops.com
| |
| − | */
| |
| − | (function(f,g,d){var c=f(g),e=g.Modernizr;e.addTest("csstransformspreserve3d",function(){var l=e.prefixed("transformStyle");var k="preserve-3d";var j;if(!l){return false}l=l.replace(/([A-Z])/g,function(n,m){return"-"+m.toLowerCase()}).replace(/^ms-/,"-ms-");e.testStyles("#modernizr{"+l+":"+k+";}",function(m,n){j=g.getComputedStyle?getComputedStyle(m,null).getPropertyValue(l):""});return(j===k)});var a=f.event,b,i;b=a.special.debouncedresize={setup:function(){f(this).on("resize",b.handler)},teardown:function(){f(this).off("resize",b.handler)},handler:function(n,j){var m=this,l=arguments,k=function(){n.type="debouncedresize";a.dispatch.apply(m,l)};if(i){clearTimeout(i)}j?k():i=setTimeout(k,b.threshold)},threshold:150};f.BookBlock=function(j,k){this.$el=f(k);this._init(j)};f.BookBlock.defaults={orientation:"vertical",direction:"ltr",speed:1000,easing:"ease-in-out",shadows:true,shadowSides:0.2,shadowFlip:0.1,circular:false,nextEl:"",prevEl:"",autoplay:false,interval:3000,onEndFlip:function(j,l,k){return false},onBeforeFlip:function(j){return false}};f.BookBlock.prototype={_init:function(j){this.options=f.extend(true,{},f.BookBlock.defaults,j);this.$el.addClass("bb-"+this.options.orientation);this.$items=this.$el.children(".bb-item").hide();this.itemsCount=this.$items.length;this.current=0;this.previous=-1;this.$current=this.$items.eq(this.current).show();this.elWidth=this.$el.width();var k={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"};this.transEndEventName=k[e.prefixed("transition")]+".bookblock";this.support=e.csstransitions&&e.csstransforms3d&&e.csstransformspreserve3d;this._initEvents();if(this.options.autoplay){this.options.circular=true;this._startSlideshow()}},_initEvents:function(){var j=this;if(this.options.nextEl!==""){f(this.options.nextEl).on("click.bookblock touchstart.bookblock",function(){j._action("next");return false})}if(this.options.prevEl!==""){f(this.options.prevEl).on("click.bookblock touchstart.bookblock",function(){j._action("prev");return false})}c.on("debouncedresize",function(){j.elWidth=j.$el.width()})},_action:function(j,k){this._stopSlideshow();this._navigate(j,k)},_navigate:function(j,k){if(this.isAnimating){return false}this.options.onBeforeFlip(this.current);this.isAnimating=true;this.$current=this.$items.eq(this.current);if(k!==d){this.current=k}else{if(j==="next"&&this.options.direction==="ltr"||j==="prev"&&this.options.direction==="rtl"){if(!this.options.circular&&this.current===this.itemsCount-1){this.end=true}else{this.previous=this.current;this.current=this.current<this.itemsCount-1?this.current+1:0}}else{if(j==="prev"&&this.options.direction==="ltr"||j==="next"&&this.options.direction==="rtl"){if(!this.options.circular&&this.current===0){this.end=true}else{this.previous=this.current;this.current=this.current>0?this.current-1:this.itemsCount-1}}}}this.$nextItem=!this.options.circular&&this.end?this.$current:this.$items.eq(this.current);if(!this.support){this._layoutNoSupport(j)}else{this._layout(j)}},_layoutNoSupport:function(k){this.$items.hide();this.$nextItem.show();this.end=false;this.isAnimating=false;var j=k==="next"&&this.current===this.itemsCount-1||k==="prev"&&this.current===0;this.options.onEndFlip(this.previous,this.current,j)},_layout:function(l){var v=this,u=this._addSide("left",l),o=this._addSide("middle",l),j=this._addSide("right",l),r=u.find("div.bb-overlay"),t=o.find("div.bb-flipoverlay:first"),w=o.find("div.bb-flipoverlay:last"),s=j.find("div.bb-overlay"),k=this.end?400:this.options.speed;this.$items.hide();this.$el.prepend(u,o,j);o.css({transitionDuration:k+"ms",transitionTimingFunction:this.options.easing}).on(this.transEndEventName,function(y){if(f(y.target).hasClass("bb-page")){v.$el.children(".bb-page").remove();v.$nextItem.show();v.end=false;v.isAnimating=false;var x=l==="next"&&v.current===v.itemsCount-1||l==="prev"&&v.current===0;v.options.onEndFlip(v.previous,v.current,x)}});if(l==="prev"){o.addClass("bb-flip-initial")}if(this.options.shadows&&!this.end){var n=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms"}:{transition:"opacity "+this.options.speed/2+"ms linear",opacity:this.options.shadowSides},q=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear"}:{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms",opacity:this.options.shadowFlip},m=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms",opacity:this.options.shadowFlip}:{transition:"opacity "+this.options.speed/2+"ms linear"},p=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear",opacity:this.options.shadowSides}:{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms"};t.css(q);w.css(m);r.css(n);s.css(p)}setTimeout(function(){o.addClass(v.end?"bb-flip-"+l+"-end":"bb-flip-"+l);if(v.options.shadows&&!v.end){t.css({opacity:l==="next"?v.options.shadowFlip:0});w.css({opacity:l==="next"?0:v.options.shadowFlip});r.css({opacity:l==="next"?v.options.shadowSides:0});s.css({opacity:l==="next"?0:v.options.shadowSides})}},25)},_addSide:function(l,k){var j;switch(l){case"left":j=f('<div class="bb-page"><div class="bb-back"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">'+(k==="next"?this.$current.html():this.$nextItem.html())+'</div></div><div class="bb-overlay"></div></div></div></div>').css("z-index",102);break;case"middle":j=f('<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">'+(k==="next"?this.$current.html():this.$nextItem.html())+'</div></div><div class="bb-flipoverlay"></div></div></div><div class="bb-back"><div class="bb-outer"><div class="bb-content" style="width:'+this.elWidth+'px"><div class="bb-inner">'+(k==="next"?this.$nextItem.html():this.$current.html())+'</div></div><div class="bb-flipoverlay"></div></div></div></div>').css("z-index",103);break;case"right":j=f('<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">'+(k==="next"?this.$nextItem.html():this.$current.html())+'</div></div><div class="bb-overlay"></div></div></div></div>').css("z-index",101);break}return j},_startSlideshow:function(){var j=this;this.slideshow=setTimeout(function(){j._navigate("next");if(j.options.autoplay){j._startSlideshow()}},this.options.interval)},_stopSlideshow:function(){if(this.options.autoplay){clearTimeout(this.slideshow);this.options.autoplay=false}},next:function(){this._action(this.options.direction==="ltr"?"next":"prev")},prev:function(){this._action(this.options.direction==="ltr"?"prev":"next")},jump:function(k){k-=1;if(k===this.current||k>=this.itemsCount||k<0){return false}var j;if(this.options.direction==="ltr"){j=k>this.current?"next":"prev"}else{j=k>this.current?"prev":"next"}this._action(j,k)},last:function(){this.jump(this.itemsCount)},first:function(){this.jump(1)},isActive:function(){return this.isAnimating},update:function(){var j=this.$items.eq(this.current);this.$items=this.$el.children(".bb-item");this.itemsCount=this.$items.length;this.current=j.index()},destroy:function(){if(this.options.autoplay){this._stopSlideshow()}this.$el.removeClass("bb-"+this.options.orientation);this.$items.show();if(this.options.nextEl!==""){f(this.options.nextEl).off(".bookblock")}if(this.options.prevEl!==""){f(this.options.prevEl).off(".bookblock")}c.off("debouncedresize")}};var h=function(j){if(g.console){g.console.error(j)}};f.fn.bookblock=function(k){if(typeof k==="string"){var j=Array.prototype.slice.call(arguments,1);this.each(function(){var l=f.data(this,"bookblock");if(!l){h("cannot call methods on bookblock prior to initialization; attempted to call method '"+k+"'");return}if(!f.isFunction(l[k])||k.charAt(0)==="_"){h("no such method '"+k+"' for bookblock instance");return}l[k].apply(l,j)})}else{this.each(function(){var l=f.data(this,"bookblock");if(l){l._init()}else{l=f.data(this,"bookblock",new f.BookBlock(k,this))}})}return this}})(jQuery,window);
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − | <script>
| |
| − | "use strict";
| |
| − |
| |
| − | /*!
| |
| − | jQuery Plugin developed by Mario Duarte
| |
| − | https://github.com/Mario-Duarte/image-zoom-plugin/
| |
| − | Simple jQuery plugin that converts an image into a click to zoom image
| |
| − | perfect for store products and galleries
| |
| − | */
| |
| − | (function ($) {
| |
| − | // Thanks to Mozilla for this polyfill
| |
| − | // find out more on - https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith
| |
| − | function ReplaceWithPolyfill() {
| |
| − | 'use-strict'; // For safari, and IE > 10
| |
| − |
| |
| − | var parent = this.parentNode,
| |
| − | i = arguments.length,
| |
| − | currentNode;
| |
| − | if (!parent) return;
| |
| − | if (!i) // if there are no arguments
| |
| − | parent.removeChild(this);
| |
| − |
| |
| − | while (i--) {
| |
| − | // i-- decrements i and returns the value of i before the decrement
| |
| − | currentNode = arguments[i];
| |
| − |
| |
| − | if (typeof currentNode !== 'object') {
| |
| − | currentNode = this.ownerDocument.createTextNode(currentNode);
| |
| − | } else if (currentNode.parentNode) {
| |
| − | currentNode.parentNode.removeChild(currentNode);
| |
| − | } // the value of "i" below is after the decrement
| |
| − |
| |
| − |
| |
| − | if (!i) // if currentNode is the first argument (currentNode === arguments[0])
| |
| − | parent.replaceChild(currentNode, this);else // if currentNode isn't the first
| |
| − | parent.insertBefore(currentNode, this.previousSibling);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | if (!Element.prototype.replaceWith) {
| |
| − | Element.prototype.replaceWith = ReplaceWithPolyfill;
| |
| − | }
| |
| − |
| |
| − | if (!CharacterData.prototype.replaceWith) {
| |
| − | CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
| |
| − | }
| |
| − |
| |
| − | if (!DocumentType.prototype.replaceWith) {
| |
| − | DocumentType.prototype.replaceWith = ReplaceWithPolyfill;
| |
| − | }
| |
| − |
| |
| − | const imageObj = {};
| |
| − |
| |
| − | $.fn.imageZoom = function (options) {
| |
| − | // Default settings for the zoom level
| |
| − | let settings = $.extend({
| |
| − | zoom: 150
| |
| − | }, options); // Main html template for the zoom in plugin
| |
| − |
| |
| − | imageObj.template = `
| |
| − | <figure class="containerZoom" style="background-image:url('${this.attr('src')}'); background-size: ${settings.zoom}%;">
| |
| − | <img id="imageZoom" src="${this.attr('src')}" alt="${this.attr('alt')}" />
| |
| − | </figure>
| |
| − | `; // Where all the magic happens, This will detect the position of your mouse
| |
| − | // in relation to the image and pan the zoomed in background image in the
| |
| − | // same direction
| |
| − |
| |
| − | function zoomIn(e) {
| |
| − | let zoomer = e.currentTarget;
| |
| − | let x, y, offsetX, offsetY;
| |
| − | e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX;
| |
| − | e.offsetY ? offsetY = e.offsetY : offsetY = e.touches[0].pageX;
| |
| − | x = offsetX / zoomer.offsetWidth * 100;
| |
| − | y = offsetY / zoomer.offsetHeight * 100;
| |
| − | $(zoomer).css({
| |
| − | "background-position": `${x}% ${y}%`
| |
| − | });
| |
| − | } // Main function to attach all events after replacing the image tag with
| |
| − | // the main template code
| |
| − |
| |
| − |
| |
| − | function attachEvents(container) {
| |
| − | container = $(container);
| |
| − | container.on('click', function (e) {
| |
| − | if ("zoom" in imageObj == false) {
| |
| − | // zoom is not defined, let define it and set it to false
| |
| − | imageObj.zoom = false;
| |
| − | }
| |
| − |
| |
| − | if (imageObj.zoom) {
| |
| − | imageObj.zoom = false;
| |
| − | $(this).removeClass('active');
| |
| − | } else {
| |
| − | imageObj.zoom = true;
| |
| − | $(this).addClass('active');
| |
| − | zoomIn(e);
| |
| − | }
| |
| − | });
| |
| − | container.on('mousemove', function (e) {
| |
| − | imageObj.zoom ? zoomIn(e) : null;
| |
| − | });
| |
| − | container.on('mouseleave', function () {
| |
| − | imageObj.zoom = false;
| |
| − | $(this).removeClass('active');
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | let newElm = $(this).replaceWith(imageObj.template);
| |
| − | attachEvents($('.containerZoom')[$('.containerZoom').length - 1]); // return updated element to allow for jQuery chained events
| |
| − |
| |
| − | return newElm;
| |
| − | };
| |
| − | })(jQuery);
| |
| − | </script>
| |
| | <script> | | <script> |
| | var Page = (function() { | | var Page = (function() { |
