diff --git a/build/css/freezeframe_styles.css b/build/css/freezeframe_styles.css index 903efae..7622089 100755 --- a/build/css/freezeframe_styles.css +++ b/build/css/freezeframe_styles.css @@ -1,8 +1,8 @@ .freezeframe-container { display: inline-block; + position: relative; background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPSc1MHB4JyBoZWlnaHQ9JzUwcHgnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0idWlsLXNwaW4iPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MCA1MCkiPjxnIHRyYW5zZm9ybT0icm90YXRlKDApIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwcyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBmcm9tPSIxLjUiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+PC9jaXJjbGU+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC4xMnMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuMTJzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCkgdHJhbnNsYXRlKDM0IDApIj48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZnJvbT0iMSIgdG89IjAuMSIgYmVnaW49IjAuMjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjI1cyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2NpcmNsZT48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTM1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC4zN3MiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuMzdzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODApIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwLjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMjUpIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwLjYycyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBmcm9tPSIxLjUiIHRvPSIxIiBiZWdpbj0iMC42MnMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+PC9jaXJjbGU+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI3MCkgdHJhbnNsYXRlKDM0IDApIj48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZnJvbT0iMSIgdG89IjAuMSIgYmVnaW49IjAuNzVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjc1cyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2NpcmNsZT48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzE1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC44N3MiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuODdzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48L2c+PC9zdmc+") center center no-repeat; } .freezeframe-container .freezeframe-image { - position: relative; z-index: 0; vertical-align: top; background: rgba(0, 0, 0, 0.5); @@ -11,19 +11,24 @@ opacity: 1; } .freezeframe-container .freezeframe-canvas { display: inline-block; - position: relative; + position: absolute; + top: 0; + left: 0; + pointer-events: none; z-index: 1; vertical-align: top; - opacity: 0; - image-rendering: optimizeSpeed; - image-rendering: -moz-crisp-edges; - image-rendering: -webkit-optimize-contrast; - image-rendering: -o-crisp-edges; - image-rendering: optimize-contrast; - -ms-interpolation-mode: nearest-neighbor; } + opacity: 0; } + .freezeframe-container .freezeframe-canvas.freezeframe-responsive { + width: 100%; } .freezeframe-container .freezeframe-canvas.freezeframe-canvas-ready { transition: opacity 300ms; opacity: 1; } .freezeframe-container .freezeframe-canvas.freezeframe-canvas-active { transition: none; opacity: 0; } + .freezeframe-container.freezeframe-responsive { + width: 100%; } + .freezeframe-container.freezeframe-responsive .freezeframe-image { + width: 100%; } + .freezeframe-container.freezeframe-responsive .freezeframe-canvas-ready { + width: 100%; } diff --git a/build/css/freezeframe_styles.min.css b/build/css/freezeframe_styles.min.css index 75a6229..0ac2fd7 100755 --- a/build/css/freezeframe_styles.min.css +++ b/build/css/freezeframe_styles.min.css @@ -1 +1 @@ -.freezeframe-container{display:inline-block;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPSc1MHB4JyBoZWlnaHQ9JzUwcHgnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0idWlsLXNwaW4iPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MCA1MCkiPjxnIHRyYW5zZm9ybT0icm90YXRlKDApIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwcyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBmcm9tPSIxLjUiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+PC9jaXJjbGU+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC4xMnMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuMTJzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCkgdHJhbnNsYXRlKDM0IDApIj48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZnJvbT0iMSIgdG89IjAuMSIgYmVnaW49IjAuMjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjI1cyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2NpcmNsZT48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTM1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC4zN3MiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuMzdzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODApIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwLjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMjUpIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwLjYycyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBmcm9tPSIxLjUiIHRvPSIxIiBiZWdpbj0iMC42MnMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+PC9jaXJjbGU+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI3MCkgdHJhbnNsYXRlKDM0IDApIj48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZnJvbT0iMSIgdG89IjAuMSIgYmVnaW49IjAuNzVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjc1cyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2NpcmNsZT48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzE1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC44N3MiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuODdzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48L2c+PC9zdmc+) center center no-repeat rgba(0,0,0,.5)}.freezeframe-container .freezeframe-image{position:relative;z-index:0;vertical-align:top;background:rgba(0,0,0,.5);opacity:0}.freezeframe-container .freezeframe-image.freezeframe-image-ready{opacity:1}.freezeframe-container .freezeframe-canvas{display:inline-block;position:relative;z-index:1;vertical-align:top;opacity:0;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:-o-crisp-edges;image-rendering:optimize-contrast;-ms-interpolation-mode:nearest-neighbor}.freezeframe-container .freezeframe-canvas.freezeframe-canvas-ready{transition:opacity .3s;opacity:1}.freezeframe-container .freezeframe-canvas.freezeframe-canvas-active{transition:none;opacity:0} \ No newline at end of file +.freezeframe-container .freezeframe-canvas.freezeframe-responsive,.freezeframe-container.freezeframe-responsive,.freezeframe-container.freezeframe-responsive .freezeframe-canvas-ready,.freezeframe-container.freezeframe-responsive .freezeframe-image{width:100%}.freezeframe-container{display:inline-block;position:relative;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPSc1MHB4JyBoZWlnaHQ9JzUwcHgnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0idWlsLXNwaW4iPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MCA1MCkiPjxnIHRyYW5zZm9ybT0icm90YXRlKDApIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwcyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBmcm9tPSIxLjUiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+PC9jaXJjbGU+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC4xMnMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuMTJzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCkgdHJhbnNsYXRlKDM0IDApIj48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZnJvbT0iMSIgdG89IjAuMSIgYmVnaW49IjAuMjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjI1cyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2NpcmNsZT48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTM1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC4zN3MiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuMzdzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODApIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwLjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMjUpIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwLjYycyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBmcm9tPSIxLjUiIHRvPSIxIiBiZWdpbj0iMC42MnMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+PC9jaXJjbGU+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI3MCkgdHJhbnNsYXRlKDM0IDApIj48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZnJvbT0iMSIgdG89IjAuMSIgYmVnaW49IjAuNzVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjc1cyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2NpcmNsZT48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzE1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC44N3MiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuODdzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48L2c+PC9zdmc+) center center no-repeat rgba(0,0,0,.5)}.freezeframe-container .freezeframe-image{z-index:0;vertical-align:top;background:rgba(0,0,0,.5);opacity:0}.freezeframe-container .freezeframe-image.freezeframe-image-ready{opacity:1}.freezeframe-container .freezeframe-canvas{display:inline-block;position:absolute;top:0;left:0;pointer-events:none;z-index:1;vertical-align:top;opacity:0}.freezeframe-container .freezeframe-canvas.freezeframe-canvas-ready{transition:opacity .3s;opacity:1}.freezeframe-container .freezeframe-canvas.freezeframe-canvas-active{transition:none;opacity:0} \ No newline at end of file diff --git a/build/js/freezeframe.js b/build/js/freezeframe.js index d423f40..2eb7cba 100755 --- a/build/js/freezeframe.js +++ b/build/js/freezeframe.js @@ -91,13 +91,18 @@ var freezeframe = (function($) { // dont run if no images found freezeframe.prototype.setup = function() { var ff = this, - setup_required = this.images.not('.freezeframe-setup'); + setup_required = this.images.not('.freezeframe-setup'), + container_classnames = ['freezeframe-container']; setup_required.each(function(e) { var $image = $(this); $image.addClass('freezeframe-setup freezeframe-image'); + if($image.hasClass('freezeframe-responsive')) { + container_classnames.push('freezeframe-responsive'); + } + $canvas = $('', { class: 'freezeframe-canvas' }).attr({ @@ -107,7 +112,7 @@ var freezeframe = (function($) { $image.add($canvas).wrapAll( $('
', { - class: 'freezeframe-container' + class: container_classnames.join(' ') }) ); @@ -136,13 +141,15 @@ var freezeframe = (function($) { $canvas.attr({ 'width': image_width, 'height': image_height - }).css({ - 'margin-right': '-' + image_width + 'px' - }) + }); + // }).css({ + // 'margin-right': '-' + image_width + 'px' + // }) context = $canvas[0].getContext('2d'); - context.mozImageSmoothingEnabled = false; - context.imageSmoothingEnabled = false; + context.mozImageSmoothingEnabled = true; + context.webkitImageSmoothingEnabled = true; + context.imageSmoothingEnabled = true; context.drawImage($_image[0], 0, 0, image_width, image_height); $canvas.addClass('freezeframe-canvas-ready').on(transitionEnd, function() { @@ -192,14 +199,14 @@ var freezeframe = (function($) { // hover if((!ff.is_touch_device && ff.options.non_touch_device_trigger_event == 'hover') || (ff.is_touch_device)) { - $canvas.mouseenter(function() { + $image.mouseenter(function() { (function() { $image.attr('src', $image[0].src); $canvas.removeClass('freezeframe-canvas-ready').addClass('freezeframe-canvas-active'); })(); }) - $canvas.mouseleave(function() { + $image.mouseleave(function() { (function() { $canvas.removeClass('freezeframe-canvas-active').addClass('freezeframe-canvas-ready'); })(); @@ -209,7 +216,7 @@ var freezeframe = (function($) { // click if((!ff.is_touch_device && ff.options.non_touch_device_trigger_event == 'click') || (ff.is_touch_device)) { - $canvas.click(function() { + $image.click(function() { (function() { diff --git a/build/js/freezeframe.min.js b/build/js/freezeframe.min.js index 4685051..61c3395 100755 --- a/build/js/freezeframe.min.js +++ b/build/js/freezeframe.min.js @@ -1 +1 @@ -var freezeframe=function(e){function t(e){var t;if(this.options={selector:".freezeframe",animation_play_duration:5e3,non_touch_device_trigger_event:"hover"},t="string"==typeof e?{selector:e}:e)for(attribute in t)attribute in this.options?this.options[attribute]=t[attribute]:console.warn('freezeframe : "'+attribute+'" not a valid option',t);return this.is_touch_device="ontouchstart"in window||"onmsgesturechange"in window,this}return t.prototype.capture=function(t){var a;if(void 0!==t)a=t;else{if(void 0===this.options.selector)return console.warn("freezeframe : no selector passed to capture function or set in freezeframe options"),!1;a=this.options.selector}for(void 0==this.images&&(this.images=e()),this.images=this.images.add(e("img"+a)),i=0;i",{"class":"freezeframe-canvas"}).attr({width:0,height:0}).insertBefore(a),a.add($canvas).wrapAll(e("
",{"class":"freezeframe-container"}))}),imagesLoaded(a).on("progress",function(a,i){t.process(e(i.img))}),this},t.prototype.process=function(t){var a=t.siblings("canvas"),i="transitionend webkitTransitionEnd oTransitionEnd otransitionend",s=t[0].clientWidth,r=t[0].clientHeight;return a.attr({width:s,height:r}).css({"margin-right":"-"+s+"px"}),context=a[0].getContext("2d"),context.mozImageSmoothingEnabled=!1,context.imageSmoothingEnabled=!1,context.drawImage(t[0],0,0,s,r),a.addClass("freezeframe-canvas-ready").on(i,function(){e(this).off(i),t.addClass("freezeframe-image-ready")}),this},t.prototype.filter=function(t){var a;if(void 0!=t&&this.images.length>1){if(a=this.images.filter(e(t)),0==a.length)return console.warn('freezeframe : no gifs found for selector "'+t+'"'),!1}else a=this.images;return a},t.prototype.attach=function(t){var a,i;return a=this,this.filter(t).each(function(t){var s=e(this),r=e(this).siblings("canvas");(!a.is_touch_device&&"hover"==a.options.non_touch_device_trigger_event||a.is_touch_device)&&(r.mouseenter(function(){!function(){s.attr("src",s[0].src),r.removeClass("freezeframe-canvas-ready").addClass("freezeframe-canvas-active")}()}),r.mouseleave(function(){!function(){r.removeClass("freezeframe-canvas-active").addClass("freezeframe-canvas-ready")}()})),(!a.is_touch_device&&"click"==a.options.non_touch_device_trigger_event||a.is_touch_device)&&r.click(function(){!function(){var e=r.hasClass("freezeframe-canvas-active");e?(clearTimeout(i),r.removeClass("freezeframe-canvas-active").addClass("freezeframe-canvas-ready")):(s.attr("src",s[0].src),r.removeClass("freezeframe-canvas-ready").addClass("freezeframe-canvas-active"),i=setTimeout(function(){r.removeClass("freezeframe-canvas-active").addClass("freezeframe-canvas-ready")},a.options.animation_play_duration))}()})}),this},t.prototype.freeze=function(){this.capture().setup().attach()},t.prototype.trigger=function(t){this.filter(t).each(function(t){e(this).attr("src",e(this)[0].src),e(this).siblings("canvas").removeClass("freezeframe-canvas-ready").addClass("freezeframe-canvas-active")})},t.prototype.release=function(t){this.filter(t).each(function(t){e(this).siblings("canvas").removeClass("freezeframe-canvas-active").addClass("freezeframe-canvas-ready")})},t}(jQuery); \ No newline at end of file +var freezeframe=function(e){function t(e){var t;if(this.options={selector:".freezeframe",animation_play_duration:5e3,non_touch_device_trigger_event:"hover"},t="string"==typeof e?{selector:e}:e)for(attribute in t)attribute in this.options?this.options[attribute]=t[attribute]:console.warn('freezeframe : "'+attribute+'" not a valid option',t);return this.is_touch_device="ontouchstart"in window||"onmsgesturechange"in window,this}return t.prototype.capture=function(t){var a;if(void 0!==t)a=t;else{if(void 0===this.options.selector)return console.warn("freezeframe : no selector passed to capture function or set in freezeframe options"),!1;a=this.options.selector}for(void 0==this.images&&(this.images=e()),this.images=this.images.add(e("img"+a)),i=0;i",{"class":"freezeframe-canvas"}).attr({width:0,height:0}).insertBefore(a),a.add($canvas).wrapAll(e("
",{"class":i.join(" ")}))}),imagesLoaded(a).on("progress",function(a,i){t.process(e(i.img))}),this},t.prototype.process=function(t){var a=t.siblings("canvas"),i="transitionend webkitTransitionEnd oTransitionEnd otransitionend",s=t[0].clientWidth,r=t[0].clientHeight;return a.attr({width:s,height:r}),context=a[0].getContext("2d"),context.mozImageSmoothingEnabled=!0,context.webkitImageSmoothingEnabled=!0,context.imageSmoothingEnabled=!0,context.drawImage(t[0],0,0,s,r),a.addClass("freezeframe-canvas-ready").on(i,function(){e(this).off(i),t.addClass("freezeframe-image-ready")}),this},t.prototype.filter=function(t){var a;if(void 0!=t&&this.images.length>1){if(a=this.images.filter(e(t)),0==a.length)return console.warn('freezeframe : no gifs found for selector "'+t+'"'),!1}else a=this.images;return a},t.prototype.attach=function(t){var a,i;return a=this,this.filter(t).each(function(t){var s=e(this),r=e(this).siblings("canvas");(!a.is_touch_device&&"hover"==a.options.non_touch_device_trigger_event||a.is_touch_device)&&(s.mouseenter(function(){!function(){s.attr("src",s[0].src),r.removeClass("freezeframe-canvas-ready").addClass("freezeframe-canvas-active")}()}),s.mouseleave(function(){!function(){r.removeClass("freezeframe-canvas-active").addClass("freezeframe-canvas-ready")}()})),(!a.is_touch_device&&"click"==a.options.non_touch_device_trigger_event||a.is_touch_device)&&s.click(function(){!function(){var e=r.hasClass("freezeframe-canvas-active");e?(clearTimeout(i),r.removeClass("freezeframe-canvas-active").addClass("freezeframe-canvas-ready")):(s.attr("src",s[0].src),r.removeClass("freezeframe-canvas-ready").addClass("freezeframe-canvas-active"),i=setTimeout(function(){r.removeClass("freezeframe-canvas-active").addClass("freezeframe-canvas-ready")},a.options.animation_play_duration))}()})}),this},t.prototype.freeze=function(){this.capture().setup().attach()},t.prototype.trigger=function(t){this.filter(t).each(function(t){e(this).attr("src",e(this)[0].src),e(this).siblings("canvas").removeClass("freezeframe-canvas-ready").addClass("freezeframe-canvas-active")})},t.prototype.release=function(t){this.filter(t).each(function(t){e(this).siblings("canvas").removeClass("freezeframe-canvas-active").addClass("freezeframe-canvas-ready")})},t}(jQuery); \ No newline at end of file diff --git a/build/js/freezeframe.pkgd.js b/build/js/freezeframe.pkgd.js index 3591c27..d9a4e79 100755 --- a/build/js/freezeframe.pkgd.js +++ b/build/js/freezeframe.pkgd.js @@ -9301,13 +9301,18 @@ var freezeframe = (function($) { // dont run if no images found freezeframe.prototype.setup = function() { var ff = this, - setup_required = this.images.not('.freezeframe-setup'); + setup_required = this.images.not('.freezeframe-setup'), + container_classnames = ['freezeframe-container']; setup_required.each(function(e) { var $image = $(this); $image.addClass('freezeframe-setup freezeframe-image'); + if($image.hasClass('freezeframe-responsive')) { + container_classnames.push('freezeframe-responsive'); + } + $canvas = $('', { class: 'freezeframe-canvas' }).attr({ @@ -9317,7 +9322,7 @@ var freezeframe = (function($) { $image.add($canvas).wrapAll( $('
', { - class: 'freezeframe-container' + class: container_classnames.join(' ') }) ); @@ -9346,13 +9351,15 @@ var freezeframe = (function($) { $canvas.attr({ 'width': image_width, 'height': image_height - }).css({ - 'margin-right': '-' + image_width + 'px' - }) + }); + // }).css({ + // 'margin-right': '-' + image_width + 'px' + // }) context = $canvas[0].getContext('2d'); - context.mozImageSmoothingEnabled = false; - context.imageSmoothingEnabled = false; + context.mozImageSmoothingEnabled = true; + context.webkitImageSmoothingEnabled = true; + context.imageSmoothingEnabled = true; context.drawImage($_image[0], 0, 0, image_width, image_height); $canvas.addClass('freezeframe-canvas-ready').on(transitionEnd, function() { @@ -9402,14 +9409,14 @@ var freezeframe = (function($) { // hover if((!ff.is_touch_device && ff.options.non_touch_device_trigger_event == 'hover') || (ff.is_touch_device)) { - $canvas.mouseenter(function() { + $image.mouseenter(function() { (function() { $image.attr('src', $image[0].src); $canvas.removeClass('freezeframe-canvas-ready').addClass('freezeframe-canvas-active'); })(); }) - $canvas.mouseleave(function() { + $image.mouseleave(function() { (function() { $canvas.removeClass('freezeframe-canvas-active').addClass('freezeframe-canvas-ready'); })(); @@ -9419,7 +9426,7 @@ var freezeframe = (function($) { // click if((!ff.is_touch_device && ff.options.non_touch_device_trigger_event == 'click') || (ff.is_touch_device)) { - $canvas.click(function() { + $image.click(function() { (function() { diff --git a/build/js/freezeframe.pkgd.min.js b/build/js/freezeframe.pkgd.min.js index efbd424..b4bb8f7 100755 --- a/build/js/freezeframe.pkgd.min.js +++ b/build/js/freezeframe.pkgd.min.js @@ -1,3 +1,3 @@ -!function(e,t){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(e,t){function n(e){var t="length"in e&&e.length,n=Z.type(e);return"function"===n||Z.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||0===t||"number"==typeof t&&t>0&&t-1 in e}function r(e,t,n){if(Z.isFunction(t))return Z.grep(e,function(e,r){return!!t.call(e,r,e)!==n});if(t.nodeType)return Z.grep(e,function(e){return e===t!==n});if("string"==typeof t){if(ae.test(t))return Z.filter(t,e,n);t=Z.filter(t,e)}return Z.grep(e,function(e){return U.call(t,e)>=0!==n})}function i(e,t){for(;(e=e[t])&&1!==e.nodeType;);return e}function o(e){var t=he[e]={};return Z.each(e.match(de)||[],function(e,n){t[n]=!0}),t}function s(){J.removeEventListener("DOMContentLoaded",s,!1),e.removeEventListener("load",s,!1),Z.ready()}function a(){Object.defineProperty(this.cache={},0,{get:function(){return{}}}),this.expando=Z.expando+a.uid++}function u(e,t,n){var r;if(void 0===n&&1===e.nodeType)if(r="data-"+t.replace(be,"-$1").toLowerCase(),n=e.getAttribute(r),"string"==typeof n){try{n="true"===n?!0:"false"===n?!1:"null"===n?null:+n+""===n?+n:xe.test(n)?Z.parseJSON(n):n}catch(i){}ye.set(e,t,n)}else n=void 0;return n}function c(){return!0}function l(){return!1}function f(){try{return J.activeElement}catch(e){}}function p(e,t){return Z.nodeName(e,"table")&&Z.nodeName(11!==t.nodeType?t:t.firstChild,"tr")?e.getElementsByTagName("tbody")[0]||e.appendChild(e.ownerDocument.createElement("tbody")):e}function d(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function h(e){var t=Pe.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function g(e,t){for(var n=0,r=e.length;r>n;n++)ve.set(e[n],"globalEval",!t||ve.get(t[n],"globalEval"))}function m(e,t){var n,r,i,o,s,a,u,c;if(1===t.nodeType){if(ve.hasData(e)&&(o=ve.access(e),s=ve.set(t,o),c=o.events)){delete s.handle,s.events={};for(i in c)for(n=0,r=c[i].length;r>n;n++)Z.event.add(t,i,c[i][n])}ye.hasData(e)&&(a=ye.access(e),u=Z.extend({},a),ye.set(t,u))}}function v(e,t){var n=e.getElementsByTagName?e.getElementsByTagName(t||"*"):e.querySelectorAll?e.querySelectorAll(t||"*"):[];return void 0===t||t&&Z.nodeName(e,t)?Z.merge([e],n):n}function y(e,t){var n=t.nodeName.toLowerCase();"input"===n&&ke.test(e.type)?t.checked=e.checked:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}function x(t,n){var r,i=Z(n.createElement(t)).appendTo(n.body),o=e.getDefaultComputedStyle&&(r=e.getDefaultComputedStyle(i[0]))?r.display:Z.css(i[0],"display");return i.detach(),o}function b(e){var t=J,n=ze[e];return n||(n=x(e,t),"none"!==n&&n||(_e=(_e||Z("