woocommerce/assets/js/frontend/single-product.js

347 lines
10 KiB
JavaScript
Raw Normal View History

2016-12-05 18:34:30 +00:00
/*global wc_single_product_params, PhotoSwipe, PhotoSwipeUI_Default */
jQuery( function( $ ) {
2012-12-10 13:11:05 +00:00
2017-03-14 15:48:18 +00:00
// wc_single_product_params is required to continue.
if ( typeof wc_single_product_params === 'undefined' ) {
return false;
}
$( 'body' )
2017-03-14 15:48:18 +00:00
// Tabs
.on( 'init', '.wc-tabs-wrapper, .woocommerce-tabs', function() {
$( this ).find( '.wc-tab, .woocommerce-tabs .panel:not(.panel .panel)' ).hide();
var hash = window.location.hash;
var url = window.location.href;
2015-07-10 05:13:30 +00:00
var $tabs = $( this ).find( '.wc-tabs, ul.tabs' ).first();
2016-04-15 17:25:16 +00:00
if ( hash.toLowerCase().indexOf( 'comment-' ) >= 0 || hash === '#reviews' || hash === '#tab-reviews' ) {
2015-07-10 05:13:30 +00:00
$tabs.find( 'li.reviews_tab a' ).click();
} else if ( url.indexOf( 'comment-page-' ) > 0 || url.indexOf( 'cpage=' ) > 0 ) {
$tabs.find( 'li.reviews_tab a' ).click();
} else if ( hash === '#tab-additional_information' ) {
$tabs.find( 'li.additional_information_tab a' ).click();
} else {
2015-07-10 05:13:30 +00:00
$tabs.find( 'li:first a' ).click();
}
} )
.on( 'click', '.wc-tabs li a, ul.tabs li a', function( e ) {
e.preventDefault();
var $tab = $( this );
var $tabs_wrapper = $tab.closest( '.wc-tabs-wrapper, .woocommerce-tabs' );
var $tabs = $tabs_wrapper.find( '.wc-tabs, ul.tabs' );
2015-07-10 05:13:30 +00:00
$tabs.find( 'li' ).removeClass( 'active' );
$tabs_wrapper.find( '.wc-tab, .panel:not(.panel .panel)' ).hide();
2015-07-10 05:13:30 +00:00
$tab.closest( 'li' ).addClass( 'active' );
$tabs_wrapper.find( $tab.attr( 'href' ) ).show();
} )
// Review link
.on( 'click', 'a.woocommerce-review-link', function() {
$( '.reviews_tab a' ).click();
return true;
} )
// Star ratings for comments
.on( 'init', '#rating', function() {
2019-02-20 16:37:40 +00:00
$( '#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 $star = $( this ),
$rating = $( this ).closest( '#respond' ).find( '#rating' ),
$container = $( this ).closest( '.stars' );
2012-12-10 13:11:05 +00:00
2013-02-11 15:37:26 +00:00
$rating.val( $star.text() );
$star.siblings( 'a' ).removeClass( 'active' );
$star.addClass( 'active' );
$container.addClass( 'selected' );
2012-12-10 13:11:05 +00:00
return false;
} )
.on( 'click', '#respond #submit', function() {
var $rating = $( this ).closest( '#respond' ).find( '#rating' ),
rating = $rating.val();
2016-03-01 13:08:25 +00:00
if ( $rating.length > 0 && ! rating && wc_single_product_params.review_rating_required === 'yes' ) {
2015-07-10 05:13:30 +00:00
window.alert( wc_single_product_params.i18n_required_rating_text );
2013-02-11 15:37:26 +00:00
return false;
}
} );
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
2016-10-13 14:25:42 +00:00
2017-03-14 15:48:18 +00:00
// Init Tabs and Star Ratings
$( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' );
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
2016-10-13 14:25:42 +00:00
/**
* Product gallery class.
*/
2017-03-14 15:48:18 +00:00
var ProductGallery = function( $target, args ) {
this.$target = $target;
this.$images = $( '.woocommerce-product-gallery__image', $target );
2017-03-14 10:55:25 +00:00
// No images? Abort.
if ( 0 === this.$images.length ) {
this.$target.css( 'opacity', 1 );
return;
}
2017-03-14 10:55:25 +00:00
// Make this object available.
2017-03-14 15:48:18 +00:00
$target.data( 'product_gallery', this );
2017-03-14 10:55:25 +00:00
// Pick functionality to initialize...
this.flexslider_enabled = $.isFunction( $.fn.flexslider ) && wc_single_product_params.flexslider_enabled;
this.zoom_enabled = $.isFunction( $.fn.zoom ) && wc_single_product_params.zoom_enabled;
this.photoswipe_enabled = typeof PhotoSwipe !== 'undefined' && wc_single_product_params.photoswipe_enabled;
// ...also taking args into account.
if ( args ) {
2017-04-12 12:06:16 +00:00
this.flexslider_enabled = false === args.flexslider_enabled ? false : this.flexslider_enabled;
2017-03-14 10:55:25 +00:00
this.zoom_enabled = false === args.zoom_enabled ? false : this.zoom_enabled;
this.photoswipe_enabled = false === args.photoswipe_enabled ? false : this.photoswipe_enabled;
}
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
2016-10-13 14:25:42 +00:00
// ...and what is in the gallery.
if ( 1 === this.$images.length ) {
this.flexslider_enabled = false;
}
2017-03-14 15:48:18 +00:00
// Bind functions to this.
this.initFlexslider = this.initFlexslider.bind( this );
this.initZoom = this.initZoom.bind( this );
this.initZoomForTarget = this.initZoomForTarget.bind( this );
2017-03-14 15:48:18 +00:00
this.initPhotoswipe = this.initPhotoswipe.bind( this );
this.onResetSlidePosition = this.onResetSlidePosition.bind( this );
this.getGalleryItems = this.getGalleryItems.bind( this );
this.openPhotoswipe = this.openPhotoswipe.bind( this );
if ( this.flexslider_enabled ) {
this.initFlexslider( args.flexslider );
2017-03-14 15:48:18 +00:00
$target.on( 'woocommerce_gallery_reset_slide_position', this.onResetSlidePosition );
} else {
this.$target.css( 'opacity', 1 );
2017-03-14 15:48:18 +00:00
}
2017-01-27 15:35:29 +00:00
2017-03-14 15:48:18 +00:00
if ( this.zoom_enabled ) {
this.initZoom();
$target.on( 'woocommerce_gallery_init_zoom', this.initZoom );
}
2017-03-14 15:48:18 +00:00
if ( this.photoswipe_enabled ) {
this.initPhotoswipe();
}
};
2017-01-27 15:35:29 +00:00
2017-03-14 15:48:18 +00:00
/**
* Initialize flexSlider.
*/
ProductGallery.prototype.initFlexslider = function( args ) {
var $target = this.$target,
gallery = this;
2017-03-14 15:48:18 +00:00
var options = $.extend( {
selector: '.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image',
2017-03-14 15:48:18 +00:00
start: function() {
$target.css( 'opacity', 1 );
},
after: function( slider ) {
gallery.initZoomForTarget( gallery.$images.eq( slider.currentSlide ) );
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
2016-10-13 14:25:42 +00:00
}
}, args );
$target.flexslider( options );
// Trigger resize after main image loads to ensure correct gallery size.
$( '.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:eq(0) .wp-post-image' ).one( 'load', function() {
var $image = $( this );
if ( $image ) {
2017-07-04 17:09:16 +00:00
setTimeout( function() {
var setHeight = $image.closest( '.woocommerce-product-gallery__image' ).height();
var $viewport = $image.closest( '.flex-viewport' );
if ( setHeight && $viewport ) {
$viewport.height( setHeight );
}
}, 100 );
}
} ).each( function() {
if ( this.complete ) {
$( this ).trigger( 'load' );
}
} );
2017-03-14 15:48:18 +00:00
};
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
2016-10-13 14:25:42 +00:00
2017-03-14 15:48:18 +00:00
/**
* Init zoom.
*/
ProductGallery.prototype.initZoom = function() {
this.initZoomForTarget( this.$images.first() );
};
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
2016-10-13 14:25:42 +00:00
/**
* Init zoom.
*/
ProductGallery.prototype.initZoomForTarget = function( zoomTarget ) {
if ( ! this.zoom_enabled ) {
return false;
}
var galleryWidth = this.$target.width(),
zoomEnabled = false;
2017-03-14 15:48:18 +00:00
$( zoomTarget ).each( function( index, target ) {
var image = $( target ).find( 'img' );
if ( image.data( 'large_image_width' ) > galleryWidth ) {
2017-03-14 15:48:18 +00:00
zoomEnabled = true;
return false;
2017-01-27 15:35:29 +00:00
}
2017-03-14 15:48:18 +00:00
} );
2017-03-14 10:55:25 +00:00
2017-03-14 15:48:18 +00:00
// But only zoom if the img is larger than its container.
if ( zoomEnabled ) {
2018-01-09 15:44:54 +00:00
var zoom_options = $.extend( {
2017-03-14 15:48:18 +00:00
touch: false
2018-01-09 15:44:54 +00:00
}, wc_single_product_params.zoom_options );
2018-05-08 13:48:25 +00:00
if ( 'ontouchstart' in document.documentElement ) {
zoom_options.on = 'click';
}
zoomTarget.trigger( 'zoom.destroy' );
zoomTarget.zoom( zoom_options );
2019-02-20 17:22:43 +00:00
setTimeout( function() {
if ( zoomTarget.find(':hover').length ) {
zoomTarget.trigger( 'mouseover' );
}
}, 100 );
2017-03-14 15:48:18 +00:00
}
};
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
2016-10-13 14:25:42 +00:00
2017-03-14 15:48:18 +00:00
/**
* Init PhotoSwipe.
*/
ProductGallery.prototype.initPhotoswipe = function() {
if ( this.zoom_enabled && this.$images.length > 0 ) {
this.$target.prepend( '<a href="#" class="woocommerce-product-gallery__trigger">🔍</a>' );
this.$target.on( 'click', '.woocommerce-product-gallery__trigger', this.openPhotoswipe );
2018-05-08 13:48:25 +00:00
this.$target.on( 'click', '.woocommerce-product-gallery__image a', function( e ) {
e.preventDefault();
});
// If flexslider is disabled, gallery images also need to trigger photoswipe on click.
if ( ! this.flexslider_enabled ) {
this.$target.on( 'click', '.woocommerce-product-gallery__image a', this.openPhotoswipe );
}
2018-05-08 13:48:25 +00:00
} else {
this.$target.on( 'click', '.woocommerce-product-gallery__image a', this.openPhotoswipe );
2017-03-14 15:48:18 +00:00
}
};
2017-03-14 15:48:18 +00:00
/**
* Reset slide position to 0.
*/
ProductGallery.prototype.onResetSlidePosition = function() {
this.$target.flexslider( 0 );
};
2017-03-14 13:04:08 +00:00
2017-03-14 15:48:18 +00:00
/**
* Get product gallery image items.
*/
ProductGallery.prototype.getGalleryItems = function() {
var $slides = this.$images,
items = [];
if ( $slides.length > 0 ) {
$slides.each( function( i, el ) {
var img = $( el ).find( 'img' );
if ( img.length ) {
var 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' ),
alt = img.attr( 'alt' ),
item = {
alt : alt,
src : large_image_src,
w : large_image_w,
h : large_image_h,
title: img.attr( 'data-caption' ) ? img.attr( 'data-caption' ) : img.attr( 'title' )
};
items.push( item );
}
2017-03-14 15:48:18 +00:00
} );
}
2017-03-14 15:48:18 +00:00
return items;
};
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
2016-10-13 14:25:42 +00:00
2017-03-14 15:48:18 +00:00
/**
* Open photoswipe modal.
*/
ProductGallery.prototype.openPhotoswipe = function( e ) {
e.preventDefault();
var pswpElement = $( '.pswp' )[0],
items = this.getGalleryItems(),
eventTarget = $( e.target ),
clicked;
2017-10-18 00:26:08 +00:00
if ( eventTarget.is( '.woocommerce-product-gallery__trigger' ) || eventTarget.is( '.woocommerce-product-gallery__trigger img' ) ) {
2017-03-14 15:48:18 +00:00
clicked = this.$target.find( '.flex-active-slide' );
2017-10-18 00:26:08 +00:00
} else {
clicked = eventTarget.closest( '.woocommerce-product-gallery__image' );
2017-03-14 15:48:18 +00:00
}
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
2016-10-13 14:25:42 +00:00
2017-04-14 16:34:05 +00:00
var options = $.extend( {
2019-04-10 13:38:36 +00:00
index: $( clicked ).index(),
2019-04-16 13:36:37 +00:00
addCaptionHTMLFn: function( item, captionEl ) {
2019-04-10 13:38:36 +00:00
if ( ! item.title ) {
captionEl.children[0].textContent = '';
return false;
}
captionEl.children[0].textContent = item.title;
return true;
}
2017-04-14 16:34:05 +00:00
}, wc_single_product_params.photoswipe_options );
2017-03-14 15:48:18 +00:00
// Initializes and opens PhotoSwipe.
var photoswipe = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options );
photoswipe.init();
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
2016-10-13 14:25:42 +00:00
};
/**
* Function to call wc_product_gallery on jquery selector.
*/
2017-03-14 10:55:25 +00:00
$.fn.wc_product_gallery = function( args ) {
new ProductGallery( this, args || wc_single_product_params );
return this;
};
/*
* Initialize all galleries on page.
*/
2017-03-14 16:38:04 +00:00
$( '.woocommerce-product-gallery' ).each( function() {
2019-02-20 16:37:40 +00:00
$( this ).trigger( 'wc-product-gallery-before-init', [ this, wc_single_product_params ] );
2019-02-20 16:37:40 +00:00
$( this ).wc_product_gallery( wc_single_product_params );
2019-02-20 16:37:40 +00:00
$( this ).trigger( 'wc-product-gallery-after-init', [ this, wc_single_product_params ] );
2019-02-20 16:37:40 +00:00
2017-03-14 16:38:04 +00:00
} );
} );