私はmagentoでウェブショップを構築しています。製品の詳細ページで、非常に大きな画像をロードする必要がないように、Magento 自体で画像のサイズを変更しています。
画像をクリックすると、画像のライトボックスが開くはずですが、今回は大きくする必要があります。
しかし、私はそれをリサイズしたので、品質は本当に本当に低いです.
私が理解できないように見えることがもう1つあります。また、ホバーしたときにメイン画像として表示される小さな画像もいくつかあります。それらの上にカーソルを合わせると、サイズ変更が機能しなくなります。
誰かが私の間違いを指摘してくれることを願っています:)
これが私のコードです：
画像を取得してサイズ変更するための HTML/PHP コード。
<p class="product-image">
<?php
$_img = '<img id="image1" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(235, 350).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" width="235" height="350 " />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
ホバー時に画像を切り替える Javascript コード。
function imageswitcher(imagename){
jQuery('#image1').attr('src', imagename);
var options = {
zoomrange: [<?php echo Mage::getStoreConfig('featurezoom/zoomrange/start');?>, <?php echo Mage::getStoreConfig('featurezoom/zoomrange/end');?>],
magnifiersize: [<?php echo Mage::getStoreConfig('featurezoom/magnifiersize/height');?>,<?php echo Mage::getStoreConfig('featurezoom/magnifiersize/width');?>],
magnifierpos: '<?php echo Mage::getStoreConfig('featurezoom/general/magnifierpos');?>',
cursorshade: true,
largeimage: imagename //<-- No comma after last option!
}
jQuery('#image1').addimagezoom(options);
}
function doTimer(imageName){
myTimer=setTimeout(function(){
imageswitcher(imagename);
}, 2000);
}
Event.observe(window, 'load', function() {
jQuery('#image1').addimagezoom({
zoomrange: [<?php echo Mage::getStoreConfig('featurezoom/zoomrange/start');?>, <?php echo Mage::getStoreConfig('featurezoom/zoomrange/end');?>],
magnifiersize: [<?php echo Mage::getStoreConfig('featurezoom/magnifiersize/height');?>,<?php echo Mage::getStoreConfig('featurezoom/magnifiersize/width');?>],
magnifierpos: '<?php echo Mage::getStoreConfig('featurezoom/general/magnifierpos');?>',
cursorshade: true,
largeimage: '<?php echo $this->helper('catalog/image')->init($_product, 'image');?>' //<-- No comma after last option!
})
});
ポジショニングを開いてライトボックスを閉じるための jQuery コード。
(function(window, $, undefined) {
jQuery(function() {
/*$(window).on('click', function(e) {
console.log(e.target);
//e.preventDefault();
});*/
$('.zoomtracker').on('click', function(e) {
removeLightbox();
$('body').css('overflow-y', 'hidden'); // hide scrollbars!
$('<div id="overlay"></div>')
.css('top', $(document).scrollTop())
.css('opacity', '0')
.appendTo('body');
$('<div id="lightbox"></div>')
.hide()
.appendTo('body');
var img = new Image();
img.onload = function() {
var width = img.width,
height = img.height;
$('<img id="lightboxImage" />')
.attr('width', '235')
.attr('src', img.src)
.load(function() {
positionLightboxImage(e);
})
.click(function() {
removeLightbox();
})
.appendTo('#lightbox');
};
img.src = $('#image2').attr('src');
$('#overlay').click(function(e){
})
/*var height = $('<img />').attr('width', .width());
alert(height);
$('<img />')
.attr('src', $(this).attr('href'))
.load(function() {
positionLightboxImage(e);
})
.click(function() {
removeLightbox();
})
.appendTo('#lightbox');
return false;*/
e.preventDefault();
});
});
function positionLightboxImage(e) {
var top = 173;
var left = 271;
/* In plaats van de img width en height de hoogte en breedte van het scherm berekenen en aan de hand heirvan het centrum bepalen. */
$('#lightbox')
.css({
'top': top,
'left': left
})
.fadeIn(500)
.animate({'width': '640','left': '50%', 'margin-left': -($('#lightbox').width()/2), 'top': '19%', 'margin-top': -($('#lightbox').height()/2)}, {queue: false}, 8000);
$('#lightboxImage')
.animate({'width': '550','height': '930'}, {queue: false}, 8000)
}
function removeLightbox() {
$('#overlay, #lightbox')
.fadeOut(500, function() {
$(this).remove();
$('body').css('overflow-y', 'auto'); // show scrollbars!
})
.animate({'width': '235','left': '-72', 'margin-left': ($('#lightbox').width()/2), 'top': '-295', 'margin-top': ($('#lightbox').height()/2)}, {queue: false}, 8000);
$('#lightboxImage')
.animate({'width': '235', 'height': '350'}, {queue: false}, 8000)
}
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
})(window, jQuery);