html Miva - 产品PhotoSwipe Gallery

Posted 2021-05-11

<link rel="stylesheet" href="/assets/dist/vendor/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/assets/dist/vendor/photoswipe/default-skin/default-skin.min.css">
<script src="/assets/dist/vendor/photoswipe/photoswipe.min.js"></script>
<script src="/assets/dist/vendor/photoswipe/photoswipe-ui-default.min.js"></script>

<div class="main-image-wrapper" style="&mvt:product:customfield_values:customfields:prodbackgroundstylecode;" data-style="&mvt:product:customfield_values:customfields:prodbackgroundstylecode;">
	<img src="resize/exact/670x450/&mvt:product:customfield_values:productimagecustomfields:main;" width="670" height="450" alt="&mvt:product:name;" id="js-main-image" class="img-responsive">
	<a href="#" class="main-image-arrow main-image-arrow--left"><i class="fa fa-2x fa-chevron-left"></i></a>
	<a href="#" class="main-image-arrow main-image-arrow--right"><i class="fa fa-2x fa-chevron-right"></i></a>
	<div class="main-image-hint btn btn-white">Click Image to Zoom <span class="fa fa-search-plus"></span></div>
</div>
<div class="row">
	<mvt:if expr="l.settings:product:customfield_values:customfields:video">
		<div class="col-xs-12 col-sm-10 hidden-xs">
			<div id="js-thumbnails" class="row narrow-gutters"></div>
		</div>
		<div class="col-xs-2 hidden-xs" id="videothumbnail">
			<a href="http://www.youtube.com/watch?v=&mvt:product:customfield_values:customfields:video;" data-video="&mvt:product:customfield_values:customfields:video;" data-icon="&#xe04e;" target="_blank" >
				<img height="50" src="//img.youtube.com/vi/&mvt:product:customfield_values:customfields:video;/0.jpg" alt="&mvt:product:name; Video"/><span></span>
			</a>
		</div>
	<mvt:else>
		<div class="col-xs-12 col-sm-10 hidden-xs">
			<div id="js-thumbnails" class="row narrow-gutters"></div>
		</div>
	</mvt:if>
</div>

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="pswp__bg"></div>
	<div class="pswp__scroll-wrap">
		<div class="pswp__container">
			<div class="pswp__item"></div>
			<div class="pswp__item"></div>
			<div class="pswp__item"></div>
		</div>
		<div class="pswp__ui pswp__ui--hidden">
			<div class="pswp__top-bar">
				<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>
				<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>
<script>
	ImageMachine.prototype.PhotoSwipe = {};
	ImageMachine.prototype.PhotoSwipe_Products = {};
	ImageMachine.prototype.PhotoSwipe.element = document.querySelectorAll('.pswp')[0];
	ImageMachine.prototype.PhotoSwipe.options = {
		index: 0
	};
	ImageMachine.prototype.PhotoSwipe_Update = function(product_code){
		ImageMachine.prototype.PhotoSwipe_Products[product_code].gallery = new PhotoSwipe( ImageMachine.prototype.PhotoSwipe.element, PhotoSwipeUI_Default, ImageMachine.prototype.PhotoSwipe_Products[product_code].images, ImageMachine.prototype.PhotoSwipe.options);
		ImageMachine.prototype.PhotoSwipe_Products[product_code].gallery.listen('afterChange', function(a,b,c) {
			var thumbnailIndex = ImageMachine.prototype.PhotoSwipe_Products[product_code].gallery.getCurrentIndex() + 1;
			$('#js-thumbnails > div:nth-child(' + thumbnailIndex + ')').trigger('click');
		});
		ImageMachine.prototype.PhotoSwipe_Products[product_code].gallery.init();
	};

	ImageMachine.prototype._oninitialize = ImageMachine.prototype.oninitialize;
	ImageMachine.prototype.oninitialize = function() {
		ImageMachine.prototype.PhotoSwipe_Products[this.product_code] = {
			images: [],
			gallery: {}
		};

		ImageMachine.prototype._oninitialize.apply(this, arguments);
	};

	ImageMachine.prototype._onmainimageclick = ImageMachine.prototype.onmainimageclick;
	ImageMachine.prototype.onmainimageclick = function() {
		ImageMachine.prototype.PhotoSwipe_Update(this.product_code);
	};

	ImageMachine.prototype._onthumbnailimageclick = ImageMachine.prototype.onthumbnailimageclick;
	ImageMachine.prototype.onthumbnailimageclick = function(data) {
		var index = $('[src="' + data.image_data[1] + '"]').parent().index();
		ImageMachine.prototype.PhotoSwipe.options.index = index;
		ImageMachine.prototype._onthumbnailimageclick.apply(this, arguments);
	};

	ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function( thumbnail_image, main_image, closeup_image, type_code ) {
		var thumbnail,
			span,
			img;

		thumbnail = document.createElement('div');
		span = document.createElement('span');

		thumbnail.appendChild(span);
		thumbnail.setAttribute('class', 'col-xs-3 col-sm-2');

		ImageMachine.prototype.PhotoSwipe_Products[this.product_code].images.push({
			src: '/mm5/resize/exact/1500x1000/' + closeup_image,
			w: 1500,
			h: 1000
		});

		if (typeof(thumbnail_image) == 'string' && thumbnail_image.length > 0) {
			img = document.createElement('img');
			img.src = thumbnail_image;
			img.setAttribute('class', 'img-responsive thumbnail-image');
			img.setAttribute('style', "&mvt:product:customfield_values:customfields:prodbackgroundstylecode;");
			thumbnail.appendChild(img);
		}

		return thumbnail;
	};
</script>
<div id="js-closeup-container" class="hide">
	<a id="js-closeup-close"><span class="fa fa-times" title="Close"></span></a>
	<img src="graphics/en-US/cssui/blank.gif" alt="&mvt:product:name;" title="&mvt:product:name;" id="js-closeup-image" class="closeup-image" />
</div>

<mvt:item name="product_display_imagemachine" param="body:product:id" />