Add/product galleries (#11665)
* register prettyPhoto but don't enqueue. #10721 * Remove lightbox option. #10721 Also registers the prettyPhoto styles instead of enqueueing * Stip all prettyPhoto related stuff from the templates and tidy up some logic. #10721 * Add flexslider assets #10721 * styling and re-adds `woocommerce_single_product_image_thumbnail_html`. #10721. * Add zoom functionality. #10721 * Move js to single-product.js. #10721 * styling of the gallery thumbnails when using the `product_page` shortcode. #10721 * Only enable the zoom if the image is large enough. #10721 * Use a 4 column layout by default. #10721 * Make the carousel options filterable. #10721 * rtl styles for gallery. #10721 * Don't zoom on handheld devices. #10721 * markup tweaks in prep for photoswipe * disable zoom for now * Add and enqueue photoswipe assets * add the photoswipe template * initialise photoswipe - it's alive! * tidy up js. add title. add separate trigger. #10721 * Move photoswipe functions to single-product.js. #10721 * reactivate the zoom! #10721 * style the photoswipe trigger. #10721 * disable flexslider animation loop. #10721 * js tidy up. #10721 * Fix jshint * Abstract the product gallery scripts * Minify * Fixed conflict with the admin bar * Photoswipe conflict with admin bar * Index. #10721 * photoswipe button styles. #10721 * Styling. #10721 * No animation on zoom * Image width on mobile * No shadows please. #10721 Looking at you, Twenty Twelve. * code tidy and add class to placeholder figure. #10721 * simplify rtl query * photoswipe button styles * Comma should not be here * zoom icon #10721 * gallery thumb styles. #10721 * trigger icon. #10721 * Image margins. #10721 * icon hover states. #10721 * Variation handling * Fix zoom and heights * Resize after timeout
This commit is contained in:
James Koster
Mike Jolley
parent
42f420b16c
commit
3823b78318
|
|
@ -74,6 +74,10 @@ module.exports = function( grunt ) {
|
|||
'<%= dirs.js %>/jquery-ui-touch-punch/jquery-ui-touch-punch.min.js': ['<%= dirs.js %>/jquery-ui-touch-punch/jquery-ui-touch-punch.js'],
|
||||
'<%= dirs.js %>/prettyPhoto/jquery.prettyPhoto.init.min.js': ['<%= dirs.js %>/prettyPhoto/jquery.prettyPhoto.init.js'],
|
||||
'<%= dirs.js %>/prettyPhoto/jquery.prettyPhoto.min.js': ['<%= dirs.js %>/prettyPhoto/jquery.prettyPhoto.js'],
|
||||
'<%= dirs.js %>/flexslider/jquery.flexslider.min.js': ['<%= dirs.js %>/flexslider/jquery.flexslider.js'],
|
||||
'<%= dirs.js %>/zoom/jquery.zoom.min.js': ['<%= dirs.js %>/zoom/jquery.zoom.js'],
|
||||
'<%= dirs.js %>/photoswipe/photoswipe.min.js': ['<%= dirs.js %>/photoswipe/photoswipe.js'],
|
||||
'<%= dirs.js %>/photoswipe/photoswipe-ui-default.min.js': ['<%= dirs.js %>/photoswipe/photoswipe-ui-default.js'],
|
||||
'<%= dirs.js %>/round/round.min.js': ['<%= dirs.js %>/round/round.js'],
|
||||
'<%= dirs.js %>/select2/select2.min.js': ['<%= dirs.js %>/select2/select2.js'],
|
||||
'<%= dirs.js %>/stupidtable/stupidtable.min.js': ['<%= dirs.js %>/stupidtable/stupidtable.js'],
|
||||
|
|
|
|||
5335
assets/css/admin.css
5335
assets/css/admin.css
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,483 @@
|
|||
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
/*
|
||||
|
||||
Contents:
|
||||
|
||||
1. Buttons
|
||||
2. Share modal and links
|
||||
3. Index indicator ("1 of X" counter)
|
||||
4. Caption
|
||||
5. Loading indicator
|
||||
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
|
||||
|
||||
*/
|
||||
/*
|
||||
|
||||
1. Buttons
|
||||
|
||||
*/
|
||||
/* <button> css reset */
|
||||
.pswp__button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: right;
|
||||
opacity: 0.75;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none; }
|
||||
.pswp__button:focus,
|
||||
.pswp__button:hover {
|
||||
opacity: 1; }
|
||||
.pswp__button:active {
|
||||
outline: none;
|
||||
opacity: 0.9; }
|
||||
.pswp__button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
|
||||
.pswp__ui--over-close .pswp__button--close {
|
||||
opacity: 1; }
|
||||
|
||||
.pswp__button,
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
background: url(default-skin.png) 0 0 no-repeat;
|
||||
background-size: 264px 88px;
|
||||
width: 44px;
|
||||
height: 44px; }
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
|
||||
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
|
||||
.pswp--svg .pswp__button,
|
||||
.pswp--svg .pswp__button--arrow--left:before,
|
||||
.pswp--svg .pswp__button--arrow--right:before {
|
||||
background-image: url(default-skin.svg); }
|
||||
.pswp--svg .pswp__button--arrow--left,
|
||||
.pswp--svg .pswp__button--arrow--right {
|
||||
background: none; } }
|
||||
|
||||
.pswp__button--close {
|
||||
background-position: 0 -44px; }
|
||||
|
||||
.pswp__button--share {
|
||||
background-position: -44px -44px; }
|
||||
|
||||
.pswp__button--fs {
|
||||
display: none; }
|
||||
|
||||
.pswp--supports-fs .pswp__button--fs {
|
||||
display: block; }
|
||||
|
||||
.pswp--fs .pswp__button--fs {
|
||||
background-position: -44px 0; }
|
||||
|
||||
.pswp__button--zoom {
|
||||
display: none;
|
||||
background-position: -88px 0; }
|
||||
|
||||
.pswp--zoom-allowed .pswp__button--zoom {
|
||||
display: block; }
|
||||
|
||||
.pswp--zoomed-in .pswp__button--zoom {
|
||||
background-position: -132px 0; }
|
||||
|
||||
/* no arrows on touch screens */
|
||||
.pswp--touch .pswp__button--arrow--left,
|
||||
.pswp--touch .pswp__button--arrow--right {
|
||||
visibility: hidden; }
|
||||
|
||||
/*
|
||||
Arrow buttons hit area
|
||||
(icon is added to :before pseudo-element)
|
||||
*/
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right {
|
||||
background: none;
|
||||
top: 50%;
|
||||
margin-top: -50px;
|
||||
width: 70px;
|
||||
height: 100px;
|
||||
position: absolute; }
|
||||
|
||||
.pswp__button--arrow--left {
|
||||
left: 0; }
|
||||
|
||||
.pswp__button--arrow--right {
|
||||
right: 0; }
|
||||
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
content: '';
|
||||
top: 35px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
position: absolute; }
|
||||
|
||||
.pswp__button--arrow--left:before {
|
||||
left: 6px;
|
||||
background-position: -138px -44px; }
|
||||
|
||||
.pswp__button--arrow--right:before {
|
||||
right: 6px;
|
||||
background-position: -94px -44px; }
|
||||
|
||||
/*
|
||||
|
||||
2. Share modal/popup and links
|
||||
|
||||
*/
|
||||
.pswp__counter,
|
||||
.pswp__share-modal {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
.pswp__share-modal {
|
||||
display: block;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
z-index: 1600;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity; }
|
||||
|
||||
.pswp__share-modal--hidden {
|
||||
display: none; }
|
||||
|
||||
.pswp__share-tooltip {
|
||||
z-index: 1620;
|
||||
position: absolute;
|
||||
background: #FFF;
|
||||
top: 56px;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
width: auto;
|
||||
right: 44px;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
-webkit-transform: translateY(6px);
|
||||
-ms-transform: translateY(6px);
|
||||
transform: translateY(6px);
|
||||
-webkit-transition: -webkit-transform 0.25s;
|
||||
transition: transform 0.25s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: transform; }
|
||||
.pswp__share-tooltip a {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
line-height: 18px; }
|
||||
.pswp__share-tooltip a:hover {
|
||||
text-decoration: none;
|
||||
color: #000; }
|
||||
.pswp__share-tooltip a:first-child {
|
||||
/* round corners on the first/last list item */
|
||||
border-radius: 2px 2px 0 0; }
|
||||
.pswp__share-tooltip a:last-child {
|
||||
border-radius: 0 0 2px 2px; }
|
||||
|
||||
.pswp__share-modal--fade-in {
|
||||
opacity: 1; }
|
||||
.pswp__share-modal--fade-in .pswp__share-tooltip {
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0); }
|
||||
|
||||
/* increase size of share links on touch devices */
|
||||
.pswp--touch .pswp__share-tooltip a {
|
||||
padding: 16px 12px; }
|
||||
|
||||
a.pswp__share--facebook:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: 15px;
|
||||
border: 6px solid transparent;
|
||||
border-bottom-color: #FFF;
|
||||
-webkit-pointer-events: none;
|
||||
-moz-pointer-events: none;
|
||||
pointer-events: none; }
|
||||
|
||||
a.pswp__share--facebook:hover {
|
||||
background: #3E5C9A;
|
||||
color: #FFF; }
|
||||
a.pswp__share--facebook:hover:before {
|
||||
border-bottom-color: #3E5C9A; }
|
||||
|
||||
a.pswp__share--twitter:hover {
|
||||
background: #55ACEE;
|
||||
color: #FFF; }
|
||||
|
||||
a.pswp__share--pinterest:hover {
|
||||
background: #CCC;
|
||||
color: #CE272D; }
|
||||
|
||||
a.pswp__share--download:hover {
|
||||
background: #DDD; }
|
||||
|
||||
/*
|
||||
|
||||
3. Index indicator ("1 of X" counter)
|
||||
|
||||
*/
|
||||
.pswp__counter {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
color: #FFF;
|
||||
opacity: 0.75;
|
||||
padding: 0 10px; }
|
||||
|
||||
/*
|
||||
|
||||
4. Caption
|
||||
|
||||
*/
|
||||
.pswp__caption {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 44px; }
|
||||
.pswp__caption small {
|
||||
font-size: 11px;
|
||||
color: #BBB; }
|
||||
|
||||
.pswp__caption__center {
|
||||
text-align: left;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
line-height: 20px;
|
||||
color: #CCC; }
|
||||
|
||||
.pswp__caption--empty {
|
||||
display: none; }
|
||||
|
||||
/* Fake caption element, used to calculate height of next/prev image */
|
||||
.pswp__caption--fake {
|
||||
visibility: hidden; }
|
||||
|
||||
/*
|
||||
|
||||
5. Loading indicator (preloader)
|
||||
|
||||
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
|
||||
|
||||
*/
|
||||
.pswp__preloader {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -22px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out;
|
||||
will-change: opacity;
|
||||
direction: ltr; }
|
||||
|
||||
.pswp__preloader__icn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 12px; }
|
||||
|
||||
.pswp__preloader--active {
|
||||
opacity: 1; }
|
||||
.pswp__preloader--active .pswp__preloader__icn {
|
||||
/* We use .gif in browsers that don't support CSS animation */
|
||||
background: url(preloader.gif) 0 0 no-repeat; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active {
|
||||
opacity: 1; }
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
|
||||
-webkit-animation: clockwise 500ms linear infinite;
|
||||
animation: clockwise 500ms linear infinite; }
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
|
||||
-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__icn {
|
||||
background: none;
|
||||
opacity: 0.75;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
margin: 0; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__cut {
|
||||
/*
|
||||
The idea of animating inner circle is based on Polymer ("material") loading indicator
|
||||
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
|
||||
*/
|
||||
position: relative;
|
||||
width: 7px;
|
||||
height: 14px;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp--css_animation .pswp__preloader__donut {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 50%;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: none;
|
||||
margin: 0; }
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.pswp__preloader {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
margin: 0;
|
||||
float: right; } }
|
||||
|
||||
@-webkit-keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@keyframes clockwise {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@-webkit-keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); }
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); } }
|
||||
|
||||
@keyframes donut-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); }
|
||||
50% {
|
||||
-webkit-transform: rotate(-140deg);
|
||||
transform: rotate(-140deg); }
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0); } }
|
||||
|
||||
/*
|
||||
|
||||
6. Additional styles
|
||||
|
||||
*/
|
||||
/* root element of UI */
|
||||
.pswp__ui {
|
||||
-webkit-font-smoothing: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 1550; }
|
||||
|
||||
/* top black bar with buttons and "1 of X" indicator */
|
||||
.pswp__top-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
width: 100%; }
|
||||
|
||||
.pswp__caption,
|
||||
.pswp__top-bar,
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
visibility: visible; }
|
||||
|
||||
.pswp__top-bar,
|
||||
.pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.5); }
|
||||
|
||||
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
|
||||
.pswp__ui--fit .pswp__top-bar,
|
||||
.pswp__ui--fit .pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.3); }
|
||||
|
||||
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
|
||||
.pswp__ui--idle .pswp__top-bar {
|
||||
opacity: 0; }
|
||||
|
||||
.pswp__ui--idle .pswp__button--arrow--left,
|
||||
.pswp__ui--idle .pswp__button--arrow--right {
|
||||
opacity: 0; }
|
||||
|
||||
/*
|
||||
pswp__ui--hidden class is added when controls are hidden
|
||||
e.g. when user taps to toggle visibility of controls
|
||||
*/
|
||||
.pswp__ui--hidden .pswp__top-bar,
|
||||
.pswp__ui--hidden .pswp__caption,
|
||||
.pswp__ui--hidden .pswp__button--arrow--left,
|
||||
.pswp__ui--hidden .pswp__button--arrow--right {
|
||||
/* Force paint & create composition layer for controls. */
|
||||
opacity: 0.001; }
|
||||
|
||||
/* pswp__ui--one-slide class is added when there is just one item in gallery */
|
||||
.pswp__ui--one-slide .pswp__button--arrow--left,
|
||||
.pswp__ui--one-slide .pswp__button--arrow--right,
|
||||
.pswp__ui--one-slide .pswp__counter {
|
||||
display: none; }
|
||||
|
||||
.pswp__element--disabled {
|
||||
display: none !important; }
|
||||
|
||||
.pswp--minimal--dark .pswp__top-bar {
|
||||
background: none; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
|
|
@ -0,0 +1,177 @@
|
|||
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
/*
|
||||
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
|
||||
*/
|
||||
/* pswp = photoswipe */
|
||||
.pswp {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
z-index: 999999;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
|
||||
-webkit-backface-visibility: hidden;
|
||||
outline: none; }
|
||||
.pswp * {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.pswp img {
|
||||
max-width: none; }
|
||||
|
||||
/* style is added when JS option showHideOpacity is set to true */
|
||||
.pswp--animate_opacity {
|
||||
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
|
||||
opacity: 0.001;
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp--open {
|
||||
display: block; }
|
||||
|
||||
.pswp--zoom-allowed .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in; }
|
||||
|
||||
.pswp--zoomed-in .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab; }
|
||||
|
||||
.pswp--dragging .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing; }
|
||||
|
||||
/*
|
||||
Background is added as a separate element.
|
||||
As animating opacity is much faster than animating rgba() background-color.
|
||||
*/
|
||||
.pswp__bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity; }
|
||||
|
||||
.pswp__scroll-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0; }
|
||||
|
||||
/* Prevent selection and tap highlights */
|
||||
.pswp__container,
|
||||
.pswp__img {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none; }
|
||||
|
||||
.pswp__zoom-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
-webkit-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp__bg {
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||
|
||||
.pswp--animated-in .pswp__bg,
|
||||
.pswp--animated-in .pswp__zoom-wrap {
|
||||
-webkit-transition: none;
|
||||
transition: none; }
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
.pswp__item {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden; }
|
||||
|
||||
.pswp__img {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
/*
|
||||
stretched thumbnail or div placeholder element (see below)
|
||||
style is added to avoid flickering in webkit/blink when layers overlap
|
||||
*/
|
||||
.pswp__img--placeholder {
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
/*
|
||||
div element that matches size of large image
|
||||
large image loads on top of it
|
||||
*/
|
||||
.pswp__img--placeholder--blank {
|
||||
background: #222; }
|
||||
|
||||
.pswp--ie .pswp__img {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
|
||||
/*
|
||||
Error message appears when image is not loaded
|
||||
(JS option errorMsg controls markup)
|
||||
*/
|
||||
.pswp__error-msg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-top: -8px;
|
||||
color: #CCC; }
|
||||
|
||||
.pswp__error-msg a {
|
||||
color: #CCC;
|
||||
text-decoration: underline; }
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -379,14 +379,6 @@
|
|||
div.product.hentry.has-post-thumbnail {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.product {
|
||||
.images {
|
||||
img {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -167,6 +167,80 @@ p.demo_store,
|
|||
div.thumbnails {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
&.woocommerce-product-gallery {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.woocommerce-product-gallery__wrapper {
|
||||
transition: all cubic-bezier(0.795, -0.035, 0.000, 1.000) .5s;
|
||||
}
|
||||
|
||||
.woocommerce-product-gallery__trigger {
|
||||
position: absolute;
|
||||
top: .5em;
|
||||
right: .5em;
|
||||
font-size: 2em;
|
||||
z-index: 9;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #fff;
|
||||
text-indent: -9999px;
|
||||
border-radius: 100%;
|
||||
box-sizing: content-box;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 9px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 8px;
|
||||
background: #000;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
left: 22px;
|
||||
@include transform(rotate(-45deg));
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-control-thumbs {
|
||||
overflow: hidden;
|
||||
zoom: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
width: 25%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
opacity: .5;
|
||||
margin: 0;
|
||||
|
||||
&.flex-active,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.summary {
|
||||
|
|
@ -404,6 +478,7 @@ p.demo_store,
|
|||
color: $highlightext;
|
||||
font-size: 0.857em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1520,6 +1595,46 @@ p.demo_store,
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Photoswipe
|
||||
* 1. These styles are required to overwrite default theme button styles (Twenty Twelve adds gradients via background-image).
|
||||
* 2. For zooming on mobile.
|
||||
*/
|
||||
.pswp {
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
.woocommerce img.pswp__img,
|
||||
.woocommerce-page img.pswp__img {
|
||||
max-width: none; /* 2 */
|
||||
}
|
||||
|
||||
button.pswp__button {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
button.pswp__button,
|
||||
button.pswp__button:hover,
|
||||
button.pswp__button--arrow--left::before,
|
||||
button.pswp__button--arrow--right::before {
|
||||
background-color: transparent !important; /* 1 */
|
||||
}
|
||||
|
||||
button.pswp__button--arrow--left,
|
||||
button.pswp__button--arrow--right,
|
||||
button.pswp__button--arrow--left:hover,
|
||||
button.pswp__button--arrow--right:hover {
|
||||
background-image: none !important; /* 1 */
|
||||
}
|
||||
|
||||
button.pswp__button--close:hover {
|
||||
background-position: 0 -44px;
|
||||
}
|
||||
|
||||
button.pswp__button--zoom:hover {
|
||||
background-position: -88px 0;
|
||||
}
|
||||
|
||||
.woocommerce-message,
|
||||
.woocommerce-error,
|
||||
.woocommerce-info {
|
||||
|
|
@ -1554,6 +1669,23 @@ p.demo_store,
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Right to left styles
|
||||
*/
|
||||
.rtl {
|
||||
&.woocommerce {
|
||||
div.product {
|
||||
div.images {
|
||||
.flex-control-thumbs {
|
||||
li {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-message {
|
||||
border-top-color: #8fae1b;
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -488,26 +488,48 @@
|
|||
$.fn.wc_variations_image_update = function( variation ) {
|
||||
var $form = this,
|
||||
$product = $form.closest('.product'),
|
||||
$product_img = $product.find( 'div.images img:eq(0)' ),
|
||||
$product_link = $product.find( 'div.images a.zoom:eq(0)' );
|
||||
$gallery_img = $product.find( '.flex-control-nav li:eq(0) img' ),
|
||||
$product_img_wrap = $product.find( '.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:eq(0)' ),
|
||||
$product_img = $product.find( '.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:eq(0) .wp-post-image' );
|
||||
|
||||
if ( variation && variation.image_src && variation.image_src.length > 1 ) {
|
||||
$product_img.wc_set_variation_attr( 'src', variation.image_src );
|
||||
$product_img.wc_set_variation_attr( 'title', variation.image_title );
|
||||
$product_img.wc_set_variation_attr( 'alt', variation.image_alt );
|
||||
$product_img.wc_set_variation_attr( 'height', variation.image_h );
|
||||
$product_img.wc_set_variation_attr( 'width', variation.image_w );
|
||||
$product_img.wc_set_variation_attr( 'srcset', variation.image_srcset );
|
||||
$product_img.wc_set_variation_attr( 'sizes', variation.image_sizes );
|
||||
$product_link.wc_set_variation_attr( 'href', variation.image_link );
|
||||
$product_link.wc_set_variation_attr( 'title', variation.image_caption );
|
||||
$product_img.wc_set_variation_attr( 'title', variation.image_title );
|
||||
$product_img.wc_set_variation_attr( 'alt', variation.image_alt );
|
||||
$gallery_img.wc_set_variation_attr( 'src', variation.image_src );
|
||||
$product_img.wc_set_variation_attr( 'data-large-image', variation.image_link );
|
||||
$product_img.wc_set_variation_attr( 'data-large-image-width', variation.image_link_h );
|
||||
$product_img.wc_set_variation_attr( 'data-large-image-height', variation.image_link_w );
|
||||
$product_img_wrap.wc_set_variation_attr( 'data-thumb', variation.image_thumbnail_src );
|
||||
|
||||
window.setTimeout( function() {
|
||||
$( window ).trigger( 'resize' );
|
||||
$gallery_img.click();
|
||||
}, 10 );
|
||||
} else {
|
||||
$product_img_wrap.wc_reset_variation_attr( 'data-thumb' );
|
||||
$product_img.wc_reset_variation_attr( 'large-image' );
|
||||
$product_img.wc_reset_variation_attr( 'src' );
|
||||
$product_img.wc_reset_variation_attr( 'title' );
|
||||
$product_img.wc_reset_variation_attr( 'alt' );
|
||||
$product_img.wc_reset_variation_attr( 'width' );
|
||||
$product_img.wc_reset_variation_attr( 'height' );
|
||||
$product_img.wc_reset_variation_attr( 'srcset' );
|
||||
$product_img.wc_reset_variation_attr( 'sizes' );
|
||||
$product_link.wc_reset_variation_attr( 'href' );
|
||||
$product_link.wc_reset_variation_attr( 'title' );
|
||||
$product_img.wc_reset_variation_attr( 'title' );
|
||||
$product_img.wc_reset_variation_attr( 'alt' );
|
||||
$gallery_img.wc_reset_variation_attr( 'src' );
|
||||
$product_img.wc_reset_variation_attr( 'data-large-image' );
|
||||
$product_img.wc_reset_variation_attr( 'data-large-image-width' );
|
||||
$product_img.wc_reset_variation_attr( 'data-large-image-height' );
|
||||
|
||||
window.setTimeout( function() {
|
||||
$( window ).trigger( 'resize' );
|
||||
}, 10 );
|
||||
}
|
||||
$('body').trigger( 'woocommerce_init_gallery' );
|
||||
};
|
||||
|
||||
$( function() {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
/*global wc_single_product_params */
|
||||
/*global wc_single_product_params, flexslider_options, PhotoSwipe, PhotoSwipeUI_Default */
|
||||
jQuery( function( $ ) {
|
||||
|
||||
// wc_single_product_params is required to continue, ensure the object exists
|
||||
|
|
@ -65,8 +65,141 @@ jQuery( function( $ ) {
|
|||
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.on( 'woocommerce_init_gallery', function() {
|
||||
if ( $.isFunction( $.fn.zoom ) ) {
|
||||
wc_product_gallery.init_zoom();
|
||||
}
|
||||
});
|
||||
|
||||
//Init Tabs and Star Ratings
|
||||
$( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' );
|
||||
|
||||
/**
|
||||
* Product gallery class.
|
||||
*/
|
||||
var wc_product_gallery = {
|
||||
|
||||
/**
|
||||
* Initialize gallery actions and events.
|
||||
*/
|
||||
init: function() {
|
||||
// Init FlexSlider if present.
|
||||
if ( $.isFunction( $.fn.flexslider ) ) {
|
||||
this.init_flexslider();
|
||||
}
|
||||
|
||||
// Init Zoom if present.
|
||||
if ( $.isFunction( $.fn.zoom ) ) {
|
||||
this.init_zoom();
|
||||
}
|
||||
|
||||
// Init PhotoSwipe if present.
|
||||
if ( typeof PhotoSwipe !== 'undefined' ) {
|
||||
this.init_photoswipe();
|
||||
|
||||
// Trigger photoswipe.
|
||||
$( document ).on( 'click', '.woocommerce-product-gallery__trigger', this.trigger_photoswipe );
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Detect if the visitor is using a touch device.
|
||||
*
|
||||
* @return bool
|
||||
*/
|
||||
is_touch_device: function() {
|
||||
return 'ontouchstart' in window || navigator.maxTouchPoints;
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize flexSlider.
|
||||
*/
|
||||
init_flexslider: function() {
|
||||
$( '.woocommerce-product-gallery' ).flexslider({
|
||||
selector: '.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image',
|
||||
animation: flexslider_options.animation,
|
||||
smoothHeight: flexslider_options.smoothHeight,
|
||||
directionNav: flexslider_options.directionNav,
|
||||
controlNav: flexslider_options.controlNav,
|
||||
slideshow: flexslider_options.slideshow,
|
||||
animationSpeed: flexslider_options.animationSpeed,
|
||||
animationLoop: false // Breaks photoswipe pagination if true. It's hard disabled because we don't need it anyway (no next/prev enabled in flex).
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Init zoom.
|
||||
*/
|
||||
init_zoom: function() {
|
||||
// But only zoom if the img is larger than its container and the visitor is not on a touch device.
|
||||
if ( ( $( '.woocommerce-product-gallery__image img' ).attr( 'width' ) > $( '.woocommerce-product-gallery' ).width() ) && ( ! wc_product_gallery.is_touch_device() ) ) {
|
||||
$( '.woocommerce-product-gallery__image' ).trigger('zoom.destroy');
|
||||
$( '.woocommerce-product-gallery__image' ).zoom();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get product gallery image items.
|
||||
*/
|
||||
get_gallery_items: function() {
|
||||
var $slides = $( '.woocommerce-product-gallery__wrapper' ).children(),
|
||||
items = [],
|
||||
index = $slides.filter( '.' + 'flex-active-slide' ).index();
|
||||
|
||||
if ( $slides.length > 0 ) {
|
||||
$slides.each( function( i, el ) {
|
||||
var img = $( el ).find( 'img' ),
|
||||
large_image_src = img.attr( 'data-large-image' ),
|
||||
large_image_w = img.attr( 'data-large-image-width' ),
|
||||
large_image_h = img.attr( 'data-large-image-height' ),
|
||||
item = {
|
||||
src: large_image_src,
|
||||
w: large_image_w,
|
||||
h: large_image_h,
|
||||
title: img.attr( 'title' )
|
||||
};
|
||||
items.push( item );
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
index: index,
|
||||
items: items
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Init PhotoSwipe.
|
||||
*/
|
||||
init_photoswipe: function() {
|
||||
$( '.woocommerce-product-gallery' ).prepend( '<a href="#" class="woocommerce-product-gallery__trigger">🔍</a>' );
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialise photoswipe.
|
||||
*/
|
||||
trigger_photoswipe: function() {
|
||||
var pswpElement = $( '.pswp' )[0];
|
||||
|
||||
// Build items array.
|
||||
var items = wc_product_gallery.get_gallery_items();
|
||||
|
||||
// Define options.
|
||||
var options = {
|
||||
index: items.index,
|
||||
shareEl: false,
|
||||
closeOnScroll: false,
|
||||
history: false,
|
||||
hideAnimationDuration: 0,
|
||||
showAnimationDuration: 0
|
||||
};
|
||||
|
||||
// Initializes and opens PhotoSwipe.
|
||||
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items.items, options );
|
||||
gallery.init();
|
||||
}
|
||||
};
|
||||
|
||||
wc_product_gallery.init();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
jQuery(function(a){return"undefined"!=typeof wc_single_product_params&&(a("body").on("init",".wc-tabs-wrapper, .woocommerce-tabs",function(){a(".wc-tab, .woocommerce-tabs .panel:not(.panel .panel)").hide();var b=window.location.hash,c=window.location.href,d=a(this).find(".wc-tabs, ul.tabs").first();b.toLowerCase().indexOf("comment-")>=0||"#reviews"===b||"#tab-reviews"===b?d.find("li.reviews_tab a").click():c.indexOf("comment-page-")>0||c.indexOf("cpage=")>0?d.find("li.reviews_tab a").click():d.find("li:first a").click()}).on("click",".wc-tabs li a, ul.tabs li a",function(b){b.preventDefault();var c=a(this),d=c.closest(".wc-tabs-wrapper, .woocommerce-tabs"),e=d.find(".wc-tabs, ul.tabs");e.find("li").removeClass("active"),d.find(".wc-tab, .panel:not(.panel .panel)").hide(),c.closest("li").addClass("active"),d.find(c.attr("href")).show()}).on("click","a.woocommerce-review-link",function(){return a(".reviews_tab a").click(),!0}).on("init","#rating",function(){a("#rating").hide().before('<p class="stars"><span><a class="star-1" href="#">1</a><a class="star-2" href="#">2</a><a class="star-3" href="#">3</a><a class="star-4" href="#">4</a><a class="star-5" href="#">5</a></span></p>')}).on("click","#respond p.stars a",function(){var b=a(this),c=a(this).closest("#respond").find("#rating"),d=a(this).closest(".stars");return c.val(b.text()),b.siblings("a").removeClass("active"),b.addClass("active"),d.addClass("selected"),!1}).on("click","#respond #submit",function(){var b=a(this).closest("#respond").find("#rating"),c=b.val();if(b.length>0&&!c&&"yes"===wc_single_product_params.review_rating_required)return window.alert(wc_single_product_params.i18n_required_rating_text),!1}),void a(".wc-tabs-wrapper, .woocommerce-tabs, #rating").trigger("init"))});
|
||||
jQuery(function(a){if("undefined"==typeof wc_single_product_params)return!1;a("body").on("init",".wc-tabs-wrapper, .woocommerce-tabs",function(){a(".wc-tab, .woocommerce-tabs .panel:not(.panel .panel)").hide();var b=window.location.hash,c=window.location.href,d=a(this).find(".wc-tabs, ul.tabs").first();b.toLowerCase().indexOf("comment-")>=0||"#reviews"===b||"#tab-reviews"===b?d.find("li.reviews_tab a").click():c.indexOf("comment-page-")>0||c.indexOf("cpage=")>0?d.find("li.reviews_tab a").click():d.find("li:first a").click()}).on("click",".wc-tabs li a, ul.tabs li a",function(b){b.preventDefault();var c=a(this),d=c.closest(".wc-tabs-wrapper, .woocommerce-tabs"),e=d.find(".wc-tabs, ul.tabs");e.find("li").removeClass("active"),d.find(".wc-tab, .panel:not(.panel .panel)").hide(),c.closest("li").addClass("active"),d.find(c.attr("href")).show()}).on("click","a.woocommerce-review-link",function(){return a(".reviews_tab a").click(),!0}).on("init","#rating",function(){a("#rating").hide().before('<p class="stars"><span><a class="star-1" href="#">1</a><a class="star-2" href="#">2</a><a class="star-3" href="#">3</a><a class="star-4" href="#">4</a><a class="star-5" href="#">5</a></span></p>')}).on("click","#respond p.stars a",function(){var b=a(this),c=a(this).closest("#respond").find("#rating"),d=a(this).closest(".stars");return c.val(b.text()),b.siblings("a").removeClass("active"),b.addClass("active"),d.addClass("selected"),!1}).on("click","#respond #submit",function(){var b=a(this).closest("#respond").find("#rating"),c=b.val();if(b.length>0&&!c&&"yes"===wc_single_product_params.review_rating_required)return window.alert(wc_single_product_params.i18n_required_rating_text),!1}).on("woocommerce_init_gallery",function(){a.isFunction(a.fn.zoom)&&b.init_zoom()}),a(".wc-tabs-wrapper, .woocommerce-tabs, #rating").trigger("init");var b={init:function(){a.isFunction(a.fn.flexslider)&&this.init_flexslider(),a.isFunction(a.fn.zoom)&&this.init_zoom(),"undefined"!=typeof PhotoSwipe&&(this.init_photoswipe(),a(document).on("click",".woocommerce-product-gallery__trigger",this.trigger_photoswipe))},is_touch_device:function(){return"ontouchstart"in window||navigator.maxTouchPoints},init_flexslider:function(){a(".woocommerce-product-gallery").flexslider({selector:".woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image",animation:flexslider_options.animation,smoothHeight:flexslider_options.smoothHeight,directionNav:flexslider_options.directionNav,controlNav:flexslider_options.controlNav,slideshow:flexslider_options.slideshow,animationSpeed:flexslider_options.animationSpeed,animationLoop:!1})},init_zoom:function(){a(".woocommerce-product-gallery__image img").attr("width")>a(".woocommerce-product-gallery").width()&&!b.is_touch_device()&&(a(".woocommerce-product-gallery__image").trigger("zoom.destroy"),a(".woocommerce-product-gallery__image").zoom())},get_gallery_items:function(){var b=a(".woocommerce-product-gallery__wrapper").children(),c=[],d=b.filter(".flex-active-slide").index();return b.length>0&&b.each(function(b,d){var e=a(d).find("img"),f=e.attr("data-large-image"),g=e.attr("data-large-image-width"),h=e.attr("data-large-image-height"),i={src:f,w:g,h:h,title:e.attr("title")};c.push(i)}),{index:d,items:c}},init_photoswipe:function(){a(".woocommerce-product-gallery").prepend('<a href="#" class="woocommerce-product-gallery__trigger">🔍</a>')},trigger_photoswipe:function(){var c=a(".pswp")[0],d=b.get_gallery_items(),e={index:d.index,shareEl:!1,closeOnScroll:!1,history:!1,hideAnimationDuration:0,showAnimationDuration:0},f=new PhotoSwipe(c,PhotoSwipeUI_Default,d.items,e);f.init()}};b.init()});
|
||||
|
|
@ -0,0 +1,861 @@
|
|||
/*! PhotoSwipe Default UI - 4.1.1 - 2015-12-24
|
||||
* http://photoswipe.com
|
||||
* Copyright (c) 2015 Dmitry Semenov; */
|
||||
/**
|
||||
*
|
||||
* UI on top of main sliding area (caption, arrows, close button, etc.).
|
||||
* Built just using public methods/properties of PhotoSwipe.
|
||||
*
|
||||
*/
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory();
|
||||
} else {
|
||||
root.PhotoSwipeUI_Default = factory();
|
||||
}
|
||||
})(this, function () {
|
||||
|
||||
'use strict';
|
||||
|
||||
|
||||
|
||||
var PhotoSwipeUI_Default =
|
||||
function(pswp, framework) {
|
||||
|
||||
var ui = this;
|
||||
var _overlayUIUpdated = false,
|
||||
_controlsVisible = true,
|
||||
_fullscrenAPI,
|
||||
_controls,
|
||||
_captionContainer,
|
||||
_fakeCaptionContainer,
|
||||
_indexIndicator,
|
||||
_shareButton,
|
||||
_shareModal,
|
||||
_shareModalHidden = true,
|
||||
_initalCloseOnScrollValue,
|
||||
_isIdle,
|
||||
_listen,
|
||||
|
||||
_loadingIndicator,
|
||||
_loadingIndicatorHidden,
|
||||
_loadingIndicatorTimeout,
|
||||
|
||||
_galleryHasOneSlide,
|
||||
|
||||
_options,
|
||||
_defaultUIOptions = {
|
||||
barsSize: {top:44, bottom:'auto'},
|
||||
closeElClasses: ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar'],
|
||||
timeToIdle: 4000,
|
||||
timeToIdleOutside: 1000,
|
||||
loadingIndicatorDelay: 1000, // 2s
|
||||
|
||||
addCaptionHTMLFn: function(item, captionEl /*, isFake */) {
|
||||
if(!item.title) {
|
||||
captionEl.children[0].innerHTML = '';
|
||||
return false;
|
||||
}
|
||||
captionEl.children[0].innerHTML = item.title;
|
||||
return true;
|
||||
},
|
||||
|
||||
closeEl:true,
|
||||
captionEl: true,
|
||||
fullscreenEl: true,
|
||||
zoomEl: true,
|
||||
shareEl: true,
|
||||
counterEl: true,
|
||||
arrowEl: true,
|
||||
preloaderEl: true,
|
||||
|
||||
tapToClose: false,
|
||||
tapToToggleControls: true,
|
||||
|
||||
clickToCloseNonZoomable: true,
|
||||
|
||||
shareButtons: [
|
||||
{id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
|
||||
{id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
|
||||
{id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/'+
|
||||
'?url={{url}}&media={{image_url}}&description={{text}}'},
|
||||
{id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
|
||||
],
|
||||
getImageURLForShare: function( /* shareButtonData */ ) {
|
||||
return pswp.currItem.src || '';
|
||||
},
|
||||
getPageURLForShare: function( /* shareButtonData */ ) {
|
||||
return window.location.href;
|
||||
},
|
||||
getTextForShare: function( /* shareButtonData */ ) {
|
||||
return pswp.currItem.title || '';
|
||||
},
|
||||
|
||||
indexIndicatorSep: ' / ',
|
||||
fitControlsWidth: 1200
|
||||
|
||||
},
|
||||
_blockControlsTap,
|
||||
_blockControlsTapTimeout;
|
||||
|
||||
|
||||
|
||||
var _onControlsTap = function(e) {
|
||||
if(_blockControlsTap) {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
e = e || window.event;
|
||||
|
||||
if(_options.timeToIdle && _options.mouseUsed && !_isIdle) {
|
||||
// reset idle timer
|
||||
_onIdleMouseMove();
|
||||
}
|
||||
|
||||
|
||||
var target = e.target || e.srcElement,
|
||||
uiElement,
|
||||
clickedClass = target.getAttribute('class') || '',
|
||||
found;
|
||||
|
||||
for(var i = 0; i < _uiElements.length; i++) {
|
||||
uiElement = _uiElements[i];
|
||||
if(uiElement.onTap && clickedClass.indexOf('pswp__' + uiElement.name ) > -1 ) {
|
||||
uiElement.onTap();
|
||||
found = true;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if(found) {
|
||||
if(e.stopPropagation) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
_blockControlsTap = true;
|
||||
|
||||
// Some versions of Android don't prevent ghost click event
|
||||
// when preventDefault() was called on touchstart and/or touchend.
|
||||
//
|
||||
// This happens on v4.3, 4.2, 4.1,
|
||||
// older versions strangely work correctly,
|
||||
// but just in case we add delay on all of them)
|
||||
var tapDelay = framework.features.isOldAndroid ? 600 : 30;
|
||||
_blockControlsTapTimeout = setTimeout(function() {
|
||||
_blockControlsTap = false;
|
||||
}, tapDelay);
|
||||
}
|
||||
|
||||
},
|
||||
_fitControlsInViewport = function() {
|
||||
return !pswp.likelyTouchDevice || _options.mouseUsed || screen.width > _options.fitControlsWidth;
|
||||
},
|
||||
_togglePswpClass = function(el, cName, add) {
|
||||
framework[ (add ? 'add' : 'remove') + 'Class' ](el, 'pswp__' + cName);
|
||||
},
|
||||
|
||||
// add class when there is just one item in the gallery
|
||||
// (by default it hides left/right arrows and 1ofX counter)
|
||||
_countNumItems = function() {
|
||||
var hasOneSlide = (_options.getNumItemsFn() === 1);
|
||||
|
||||
if(hasOneSlide !== _galleryHasOneSlide) {
|
||||
_togglePswpClass(_controls, 'ui--one-slide', hasOneSlide);
|
||||
_galleryHasOneSlide = hasOneSlide;
|
||||
}
|
||||
},
|
||||
_toggleShareModalClass = function() {
|
||||
_togglePswpClass(_shareModal, 'share-modal--hidden', _shareModalHidden);
|
||||
},
|
||||
_toggleShareModal = function() {
|
||||
|
||||
_shareModalHidden = !_shareModalHidden;
|
||||
|
||||
|
||||
if(!_shareModalHidden) {
|
||||
_toggleShareModalClass();
|
||||
setTimeout(function() {
|
||||
if(!_shareModalHidden) {
|
||||
framework.addClass(_shareModal, 'pswp__share-modal--fade-in');
|
||||
}
|
||||
}, 30);
|
||||
} else {
|
||||
framework.removeClass(_shareModal, 'pswp__share-modal--fade-in');
|
||||
setTimeout(function() {
|
||||
if(_shareModalHidden) {
|
||||
_toggleShareModalClass();
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
if(!_shareModalHidden) {
|
||||
_updateShareURLs();
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
_openWindowPopup = function(e) {
|
||||
e = e || window.event;
|
||||
var target = e.target || e.srcElement;
|
||||
|
||||
pswp.shout('shareLinkClick', e, target);
|
||||
|
||||
if(!target.href) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if( target.hasAttribute('download') ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
window.open(target.href, 'pswp_share', 'scrollbars=yes,resizable=yes,toolbar=no,'+
|
||||
'location=yes,width=550,height=420,top=100,left=' +
|
||||
(window.screen ? Math.round(screen.width / 2 - 275) : 100) );
|
||||
|
||||
if(!_shareModalHidden) {
|
||||
_toggleShareModal();
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
_updateShareURLs = function() {
|
||||
var shareButtonOut = '',
|
||||
shareButtonData,
|
||||
shareURL,
|
||||
image_url,
|
||||
page_url,
|
||||
share_text;
|
||||
|
||||
for(var i = 0; i < _options.shareButtons.length; i++) {
|
||||
shareButtonData = _options.shareButtons[i];
|
||||
|
||||
image_url = _options.getImageURLForShare(shareButtonData);
|
||||
page_url = _options.getPageURLForShare(shareButtonData);
|
||||
share_text = _options.getTextForShare(shareButtonData);
|
||||
|
||||
shareURL = shareButtonData.url.replace('{{url}}', encodeURIComponent(page_url) )
|
||||
.replace('{{image_url}}', encodeURIComponent(image_url) )
|
||||
.replace('{{raw_image_url}}', image_url )
|
||||
.replace('{{text}}', encodeURIComponent(share_text) );
|
||||
|
||||
shareButtonOut += '<a href="' + shareURL + '" target="_blank" '+
|
||||
'class="pswp__share--' + shareButtonData.id + '"' +
|
||||
(shareButtonData.download ? 'download' : '') + '>' +
|
||||
shareButtonData.label + '</a>';
|
||||
|
||||
if(_options.parseShareButtonOut) {
|
||||
shareButtonOut = _options.parseShareButtonOut(shareButtonData, shareButtonOut);
|
||||
}
|
||||
}
|
||||
_shareModal.children[0].innerHTML = shareButtonOut;
|
||||
_shareModal.children[0].onclick = _openWindowPopup;
|
||||
|
||||
},
|
||||
_hasCloseClass = function(target) {
|
||||
for(var i = 0; i < _options.closeElClasses.length; i++) {
|
||||
if( framework.hasClass(target, 'pswp__' + _options.closeElClasses[i]) ) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
_idleInterval,
|
||||
_idleTimer,
|
||||
_idleIncrement = 0,
|
||||
_onIdleMouseMove = function() {
|
||||
clearTimeout(_idleTimer);
|
||||
_idleIncrement = 0;
|
||||
if(_isIdle) {
|
||||
ui.setIdle(false);
|
||||
}
|
||||
},
|
||||
_onMouseLeaveWindow = function(e) {
|
||||
e = e ? e : window.event;
|
||||
var from = e.relatedTarget || e.toElement;
|
||||
if (!from || from.nodeName === 'HTML') {
|
||||
clearTimeout(_idleTimer);
|
||||
_idleTimer = setTimeout(function() {
|
||||
ui.setIdle(true);
|
||||
}, _options.timeToIdleOutside);
|
||||
}
|
||||
},
|
||||
_setupFullscreenAPI = function() {
|
||||
if(_options.fullscreenEl && !framework.features.isOldAndroid) {
|
||||
if(!_fullscrenAPI) {
|
||||
_fullscrenAPI = ui.getFullscreenAPI();
|
||||
}
|
||||
if(_fullscrenAPI) {
|
||||
framework.bind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
|
||||
ui.updateFullscreen();
|
||||
framework.addClass(pswp.template, 'pswp--supports-fs');
|
||||
} else {
|
||||
framework.removeClass(pswp.template, 'pswp--supports-fs');
|
||||
}
|
||||
}
|
||||
},
|
||||
_setupLoadingIndicator = function() {
|
||||
// Setup loading indicator
|
||||
if(_options.preloaderEl) {
|
||||
|
||||
_toggleLoadingIndicator(true);
|
||||
|
||||
_listen('beforeChange', function() {
|
||||
|
||||
clearTimeout(_loadingIndicatorTimeout);
|
||||
|
||||
// display loading indicator with delay
|
||||
_loadingIndicatorTimeout = setTimeout(function() {
|
||||
|
||||
if(pswp.currItem && pswp.currItem.loading) {
|
||||
|
||||
if( !pswp.allowProgressiveImg() || (pswp.currItem.img && !pswp.currItem.img.naturalWidth) ) {
|
||||
// show preloader if progressive loading is not enabled,
|
||||
// or image width is not defined yet (because of slow connection)
|
||||
_toggleLoadingIndicator(false);
|
||||
// items-controller.js function allowProgressiveImg
|
||||
}
|
||||
|
||||
} else {
|
||||
_toggleLoadingIndicator(true); // hide preloader
|
||||
}
|
||||
|
||||
}, _options.loadingIndicatorDelay);
|
||||
|
||||
});
|
||||
_listen('imageLoadComplete', function(index, item) {
|
||||
if(pswp.currItem === item) {
|
||||
_toggleLoadingIndicator(true);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
_toggleLoadingIndicator = function(hide) {
|
||||
if( _loadingIndicatorHidden !== hide ) {
|
||||
_togglePswpClass(_loadingIndicator, 'preloader--active', !hide);
|
||||
_loadingIndicatorHidden = hide;
|
||||
}
|
||||
},
|
||||
_applyNavBarGaps = function(item) {
|
||||
var gap = item.vGap;
|
||||
|
||||
if( _fitControlsInViewport() ) {
|
||||
|
||||
var bars = _options.barsSize;
|
||||
if(_options.captionEl && bars.bottom === 'auto') {
|
||||
if(!_fakeCaptionContainer) {
|
||||
_fakeCaptionContainer = framework.createEl('pswp__caption pswp__caption--fake');
|
||||
_fakeCaptionContainer.appendChild( framework.createEl('pswp__caption__center') );
|
||||
_controls.insertBefore(_fakeCaptionContainer, _captionContainer);
|
||||
framework.addClass(_controls, 'pswp__ui--fit');
|
||||
}
|
||||
if( _options.addCaptionHTMLFn(item, _fakeCaptionContainer, true) ) {
|
||||
|
||||
var captionSize = _fakeCaptionContainer.clientHeight;
|
||||
gap.bottom = parseInt(captionSize,10) || 44;
|
||||
} else {
|
||||
gap.bottom = bars.top; // if no caption, set size of bottom gap to size of top
|
||||
}
|
||||
} else {
|
||||
gap.bottom = bars.bottom === 'auto' ? 0 : bars.bottom;
|
||||
}
|
||||
|
||||
// height of top bar is static, no need to calculate it
|
||||
gap.top = bars.top;
|
||||
} else {
|
||||
gap.top = gap.bottom = 0;
|
||||
}
|
||||
},
|
||||
_setupIdle = function() {
|
||||
// Hide controls when mouse is used
|
||||
if(_options.timeToIdle) {
|
||||
_listen('mouseUsed', function() {
|
||||
|
||||
framework.bind(document, 'mousemove', _onIdleMouseMove);
|
||||
framework.bind(document, 'mouseout', _onMouseLeaveWindow);
|
||||
|
||||
_idleInterval = setInterval(function() {
|
||||
_idleIncrement++;
|
||||
if(_idleIncrement === 2) {
|
||||
ui.setIdle(true);
|
||||
}
|
||||
}, _options.timeToIdle / 2);
|
||||
});
|
||||
}
|
||||
},
|
||||
_setupHidingControlsDuringGestures = function() {
|
||||
|
||||
// Hide controls on vertical drag
|
||||
_listen('onVerticalDrag', function(now) {
|
||||
if(_controlsVisible && now < 0.95) {
|
||||
ui.hideControls();
|
||||
} else if(!_controlsVisible && now >= 0.95) {
|
||||
ui.showControls();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide controls when pinching to close
|
||||
var pinchControlsHidden;
|
||||
_listen('onPinchClose' , function(now) {
|
||||
if(_controlsVisible && now < 0.9) {
|
||||
ui.hideControls();
|
||||
pinchControlsHidden = true;
|
||||
} else if(pinchControlsHidden && !_controlsVisible && now > 0.9) {
|
||||
ui.showControls();
|
||||
}
|
||||
});
|
||||
|
||||
_listen('zoomGestureEnded', function() {
|
||||
pinchControlsHidden = false;
|
||||
if(pinchControlsHidden && !_controlsVisible) {
|
||||
ui.showControls();
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
var _uiElements = [
|
||||
{
|
||||
name: 'caption',
|
||||
option: 'captionEl',
|
||||
onInit: function(el) {
|
||||
_captionContainer = el;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'share-modal',
|
||||
option: 'shareEl',
|
||||
onInit: function(el) {
|
||||
_shareModal = el;
|
||||
},
|
||||
onTap: function() {
|
||||
_toggleShareModal();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'button--share',
|
||||
option: 'shareEl',
|
||||
onInit: function(el) {
|
||||
_shareButton = el;
|
||||
},
|
||||
onTap: function() {
|
||||
_toggleShareModal();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'button--zoom',
|
||||
option: 'zoomEl',
|
||||
onTap: pswp.toggleDesktopZoom
|
||||
},
|
||||
{
|
||||
name: 'counter',
|
||||
option: 'counterEl',
|
||||
onInit: function(el) {
|
||||
_indexIndicator = el;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'button--close',
|
||||
option: 'closeEl',
|
||||
onTap: pswp.close
|
||||
},
|
||||
{
|
||||
name: 'button--arrow--left',
|
||||
option: 'arrowEl',
|
||||
onTap: pswp.prev
|
||||
},
|
||||
{
|
||||
name: 'button--arrow--right',
|
||||
option: 'arrowEl',
|
||||
onTap: pswp.next
|
||||
},
|
||||
{
|
||||
name: 'button--fs',
|
||||
option: 'fullscreenEl',
|
||||
onTap: function() {
|
||||
if(_fullscrenAPI.isFullscreen()) {
|
||||
_fullscrenAPI.exit();
|
||||
} else {
|
||||
_fullscrenAPI.enter();
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'preloader',
|
||||
option: 'preloaderEl',
|
||||
onInit: function(el) {
|
||||
_loadingIndicator = el;
|
||||
}
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
var _setupUIElements = function() {
|
||||
var item,
|
||||
classAttr,
|
||||
uiElement;
|
||||
|
||||
var loopThroughChildElements = function(sChildren) {
|
||||
if(!sChildren) {
|
||||
return;
|
||||
}
|
||||
|
||||
var l = sChildren.length;
|
||||
for(var i = 0; i < l; i++) {
|
||||
item = sChildren[i];
|
||||
classAttr = item.className;
|
||||
|
||||
for(var a = 0; a < _uiElements.length; a++) {
|
||||
uiElement = _uiElements[a];
|
||||
|
||||
if(classAttr.indexOf('pswp__' + uiElement.name) > -1 ) {
|
||||
|
||||
if( _options[uiElement.option] ) { // if element is not disabled from options
|
||||
|
||||
framework.removeClass(item, 'pswp__element--disabled');
|
||||
if(uiElement.onInit) {
|
||||
uiElement.onInit(item);
|
||||
}
|
||||
|
||||
//item.style.display = 'block';
|
||||
} else {
|
||||
framework.addClass(item, 'pswp__element--disabled');
|
||||
//item.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
loopThroughChildElements(_controls.children);
|
||||
|
||||
var topBar = framework.getChildByClass(_controls, 'pswp__top-bar');
|
||||
if(topBar) {
|
||||
loopThroughChildElements( topBar.children );
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
ui.init = function() {
|
||||
|
||||
// extend options
|
||||
framework.extend(pswp.options, _defaultUIOptions, true);
|
||||
|
||||
// create local link for fast access
|
||||
_options = pswp.options;
|
||||
|
||||
// find pswp__ui element
|
||||
_controls = framework.getChildByClass(pswp.scrollWrap, 'pswp__ui');
|
||||
|
||||
// create local link
|
||||
_listen = pswp.listen;
|
||||
|
||||
|
||||
_setupHidingControlsDuringGestures();
|
||||
|
||||
// update controls when slides change
|
||||
_listen('beforeChange', ui.update);
|
||||
|
||||
// toggle zoom on double-tap
|
||||
_listen('doubleTap', function(point) {
|
||||
var initialZoomLevel = pswp.currItem.initialZoomLevel;
|
||||
if(pswp.getZoomLevel() !== initialZoomLevel) {
|
||||
pswp.zoomTo(initialZoomLevel, point, 333);
|
||||
} else {
|
||||
pswp.zoomTo(_options.getDoubleTapZoom(false, pswp.currItem), point, 333);
|
||||
}
|
||||
});
|
||||
|
||||
// Allow text selection in caption
|
||||
_listen('preventDragEvent', function(e, isDown, preventObj) {
|
||||
var t = e.target || e.srcElement;
|
||||
if(
|
||||
t &&
|
||||
t.getAttribute('class') && e.type.indexOf('mouse') > -1 &&
|
||||
( t.getAttribute('class').indexOf('__caption') > 0 || (/(SMALL|STRONG|EM)/i).test(t.tagName) )
|
||||
) {
|
||||
preventObj.prevent = false;
|
||||
}
|
||||
});
|
||||
|
||||
// bind events for UI
|
||||
_listen('bindEvents', function() {
|
||||
framework.bind(_controls, 'pswpTap click', _onControlsTap);
|
||||
framework.bind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);
|
||||
|
||||
if(!pswp.likelyTouchDevice) {
|
||||
framework.bind(pswp.scrollWrap, 'mouseover', ui.onMouseOver);
|
||||
}
|
||||
});
|
||||
|
||||
// unbind events for UI
|
||||
_listen('unbindEvents', function() {
|
||||
if(!_shareModalHidden) {
|
||||
_toggleShareModal();
|
||||
}
|
||||
|
||||
if(_idleInterval) {
|
||||
clearInterval(_idleInterval);
|
||||
}
|
||||
framework.unbind(document, 'mouseout', _onMouseLeaveWindow);
|
||||
framework.unbind(document, 'mousemove', _onIdleMouseMove);
|
||||
framework.unbind(_controls, 'pswpTap click', _onControlsTap);
|
||||
framework.unbind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);
|
||||
framework.unbind(pswp.scrollWrap, 'mouseover', ui.onMouseOver);
|
||||
|
||||
if(_fullscrenAPI) {
|
||||
framework.unbind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
|
||||
if(_fullscrenAPI.isFullscreen()) {
|
||||
_options.hideAnimationDuration = 0;
|
||||
_fullscrenAPI.exit();
|
||||
}
|
||||
_fullscrenAPI = null;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// clean up things when gallery is destroyed
|
||||
_listen('destroy', function() {
|
||||
if(_options.captionEl) {
|
||||
if(_fakeCaptionContainer) {
|
||||
_controls.removeChild(_fakeCaptionContainer);
|
||||
}
|
||||
framework.removeClass(_captionContainer, 'pswp__caption--empty');
|
||||
}
|
||||
|
||||
if(_shareModal) {
|
||||
_shareModal.children[0].onclick = null;
|
||||
}
|
||||
framework.removeClass(_controls, 'pswp__ui--over-close');
|
||||
framework.addClass( _controls, 'pswp__ui--hidden');
|
||||
ui.setIdle(false);
|
||||
});
|
||||
|
||||
|
||||
if(!_options.showAnimationDuration) {
|
||||
framework.removeClass( _controls, 'pswp__ui--hidden');
|
||||
}
|
||||
_listen('initialZoomIn', function() {
|
||||
if(_options.showAnimationDuration) {
|
||||
framework.removeClass( _controls, 'pswp__ui--hidden');
|
||||
}
|
||||
});
|
||||
_listen('initialZoomOut', function() {
|
||||
framework.addClass( _controls, 'pswp__ui--hidden');
|
||||
});
|
||||
|
||||
_listen('parseVerticalMargin', _applyNavBarGaps);
|
||||
|
||||
_setupUIElements();
|
||||
|
||||
if(_options.shareEl && _shareButton && _shareModal) {
|
||||
_shareModalHidden = true;
|
||||
}
|
||||
|
||||
_countNumItems();
|
||||
|
||||
_setupIdle();
|
||||
|
||||
_setupFullscreenAPI();
|
||||
|
||||
_setupLoadingIndicator();
|
||||
};
|
||||
|
||||
ui.setIdle = function(isIdle) {
|
||||
_isIdle = isIdle;
|
||||
_togglePswpClass(_controls, 'ui--idle', isIdle);
|
||||
};
|
||||
|
||||
ui.update = function() {
|
||||
// Don't update UI if it's hidden
|
||||
if(_controlsVisible && pswp.currItem) {
|
||||
|
||||
ui.updateIndexIndicator();
|
||||
|
||||
if(_options.captionEl) {
|
||||
_options.addCaptionHTMLFn(pswp.currItem, _captionContainer);
|
||||
|
||||
_togglePswpClass(_captionContainer, 'caption--empty', !pswp.currItem.title);
|
||||
}
|
||||
|
||||
_overlayUIUpdated = true;
|
||||
|
||||
} else {
|
||||
_overlayUIUpdated = false;
|
||||
}
|
||||
|
||||
if(!_shareModalHidden) {
|
||||
_toggleShareModal();
|
||||
}
|
||||
|
||||
_countNumItems();
|
||||
};
|
||||
|
||||
ui.updateFullscreen = function(e) {
|
||||
|
||||
if(e) {
|
||||
// some browsers change window scroll position during the fullscreen
|
||||
// so PhotoSwipe updates it just in case
|
||||
setTimeout(function() {
|
||||
pswp.setScrollOffset( 0, framework.getScrollY() );
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// toogle pswp--fs class on root element
|
||||
framework[ (_fullscrenAPI.isFullscreen() ? 'add' : 'remove') + 'Class' ](pswp.template, 'pswp--fs');
|
||||
};
|
||||
|
||||
ui.updateIndexIndicator = function() {
|
||||
if(_options.counterEl) {
|
||||
_indexIndicator.innerHTML = (pswp.getCurrentIndex()+1) +
|
||||
_options.indexIndicatorSep +
|
||||
_options.getNumItemsFn();
|
||||
}
|
||||
};
|
||||
|
||||
ui.onGlobalTap = function(e) {
|
||||
e = e || window.event;
|
||||
var target = e.target || e.srcElement;
|
||||
|
||||
if(_blockControlsTap) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(e.detail && e.detail.pointerType === 'mouse') {
|
||||
|
||||
// close gallery if clicked outside of the image
|
||||
if(_hasCloseClass(target)) {
|
||||
pswp.close();
|
||||
return;
|
||||
}
|
||||
|
||||
if(framework.hasClass(target, 'pswp__img')) {
|
||||
if(pswp.getZoomLevel() === 1 && pswp.getZoomLevel() <= pswp.currItem.fitRatio) {
|
||||
if(_options.clickToCloseNonZoomable) {
|
||||
pswp.close();
|
||||
}
|
||||
} else {
|
||||
pswp.toggleDesktopZoom(e.detail.releasePoint);
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
// tap anywhere (except buttons) to toggle visibility of controls
|
||||
if(_options.tapToToggleControls) {
|
||||
if(_controlsVisible) {
|
||||
ui.hideControls();
|
||||
} else {
|
||||
ui.showControls();
|
||||
}
|
||||
}
|
||||
|
||||
// tap to close gallery
|
||||
if(_options.tapToClose && (framework.hasClass(target, 'pswp__img') || _hasCloseClass(target)) ) {
|
||||
pswp.close();
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
ui.onMouseOver = function(e) {
|
||||
e = e || window.event;
|
||||
var target = e.target || e.srcElement;
|
||||
|
||||
// add class when mouse is over an element that should close the gallery
|
||||
_togglePswpClass(_controls, 'ui--over-close', _hasCloseClass(target));
|
||||
};
|
||||
|
||||
ui.hideControls = function() {
|
||||
framework.addClass(_controls,'pswp__ui--hidden');
|
||||
_controlsVisible = false;
|
||||
};
|
||||
|
||||
ui.showControls = function() {
|
||||
_controlsVisible = true;
|
||||
if(!_overlayUIUpdated) {
|
||||
ui.update();
|
||||
}
|
||||
framework.removeClass(_controls,'pswp__ui--hidden');
|
||||
};
|
||||
|
||||
ui.supportsFullscreen = function() {
|
||||
var d = document;
|
||||
return !!(d.exitFullscreen || d.mozCancelFullScreen || d.webkitExitFullscreen || d.msExitFullscreen);
|
||||
};
|
||||
|
||||
ui.getFullscreenAPI = function() {
|
||||
var dE = document.documentElement,
|
||||
api,
|
||||
tF = 'fullscreenchange';
|
||||
|
||||
if (dE.requestFullscreen) {
|
||||
api = {
|
||||
enterK: 'requestFullscreen',
|
||||
exitK: 'exitFullscreen',
|
||||
elementK: 'fullscreenElement',
|
||||
eventK: tF
|
||||
};
|
||||
|
||||
} else if(dE.mozRequestFullScreen ) {
|
||||
api = {
|
||||
enterK: 'mozRequestFullScreen',
|
||||
exitK: 'mozCancelFullScreen',
|
||||
elementK: 'mozFullScreenElement',
|
||||
eventK: 'moz' + tF
|
||||
};
|
||||
|
||||
|
||||
|
||||
} else if(dE.webkitRequestFullscreen) {
|
||||
api = {
|
||||
enterK: 'webkitRequestFullscreen',
|
||||
exitK: 'webkitExitFullscreen',
|
||||
elementK: 'webkitFullscreenElement',
|
||||
eventK: 'webkit' + tF
|
||||
};
|
||||
|
||||
} else if(dE.msRequestFullscreen) {
|
||||
api = {
|
||||
enterK: 'msRequestFullscreen',
|
||||
exitK: 'msExitFullscreen',
|
||||
elementK: 'msFullscreenElement',
|
||||
eventK: 'MSFullscreenChange'
|
||||
};
|
||||
}
|
||||
|
||||
if(api) {
|
||||
api.enter = function() {
|
||||
// disable close-on-scroll in fullscreen
|
||||
_initalCloseOnScrollValue = _options.closeOnScroll;
|
||||
_options.closeOnScroll = false;
|
||||
|
||||
if(this.enterK === 'webkitRequestFullscreen') {
|
||||
pswp.template[this.enterK]( Element.ALLOW_KEYBOARD_INPUT );
|
||||
} else {
|
||||
return pswp.template[this.enterK]();
|
||||
}
|
||||
};
|
||||
api.exit = function() {
|
||||
_options.closeOnScroll = _initalCloseOnScrollValue;
|
||||
|
||||
return document[this.exitK]();
|
||||
|
||||
};
|
||||
api.isFullscreen = function() { return document[this.elementK]; };
|
||||
}
|
||||
|
||||
return api;
|
||||
};
|
||||
|
||||
|
||||
|
||||
};
|
||||
return PhotoSwipeUI_Default;
|
||||
|
||||
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,242 @@
|
|||
/*!
|
||||
Zoom 1.7.15
|
||||
license: MIT
|
||||
http://www.jacklmoore.com/zoom
|
||||
*/
|
||||
(function ($) {
|
||||
var defaults = {
|
||||
url: false,
|
||||
callback: false,
|
||||
target: false,
|
||||
duration: 120,
|
||||
on: 'mouseover', // other options: grab, click, toggle
|
||||
touch: true, // enables a touch fallback
|
||||
onZoomIn: false,
|
||||
onZoomOut: false,
|
||||
magnify: 1
|
||||
};
|
||||
|
||||
// Core Zoom Logic, independent of event listeners.
|
||||
$.zoom = function(target, source, img, magnify) {
|
||||
var targetHeight,
|
||||
targetWidth,
|
||||
sourceHeight,
|
||||
sourceWidth,
|
||||
xRatio,
|
||||
yRatio,
|
||||
offset,
|
||||
$target = $(target),
|
||||
position = $target.css('position'),
|
||||
$source = $(source);
|
||||
|
||||
// The parent element needs positioning so that the zoomed element can be correctly positioned within.
|
||||
$target.css('position', /(absolute|fixed)/.test(position) ? position : 'relative');
|
||||
$target.css('overflow', 'hidden');
|
||||
|
||||
img.style.width = img.style.height = '';
|
||||
|
||||
$(img)
|
||||
.addClass('zoomImg')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
opacity: 0,
|
||||
width: img.width * magnify,
|
||||
height: img.height * magnify,
|
||||
border: 'none',
|
||||
maxWidth: 'none',
|
||||
maxHeight: 'none'
|
||||
})
|
||||
.appendTo(target);
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
targetWidth = $target.outerWidth();
|
||||
targetHeight = $target.outerHeight();
|
||||
|
||||
if (source === $target[0]) {
|
||||
sourceWidth = targetWidth;
|
||||
sourceHeight = targetHeight;
|
||||
} else {
|
||||
sourceWidth = $source.outerWidth();
|
||||
sourceHeight = $source.outerHeight();
|
||||
}
|
||||
|
||||
xRatio = (img.width - targetWidth) / sourceWidth;
|
||||
yRatio = (img.height - targetHeight) / sourceHeight;
|
||||
|
||||
offset = $source.offset();
|
||||
},
|
||||
move: function (e) {
|
||||
var left = (e.pageX - offset.left),
|
||||
top = (e.pageY - offset.top);
|
||||
|
||||
top = Math.max(Math.min(top, sourceHeight), 0);
|
||||
left = Math.max(Math.min(left, sourceWidth), 0);
|
||||
|
||||
img.style.left = (left * -xRatio) + 'px';
|
||||
img.style.top = (top * -yRatio) + 'px';
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
$.fn.zoom = function (options) {
|
||||
return this.each(function () {
|
||||
var
|
||||
settings = $.extend({}, defaults, options || {}),
|
||||
//target will display the zoomed image
|
||||
target = settings.target || this,
|
||||
//source will provide zoom location info (thumbnail)
|
||||
source = this,
|
||||
$source = $(source),
|
||||
$target = $(target),
|
||||
img = document.createElement('img'),
|
||||
$img = $(img),
|
||||
mousemove = 'mousemove.zoom',
|
||||
clicked = false,
|
||||
touched = false,
|
||||
$urlElement;
|
||||
|
||||
// If a url wasn't specified, look for an image element.
|
||||
if (!settings.url) {
|
||||
$urlElement = $source.find('img');
|
||||
if ($urlElement[0]) {
|
||||
settings.url = $urlElement.data('src') || $urlElement.attr('src');
|
||||
}
|
||||
if (!settings.url) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
(function(){
|
||||
var position = $target.css('position');
|
||||
var overflow = $target.css('overflow');
|
||||
|
||||
$source.one('zoom.destroy', function(){
|
||||
$source.off(".zoom");
|
||||
$target.css('position', position);
|
||||
$target.css('overflow', overflow);
|
||||
$img.remove();
|
||||
});
|
||||
|
||||
}());
|
||||
|
||||
img.onload = function () {
|
||||
var zoom = $.zoom(target, source, img, settings.magnify);
|
||||
|
||||
function start(e) {
|
||||
zoom.init();
|
||||
zoom.move(e);
|
||||
|
||||
// Skip the fade-in for IE8 and lower since it chokes on fading-in
|
||||
// and changing position based on mousemovement at the same time.
|
||||
$img.stop()
|
||||
.fadeTo($.support.opacity ? settings.duration : 0, 1, $.isFunction(settings.onZoomIn) ? settings.onZoomIn.call(img) : false);
|
||||
}
|
||||
|
||||
function stop() {
|
||||
$img.stop()
|
||||
.fadeTo(settings.duration, 0, $.isFunction(settings.onZoomOut) ? settings.onZoomOut.call(img) : false);
|
||||
}
|
||||
|
||||
// Mouse events
|
||||
if (settings.on === 'grab') {
|
||||
$source
|
||||
.on('mousedown.zoom',
|
||||
function (e) {
|
||||
if (e.which === 1) {
|
||||
$(document).one('mouseup.zoom',
|
||||
function () {
|
||||
stop();
|
||||
|
||||
$(document).off(mousemove, zoom.move);
|
||||
}
|
||||
);
|
||||
|
||||
start(e);
|
||||
|
||||
$(document).on(mousemove, zoom.move);
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
);
|
||||
} else if (settings.on === 'click') {
|
||||
$source.on('click.zoom',
|
||||
function (e) {
|
||||
if (clicked) {
|
||||
// bubble the event up to the document to trigger the unbind.
|
||||
return;
|
||||
} else {
|
||||
clicked = true;
|
||||
start(e);
|
||||
$(document).on(mousemove, zoom.move);
|
||||
$(document).one('click.zoom',
|
||||
function () {
|
||||
stop();
|
||||
clicked = false;
|
||||
$(document).off(mousemove, zoom.move);
|
||||
}
|
||||
);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
);
|
||||
} else if (settings.on === 'toggle') {
|
||||
$source.on('click.zoom',
|
||||
function (e) {
|
||||
if (clicked) {
|
||||
stop();
|
||||
} else {
|
||||
start(e);
|
||||
}
|
||||
clicked = !clicked;
|
||||
}
|
||||
);
|
||||
} else if (settings.on === 'mouseover') {
|
||||
zoom.init(); // Preemptively call init because IE7 will fire the mousemove handler before the hover handler.
|
||||
|
||||
$source
|
||||
.on('mouseenter.zoom', start)
|
||||
.on('mouseleave.zoom', stop)
|
||||
.on(mousemove, zoom.move);
|
||||
}
|
||||
|
||||
// Touch fallback
|
||||
if (settings.touch) {
|
||||
$source
|
||||
.on('touchstart.zoom', function (e) {
|
||||
e.preventDefault();
|
||||
if (touched) {
|
||||
touched = false;
|
||||
stop();
|
||||
} else {
|
||||
touched = true;
|
||||
start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
|
||||
}
|
||||
})
|
||||
.on('touchmove.zoom', function (e) {
|
||||
e.preventDefault();
|
||||
zoom.move( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
|
||||
})
|
||||
.on('touchend.zoom', function (e) {
|
||||
e.preventDefault();
|
||||
if (touched) {
|
||||
touched = false;
|
||||
stop();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if ($.isFunction(settings.callback)) {
|
||||
settings.callback.call(img);
|
||||
}
|
||||
};
|
||||
|
||||
img.src = settings.url;
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.zoom.defaults = defaults;
|
||||
}(window.jQuery));
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/*!
|
||||
Zoom 1.7.15
|
||||
license: MIT
|
||||
http://www.jacklmoore.com/zoom
|
||||
*/
|
||||
!function(a){var b={url:!1,callback:!1,target:!1,duration:120,on:"mouseover",touch:!0,onZoomIn:!1,onZoomOut:!1,magnify:1};a.zoom=function(b,c,d,e){var f,g,h,i,j,k,l,m=a(b),n=m.css("position"),o=a(c);return m.css("position",/(absolute|fixed)/.test(n)?n:"relative"),m.css("overflow","hidden"),d.style.width=d.style.height="",a(d).addClass("zoomImg").css({position:"absolute",top:0,left:0,opacity:0,width:d.width*e,height:d.height*e,border:"none",maxWidth:"none",maxHeight:"none"}).appendTo(b),{init:function(){g=m.outerWidth(),f=m.outerHeight(),c===m[0]?(i=g,h=f):(i=o.outerWidth(),h=o.outerHeight()),j=(d.width-g)/i,k=(d.height-f)/h,l=o.offset()},move:function(a){var b=a.pageX-l.left,c=a.pageY-l.top;c=Math.max(Math.min(c,h),0),b=Math.max(Math.min(b,i),0),d.style.left=b*-j+"px",d.style.top=c*-k+"px"}}},a.fn.zoom=function(c){return this.each(function(){var d,e=a.extend({},b,c||{}),f=e.target||this,g=this,h=a(g),i=a(f),j=document.createElement("img"),k=a(j),l="mousemove.zoom",m=!1,n=!1;(e.url||(d=h.find("img"),d[0]&&(e.url=d.data("src")||d.attr("src")),e.url))&&(!function(){var a=i.css("position"),b=i.css("overflow");h.one("zoom.destroy",function(){h.off(".zoom"),i.css("position",a),i.css("overflow",b),k.remove()})}(),j.onload=function(){function b(b){d.init(),d.move(b),k.stop().fadeTo(a.support.opacity?e.duration:0,1,!!a.isFunction(e.onZoomIn)&&e.onZoomIn.call(j))}function c(){k.stop().fadeTo(e.duration,0,!!a.isFunction(e.onZoomOut)&&e.onZoomOut.call(j))}var d=a.zoom(f,g,j,e.magnify);"grab"===e.on?h.on("mousedown.zoom",function(e){1===e.which&&(a(document).one("mouseup.zoom",function(){c(),a(document).off(l,d.move)}),b(e),a(document).on(l,d.move),e.preventDefault())}):"click"===e.on?h.on("click.zoom",function(e){return m?void 0:(m=!0,b(e),a(document).on(l,d.move),a(document).one("click.zoom",function(){c(),m=!1,a(document).off(l,d.move)}),!1)}):"toggle"===e.on?h.on("click.zoom",function(a){m?c():b(a),m=!m}):"mouseover"===e.on&&(d.init(),h.on("mouseenter.zoom",b).on("mouseleave.zoom",c).on(l,d.move)),e.touch&&h.on("touchstart.zoom",function(a){a.preventDefault(),n?(n=!1,c()):(n=!0,b(a.originalEvent.touches[0]||a.originalEvent.changedTouches[0]))}).on("touchmove.zoom",function(a){a.preventDefault(),d.move(a.originalEvent.touches[0]||a.originalEvent.changedTouches[0])}).on("touchend.zoom",function(a){a.preventDefault(),n&&(n=!1,c())}),a.isFunction(e.callback)&&e.callback.call(j)},j.src=e.url)})},a.fn.zoom.defaults=b}(window.jQuery);
|
||||
|
|
@ -221,15 +221,6 @@ class WC_Settings_Products extends WC_Settings_Page {
|
|||
'desc_tip' => true,
|
||||
),
|
||||
|
||||
array(
|
||||
'title' => __( 'Product image gallery', 'woocommerce' ),
|
||||
'desc' => __( 'Enable Lightbox for product images', 'woocommerce' ),
|
||||
'id' => 'woocommerce_enable_lightbox',
|
||||
'default' => 'yes',
|
||||
'desc_tip' => __( 'Include WooCommerce\'s lightbox. Product gallery images will open in a lightbox.', 'woocommerce' ),
|
||||
'type' => 'checkbox',
|
||||
),
|
||||
|
||||
array(
|
||||
'type' => 'sectionend',
|
||||
'id' => 'image_options',
|
||||
|
|
|
|||
|
|
@ -152,7 +152,6 @@ class WC_Frontend_Scripts {
|
|||
}
|
||||
|
||||
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
|
||||
$lightbox_en = 'yes' === get_option( 'woocommerce_enable_lightbox' );
|
||||
$ajax_cart_en = 'yes' === get_option( 'woocommerce_enable_ajax_add_to_cart' );
|
||||
$assets_path = str_replace( array( 'http:', 'https:' ), '', WC()->plugin_url() ) . '/assets/';
|
||||
$frontend_script_path = $assets_path . 'js/frontend/';
|
||||
|
|
@ -195,13 +194,33 @@ class WC_Frontend_Scripts {
|
|||
if ( is_lost_password_page() ) {
|
||||
self::enqueue_script( 'wc-lost-password', $frontend_script_path . 'lost-password' . $suffix . '.js', array( 'jquery', 'woocommerce' ) );
|
||||
}
|
||||
if ( $lightbox_en && ( is_product() || ( ! empty( $post->post_content ) && strstr( $post->post_content, '[product_page' ) ) ) ) {
|
||||
self::enqueue_script( 'prettyPhoto', $assets_path . 'js/prettyPhoto/jquery.prettyPhoto' . $suffix . '.js', array( 'jquery' ), '3.1.6', true );
|
||||
self::enqueue_script( 'prettyPhoto-init', $assets_path . 'js/prettyPhoto/jquery.prettyPhoto.init' . $suffix . '.js', array( 'jquery', 'prettyPhoto' ) );
|
||||
self::enqueue_style( 'woocommerce_prettyPhoto_css', $assets_path . 'css/prettyPhoto.css' );
|
||||
|
||||
self::register_script( 'prettyPhoto', $assets_path . 'js/prettyPhoto/jquery.prettyPhoto' . $suffix . '.js', array( 'jquery' ), '3.1.6', true );
|
||||
self::register_script( 'prettyPhoto-init', $assets_path . 'js/prettyPhoto/jquery.prettyPhoto.init' . $suffix . '.js', array( 'jquery','prettyPhoto' ) );
|
||||
self::register_style( 'woocommerce_prettyPhoto_css', $assets_path . 'css/prettyPhoto.css' );
|
||||
|
||||
if ( is_product() || ( ! empty( $post->post_content ) && strstr( $post->post_content, '[product_page' ) ) ) {
|
||||
self::enqueue_script( 'flexslider', $assets_path . 'js/flexslider/jquery.flexslider' . $suffix . '.js', array( 'jquery' ), '2.7.0', true );
|
||||
self::enqueue_script( 'photoswipe', $assets_path . 'js/photoswipe/photoswipe' . $suffix . '.js', '4.1.1', true );
|
||||
self::enqueue_script( 'photoswipe-ui-default', $assets_path . 'js/photoswipe/photoswipe-ui-default' . $suffix . '.js', array( 'photoswipe' ), '4.1.1', true );
|
||||
self::enqueue_style( 'photoswipe', $assets_path . 'css/photoswipe/photoswipe.css' );
|
||||
self::enqueue_style( 'photoswipe-default-skin', $assets_path . 'css/photoswipe/default-skin/default-skin.css' );
|
||||
|
||||
self::enqueue_script( 'zoom', $assets_path . 'js/zoom/jquery.zoom' . $suffix . '.js', array( 'jquery' ), '1.7.15', true );
|
||||
}
|
||||
|
||||
if ( is_product() ) {
|
||||
self::enqueue_script( 'wc-single-product' );
|
||||
$flexslider_options = apply_filters( 'woocommerce_single_product_carousel_options', $options = array(
|
||||
'rtl' => is_rtl(),
|
||||
'animation' => 'slide',
|
||||
'smoothHeight' => true,
|
||||
'directionNav' => false,
|
||||
'controlNav' => 'thumbnails',
|
||||
'slideshow' => false,
|
||||
'animationSpeed' => 500,
|
||||
) );
|
||||
wp_localize_script( 'wc-single-product', 'flexslider_options', $flexslider_options );
|
||||
}
|
||||
if ( 'geolocation_ajax' === get_option( 'woocommerce_default_customer_address' ) ) {
|
||||
// Exclude common bots from geolocation by user agent.
|
||||
|
|
|
|||
|
|
@ -573,17 +573,19 @@ class WC_Product_Variable extends WC_Product {
|
|||
}
|
||||
|
||||
if ( has_post_thumbnail( $variation->get_variation_id() ) ) {
|
||||
$attachment_id = get_post_thumbnail_id( $variation->get_variation_id() );
|
||||
$attachment = wp_get_attachment_image_src( $attachment_id, 'shop_single' );
|
||||
$full_attachment = wp_get_attachment_image_src( $attachment_id, 'full' );
|
||||
$attachment_object = get_post( $attachment_id );
|
||||
$image = $attachment ? current( $attachment ) : '';
|
||||
$image_link = $full_attachment ? current( $full_attachment ) : '';
|
||||
$image_title = get_the_title( $attachment_id );
|
||||
$image_alt = trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );
|
||||
$image_caption = $attachment_object->post_excerpt;
|
||||
$image_srcset = function_exists( 'wp_get_attachment_image_srcset' ) ? wp_get_attachment_image_srcset( $attachment_id, 'shop_single' ) : false;
|
||||
$image_sizes = function_exists( 'wp_get_attachment_image_sizes' ) ? wp_get_attachment_image_sizes( $attachment_id, 'shop_single' ) : false;
|
||||
$attachment_id = get_post_thumbnail_id( $variation->get_variation_id() );
|
||||
$attachment = wp_get_attachment_image_src( $attachment_id, 'shop_single' );
|
||||
$attachment_thumb = wp_get_attachment_image_src( $attachment_id, 'thumbnail' );
|
||||
$full_attachment = wp_get_attachment_image_src( $attachment_id, 'full' );
|
||||
$attachment_object = get_post( $attachment_id );
|
||||
$image = $attachment ? current( $attachment ) : '';
|
||||
$image_thumbnail_src = $attachment_thumb ? current( $attachment_thumb ) : '';
|
||||
$image_link = $full_attachment ? current( $full_attachment ) : '';
|
||||
$image_title = get_the_title( $attachment_id );
|
||||
$image_alt = trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );
|
||||
$image_caption = $attachment_object->post_excerpt;
|
||||
$image_srcset = function_exists( 'wp_get_attachment_image_srcset' ) ? wp_get_attachment_image_srcset( $attachment_id, 'shop_single' ) : false;
|
||||
$image_sizes = function_exists( 'wp_get_attachment_image_sizes' ) ? wp_get_attachment_image_sizes( $attachment_id, 'shop_single' ) : false;
|
||||
|
||||
if ( empty( $image_alt ) ) {
|
||||
$image_alt = $image_title;
|
||||
|
|
@ -605,7 +607,12 @@ class WC_Product_Variable extends WC_Product {
|
|||
'display_regular_price' => $variation->get_display_price( $variation->get_regular_price() ),
|
||||
'attributes' => $variation->get_variation_attributes(),
|
||||
'image_src' => $image,
|
||||
'image_h' => $attachment ? $attachment[1] : '',
|
||||
'image_w' => $attachment ? $attachment[2] : '',
|
||||
'image_thumbnail_src' => $image_thumbnail_src,
|
||||
'image_link' => $image_link,
|
||||
'image_link_h' => $full_attachment ? $full_attachment[1] : '',
|
||||
'image_link_w' => $full_attachment ? $full_attachment[2] : '',
|
||||
'image_title' => $image_title,
|
||||
'image_alt' => $image_alt,
|
||||
'image_caption' => $image_caption,
|
||||
|
|
|
|||
|
|
@ -2464,3 +2464,14 @@ if ( ! function_exists( 'wc_display_item_downloads' ) ) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( ! function_exists( 'woocommerce_photoswipe' ) ) {
|
||||
|
||||
/**
|
||||
* Get the shop sidebar template.
|
||||
*
|
||||
*/
|
||||
function woocommerce_photoswipe() {
|
||||
wc_get_template( 'single-product/photoswipe.php' );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -192,6 +192,11 @@ add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
|
|||
add_filter( 'woocommerce_product_tabs', 'woocommerce_default_product_tabs' );
|
||||
add_filter( 'woocommerce_product_tabs', 'woocommerce_sort_product_tabs', 99 );
|
||||
|
||||
/**
|
||||
* Photoswipe.
|
||||
*/
|
||||
add_action( 'wp_footer', 'woocommerce_photoswipe' );
|
||||
|
||||
/**
|
||||
* Checkout.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -182,6 +182,7 @@ Yes you can! Join in on our [GitHub repository](http://github.com/woocommerce/wo
|
|||
* Made the store notice dismissible.
|
||||
* Improved the zone setup flow.
|
||||
* Made wc_get_wildcard_postcodes return the orignal postcode plus * since wildcards should match empty strings too.
|
||||
* New gallery on single product pages with better mobile support, PhotoSwipe and Zoom.
|
||||
|
||||
[See changelog for all versions](https://raw.githubusercontent.com/woocommerce/woocommerce/master/CHANGELOG.txt).
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
<?php
|
||||
/**
|
||||
* Photoswipe markup
|
||||
*
|
||||
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/photoswipe.php.
|
||||
*
|
||||
* HOWEVER, on occasion WooCommerce will need to update template files and you
|
||||
* (the theme developer) will need to copy the new files to your theme to
|
||||
* maintain compatibility. We try to do this as little as possible, but it does
|
||||
* happen. When this occurs the version of the template file will be bumped and
|
||||
* the readme will list any important changes.
|
||||
*
|
||||
* @see https://docs.woocommerce.com/document/template-structure/
|
||||
* @author WooThemes
|
||||
* @package WooCommerce/Templates
|
||||
* @version 2.7.0
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit; // Exit if accessed directly.
|
||||
}
|
||||
|
||||
if ( ! is_product() ) {
|
||||
return;
|
||||
}
|
||||
?>
|
||||
|
||||
<!-- Root element of PhotoSwipe. Must have class pswp. -->
|
||||
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
|
||||
<!-- Background of PhotoSwipe.
|
||||
It's a separate element as animating opacity is faster than rgba(). -->
|
||||
<div class="pswp__bg"></div>
|
||||
|
||||
<!-- Slides wrapper with overflow:hidden. -->
|
||||
<div class="pswp__scroll-wrap">
|
||||
|
||||
<!-- Container that holds slides.
|
||||
PhotoSwipe keeps only 3 of them in the DOM to save memory.
|
||||
Don't modify these 3 pswp__item elements, data is added later on. -->
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
|
||||
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
|
||||
<div class="pswp__top-bar">
|
||||
|
||||
<!-- Controls are self-explanatory. Order can be changed. -->
|
||||
|
||||
<div class="pswp__counter"></div>
|
||||
|
||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--share" title="Share"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
||||
|
||||
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
|
||||
<!-- element will get class pswp__preloader--active when preloader is running -->
|
||||
<div class="pswp__preloader">
|
||||
<div class="pswp__preloader__icn">
|
||||
<div class="pswp__preloader__cut">
|
||||
<div class="pswp__preloader__donut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||
<div class="pswp__share-tooltip"></div>
|
||||
</div>
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
|
||||
</button>
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
|
||||
</button>
|
||||
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
* @see https://docs.woocommerce.com/document/template-structure/
|
||||
* @author WooThemes
|
||||
* @package WooCommerce/Templates
|
||||
* @version 2.6.3
|
||||
* @version 2.7.0
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
|
|
@ -21,32 +21,29 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
}
|
||||
|
||||
global $post, $product;
|
||||
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
|
||||
$post_thumbnail_id = get_post_thumbnail_id( $post->ID );
|
||||
$full_size_image = wp_get_attachment_image_src( $post_thumbnail_id, 'full' );
|
||||
$thumbnail_post = get_post( $post_thumbnail_id );
|
||||
$image_title = $thumbnail_post->post_content;
|
||||
|
||||
?>
|
||||
<div class="images">
|
||||
<?php
|
||||
<div class="woocommerce-product-gallery <?php echo 'woocommerce-product-gallery--columns-' . sanitize_html_class( $columns ) . ' columns-' . sanitize_html_class( $columns ); ?> images">
|
||||
<figure class="woocommerce-product-gallery__wrapper">
|
||||
<?php
|
||||
$attributes = array(
|
||||
'title' => $image_title,
|
||||
'data-large-image' => $full_size_image[0],
|
||||
'data-large-image-width' => $full_size_image[1],
|
||||
'data-large-image-height' => $full_size_image[2],
|
||||
);
|
||||
if ( has_post_thumbnail() ) {
|
||||
$attachment_count = count( $product->get_gallery_attachment_ids() );
|
||||
$gallery = $attachment_count > 0 ? '[product-gallery]' : '';
|
||||
$props = wc_get_product_attachment_props( get_post_thumbnail_id(), $post );
|
||||
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
|
||||
'title' => $props['title'],
|
||||
'alt' => $props['alt'],
|
||||
) );
|
||||
echo apply_filters(
|
||||
'woocommerce_single_product_image_html',
|
||||
sprintf(
|
||||
'<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto%s">%s</a>',
|
||||
esc_url( $props['url'] ),
|
||||
esc_attr( $props['caption'] ),
|
||||
$gallery,
|
||||
$image
|
||||
),
|
||||
$post->ID
|
||||
);
|
||||
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', '<figure data-thumb="' . get_the_post_thumbnail_url( $post->ID, 'shop_thumbnail' ) . '" class="woocommerce-product-gallery__image">' . get_the_post_thumbnail( $post->ID, 'shop_single', $attributes ) . '</figure>' );
|
||||
} else {
|
||||
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
|
||||
echo sprintf( '<figure class="woocommerce-product-gallery__image--placeholder"><img src="%s" alt="%s" /></figure>', esc_url( wc_placeholder_img_src() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
|
||||
}
|
||||
|
||||
do_action( 'woocommerce_product_thumbnails' );
|
||||
?>
|
||||
?>
|
||||
</figure>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
* @see https://docs.woocommerce.com/document/template-structure/
|
||||
* @author WooThemes
|
||||
* @package WooCommerce/Templates
|
||||
* @version 2.6.3
|
||||
* @version 2.7.0
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
|
|
@ -21,51 +21,24 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
}
|
||||
|
||||
global $post, $product, $woocommerce;
|
||||
|
||||
$attachment_ids = $product->get_gallery_attachment_ids();
|
||||
|
||||
if ( $attachment_ids ) {
|
||||
$loop = 0;
|
||||
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 3 );
|
||||
?>
|
||||
<div class="thumbnails <?php echo 'columns-' . $columns; ?>"><?php
|
||||
foreach ( $attachment_ids as $attachment_id ) {
|
||||
$full_size_image = wp_get_attachment_image_src( $attachment_id, 'full' );
|
||||
$thumbnail = wp_get_attachment_image_src( $attachment_id, 'shop_thumbnail' );
|
||||
$thumbnail_post = get_post( $attachment_id );
|
||||
$image_title = $thumbnail_post->post_content;
|
||||
|
||||
foreach ( $attachment_ids as $attachment_id ) {
|
||||
$attributes = array(
|
||||
'title' => $image_title,
|
||||
'data-large-image' => $full_size_image[0],
|
||||
'data-large-image-width' => $full_size_image[1],
|
||||
'data-large-image-height' => $full_size_image[2],
|
||||
);
|
||||
|
||||
$classes = array( 'zoom' );
|
||||
|
||||
if ( 0 === $loop || 0 === $loop % $columns ) {
|
||||
$classes[] = 'first';
|
||||
}
|
||||
|
||||
if ( 0 === ( $loop + 1 ) % $columns ) {
|
||||
$classes[] = 'last';
|
||||
}
|
||||
|
||||
$image_class = implode( ' ', $classes );
|
||||
$props = wc_get_product_attachment_props( $attachment_id, $post );
|
||||
|
||||
if ( ! $props['url'] ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
echo apply_filters(
|
||||
'woocommerce_single_product_image_thumbnail_html',
|
||||
sprintf(
|
||||
'<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>',
|
||||
esc_url( $props['url'] ),
|
||||
esc_attr( $image_class ),
|
||||
esc_attr( $props['caption'] ),
|
||||
wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $props )
|
||||
),
|
||||
$attachment_id,
|
||||
$post->ID,
|
||||
esc_attr( $image_class )
|
||||
);
|
||||
|
||||
$loop++;
|
||||
}
|
||||
|
||||
?></div>
|
||||
<?php
|
||||
echo '<figure data-thumb="' . esc_url( $thumbnail[0] ) . '" class="woocommerce-product-gallery__image">';
|
||||
echo wp_get_attachment_image( $attachment_id, 'shop_single', false, $attributes );
|
||||
echo '</figure>';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,15 +72,6 @@ class WC_Helper_Settings {
|
|||
),
|
||||
'option_key' => 'woocommerce_shop_page_display',
|
||||
);
|
||||
$settings[] = array(
|
||||
'id' => 'woocommerce_enable_lightbox',
|
||||
'label' => 'Product image gallery',
|
||||
'description' => 'Enable Lightbox for product images',
|
||||
'default' => 'yes',
|
||||
'tip' => 'Product gallery images will open in a lightbox.',
|
||||
'type' => 'checkbox',
|
||||
'option_key' => 'woocommerce_enable_lightbox',
|
||||
);
|
||||
return $settings;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue