This module will display a larger product image when moused over to create a magnifying effect. Please read and follow the instructions carefully below for use on an installation of Magento 1.4.x
Important Note: If you are asked to edit an app file that is not included in your template, go to /app/design/frontend/base/default/ and locate the necessary files, copy the files into the appropriate directory in your template folder, and then continue editing.
Also, the code you are asked to "find" is taken from default Magento templates and may not match your template exactly if the code has been customized. If you find code in your template that matches 90%, that's probably what you're looking for.
Upload Product Pop-up Preview Extension\js\popup-preview.js to /skin/frontend/default/yourskin/js/
Upload Product Pop-up Preview Extension\images\loading.gif to /skin/frontend/default/yourskin/images/
Open: /skin/frontend/default/yourskin/css/styles.css (if you don't have styles.css, open your primary CSS)
Add this code at the very bottom:
/* Preview CSS */
#loading-mask { color:#232323; font-size:1.1em; font-weight:bold; position:absolute; text-align:center;
z-index:9999; }
#loading-mask .loader { background:#FFF none repeat scroll 0 0; border:1px solid #232323; color:#232323;
font-weight:bold; left:50%; margin-left:-60px; padding:15px 60px; position:fixed; text-align:center;
top:45%; width:120px; z-index:9999; }
#wt-mask { background-attachment:scroll; background-color:#000000; background-image:none;
background-position:0 0; background-repeat:repeat; display:none; height:100%; left:0;
position:absolute; top:0; width:100%; z-index:9999; -moz-opacity: 0.1; opacity:.10; filter:
alpha(opacity=10); }
.poptop { z-index: 9999; }
#wtPreview { padding: 10px; background: #fff; border: 1px solid #d1d1d1; }
#wtPreviewBody {position:relative;background:#fff url(../images/loading.gif) center center no-repeat;}
#wtPreview h2 { color: #000; width: 300px; text-align: left; }
Open: /app/design/frontend/default/yourskin/layout/page.xml
Find & Add
Find:
<action method="addCss"><stylesheet>css/widgets.css</stylesheet></action> <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
Above Add:
<action method="addItem"><type>skin_js</type><name>js/popup-preview.js</name></action>
Add PHP & Javascript to Grid View
Open: /app/design/frontend/default/yourskin/template/catalog/product/list.phtml
Find:
<?php // Grid Mode ?> <?php $_collectionSize = $_productCollection->count() ?> <?php $_columnCount = $this->getColumnCount(); ?> <?php $i=0; foreach ($_productCollection as $_product): ?> <?php if ($i++%$_columnCount==0): ?> <ul class="products-grid"> <?php endif ?> <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
After Add:
<?php
$strImagePath = '';
$wtImageSize = '';
$wtProdouct = Mage::getModel('catalog/product')->load($_product->getId());
$wtProductImages = $wtProdouct->getMediaGalleryImages();
// Loop through all of the images of the current product.
foreach($wtProductImages as $wtImage) {
// If we found one with the label of 'popup', thats the one we want.
if($wtImage->getLabel() == 'popup') {
// Get the image and resize it.
$strImagePath = '/media/catalog/product' . $wtImage->getFile();
$wtImageSize = getimagesize($_SERVER['DOCUMENT_ROOT'] . $strImagePath);
}} ?>
Find:
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>Add To <img>:
id="wt-popup-<?php echo $_product->getId() ?>"
After </a> Add:
<?php if(!empty($strImagePath)) { ?>
<script defer="defer" type="text/javascript">WT.showPreview("<?php echo $this->htmlEscape($_product->getName()) ?>"
, "<?php echo($strImagePath); ?>", "wt-popup-<?php echo $_product->getId() ?>", <?php echo $wtImageSize[0] ?>,
<?php echo $wtImageSize[1] ?>);</script><?php } ?>Add PHP & Javascript to List View
Open: /app/design/frontend/default/yourskin/template/catalog/product/list.phtml
Find:
<?php // List mode ?> <?php if($this->getMode()!='grid'): ?> <?php $_iterator = 0; ?> <ol class="products-list" id="products-list"> <?php foreach ($_productCollection as $_product): ?> <li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>"> <?php // Product Image ?>
After Add:
<?php
$strImagePath = '';
$wtImageSize = '';
$wtProdouct = Mage::getModel('catalog/product')->load($_product->getId());
$wtProductImages = $wtProdouct->getMediaGalleryImages();
// Loop through all of the images of the current product.
foreach($wtProductImages as $wtImage) {
// If we found one with the label of 'popup', thats the one we want.
if($wtImage->getLabel() == 'popup') {
// Get the image and resize it.
$strImagePath = '/media/catalog/product' . $wtImage->getFile();
$wtImageSize = getimagesize($_SERVER['DOCUMENT_ROOT'] . $strImagePath);
}} ?>
Find:
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>Add To <img>:
id="wt-popup-<?php echo $_product->getId() ?>"
After </a> Add:
<?php if(!empty($strImagePath)) { ?>
<script defer="defer" type="text/javascript">WT.showPreview("<?php echo $this->htmlEscape($_product->getName()) ?>"
, "<?php echo($strImagePath); ?>", "wt-popup-<?php echo $_product->getId() ?>", <?php echo $wtImageSize[0] ?>,
<?php echo $wtImageSize[1] ?>);</script><?php } ?>Add PHP to Image Gallery
Open: /app/design/frontend/default/yourskin/template/catalog/product/view/media.phtml
Find: (near the bottom)
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
</li>
<?php endforeach; ?>Before <li> Add:
<?php if(($_image->getLabel() != 'popup')) { ?>After </li> Add:
<?php } ?>
Login to Admin Panel.
Catalog > Manage Products
Choose a product.
Click 'Images' on the left side.
Click on 'Browse Files...' and upload the 'preview image' you want displayed during mouse-over.
After you upload it, type 'popup' for label. Leave Thumbnail, Small Images, and Base Image checkboxes blank.
Save your product.
Go to System > Cache Management
For All Cache drop-down, select 'Refresh.' Enable everything from Configuration to Web Services Configuration.
When you're finished, click on "Save cache settings."
Congratulations, you're finished installing.