- Автор темы
- #1
Прошу помочь понять как грамотно подключить скрипт открытия полно-размерного фото jquery.fancybox.pack? Для просмотра ссылки Войди или Зарегистрируйся Сложность в том, что на примере установленного зума (jquery.elevateZoom-3.0.8.min), сценарий для запуска пишется в дополнительном скрипте app.js (код ниже) Для начала нужно отключить зум, и каким то образом вставить сценарий нового скрипта FancyBox. Буду признателен любым подсказкам, как подключить новый скрипт так, чтобы работала галерея и листание.
Сайт на Magento Для просмотра ссылки Войдиили Зарегистрируйся Зум отключил, закомментировав image.elevateZoom();.
А вот так выглядит файл с разметкой, отвечающий за вывод медиа на странице продукта:
Сайт на Magento Для просмотра ссылки Войди
Код:
// PDP - image zoom - needs to be available outside document.ready scope
// ==============================================
var ProductMediaManager = {
IMAGE_ZOOM_THRESHOLD: 20,
imageWrapper: null,
destroyZoom: function() {
$j('.zoomContainer').remove();
$j('.product-image-gallery .gallery-image').removeData('elevateZoom');
},
createZoom: function(image) {
// Destroy since zoom shouldn't be enabled under certain conditions
ProductMediaManager.destroyZoom();
if(
// Don't use zoom on devices where touch has been used
PointerManager.getPointer() == PointerManager.TOUCH_POINTER_TYPE
// Don't use zoom when screen is small, or else zoom window shows outside body
|| Modernizr.mq("screen and (max-width:" + bp.medium + "px)")
) {
return; // zoom not enabled
}
if(image.length <= 0) { //no image found
return;
}
if(image[0].naturalWidth && image[0].naturalHeight) {
var widthDiff = image[0].naturalWidth - image.width() - ProductMediaManager.IMAGE_ZOOM_THRESHOLD;
var heightDiff = image[0].naturalHeight - image.height() - ProductMediaManager.IMAGE_ZOOM_THRESHOLD;
if(widthDiff < 0 && heightDiff < 0) {
//image not big enough
image.parents('.product-image').removeClass('zoom-available');
return;
} else {
image.parents('.product-image').addClass('zoom-available');
}
}
image.elevateZoom();
},
swapImage: function(targetImage) {
targetImage = $j(targetImage);
targetImage.addClass('gallery-image');
ProductMediaManager.destroyZoom();
var imageGallery = $j('.product-image-gallery');
if(targetImage[0].complete) { //image already loaded -- swap immediately
imageGallery.find('.gallery-image').removeClass('visible');
//move target image to correct place, in case it's necessary
imageGallery.append(targetImage);
//reveal new image
targetImage.addClass('visible');
//wire zoom on new image
ProductMediaManager.createZoom(targetImage);
} else { //need to wait for image to load
//add spinner
imageGallery.addClass('loading');
//move target image to correct place, in case it's necessary
imageGallery.append(targetImage);
//wait until image is loaded
imagesLoaded(targetImage, function() {
//remove spinner
imageGallery.removeClass('loading');
//hide old image
imageGallery.find('.gallery-image').removeClass('visible');
//reveal new image
targetImage.addClass('visible');
//wire zoom on new image
ProductMediaManager.createZoom(targetImage);
});
}
},
wireThumbnails: function() {
//trigger image change event on thumbnail click
$j('.product-image-thumbs .thumb-link').click(function(e) {
e.preventDefault();
var jlink = $j(this);
var target = $j('#image-' + jlink.data('image-index'));
ProductMediaManager.swapImage(target);
});
},
initZoom: function() {
ProductMediaManager.createZoom($j(".gallery-image.visible")); //set zoom on first image
},
init: function() {
ProductMediaManager.imageWrapper = $j('.product-img-box');
// Re-initialize zoom on viewport size change since resizing causes problems with zoom and since smaller
// viewport sizes shouldn't have zoom
$j(window).on('delayed-resize', function(e, resizeEvent) {
ProductMediaManager.initZoom();
});
ProductMediaManager.initZoom();
ProductMediaManager.wireThumbnails();
$j(document).trigger('product-media-loaded', ProductMediaManager);
}
};
$j(document).ready(function() {
ProductMediaManager.init();
});А вот так выглядит файл с разметкой, отвечающий за вывод медиа на странице продукта:
Код:
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
<div class="product-image product-image-zoom">
<div class="product-image-gallery">
<img id="image-main"
class="gallery-image visible"
src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" />
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<img id="image-<?php echo $i; ?>"
class="gallery-image"
src="<?php echo $this->getGalleryImageUrl($_image); ?>"
data-zoom-image="<?php echo $this->getGalleryImageUrl($_image); ?>" />
<?php endif; ?>
<?php $i++; endforeach; ?>
</script>
</div>
</div>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<h2><?php /* echo $this->__('More Views') */ ?></h2>
<ul class="product-image-thumbs">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<li>
<a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?php echo $i; ?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</li>
<?php endif; ?>
<?php $i++; endforeach; ?>
</ul>
</div>
<?php endif; ?>
<?php echo $this->getChildHtml('after'); ?>
Последнее редактирование:
