Тогда стилями. Меняете только одну строку в коде Мадженто:
<img id="image-main" class="gallery-image visible"...<img id="image-main" class="fancybox" rel="group"...<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>Сейчас зум работает потому, что обновил файл и раскомметировал строку "image.elevateZoom();" Галерея выводится файлом media.phtml (второй кусок кода в первом сообщении) и ещё судя по скрипту обработчику app.js (первый кусок кода) что-то с ней делает. И там же подключены функции зума.
Скажите, пожалуйста, что в таком случае произойдет со всем, что написано в обработчике, ведь там как раз таки прописаны эти самые классы.
Из того, что я вижу на текущий момент... Я думаю, что не будет работать зум на большой картинке, а по клику фэнсибокс должен ее развернуть в исходном (большом) формате.
image.click(function(e) {
var ez = image.data('elevateZoom');
$.fancybox(ez.getGalleryList()); return false;
});А это для чего, скажите, пожалуйста? Дело в том, что на стилях так прямо сделать я сразу мог, меня смутил обработчик, и хотелось бы грамотно внедрить функцию, не оставляя хвостов. Смущает, что изменением стилей оборвется всё, что в обработчике прописано. Грязновато как-то...:-( Хотелось бы понять как правильнее это сделать.
Уже так делал, сейчас снова вставлю, чтобы наглядно было какие там ошибки происходят.
Вроде бы нашел решение. Чтобы все работало: и то, и другое. Уже правленный код.
// 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 .fancybox').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('fancybox');
ProductMediaManager.destroyZoom();
var imageGallery = $j('.product-image-gallery');
if(targetImage[0].complete) { //image already loaded -- swap immediately
imageGallery.find('.fancybox').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('.fancybox').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(".fancybox.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="fancybox 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="fancybox"
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'); ?>О да, вроде как раз то, что нужно!!! Поделитесь, пожалуйста, ссылкой на источник, там возможно указаны правки и в media.phtml Возможно там нужно скорректировать классы и добавить класс .fancybox