CODEWITHSUNDEEP
phpmagento
el.severo
el.severo

Reputation: 2277

magento replace thumbnail with large image

Can anyone share a quick tip to replace a thumbnail with large image?

Quick snippets of my code from 'media.phtml' looks like:

<p class="product-image">
    <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
        ?>
</p>
<?php endif; ?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <h2><?php echo $this->__('More Views') ?></h2>
    <ul class="cf zoom-gallery"> 
    <?php
    foreach ($this->getGalleryImages() as $_image): ?>
        <li>
            <a class="zoom-thumbnail" style="width:<?php echo $arrMedia ["width"]; ?>px;" class="cloud-zoom-gallery"  href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($arr ["Owidth"], $arr ["Oheight"]); ?>" target="_popUp" data-easyzoom-source="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($arr ["Owidth"], $arr ["Oheight"]); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($arrMedia ["width"], $arrMedia ["height"]); ?>" width="<?php echo $arrMedia ["width"]; ?>" height="<?php echo $arrMedia ["height"]; ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
        </li>
    <?php endforeach; ?>
    </ul>
</div>

Full code is located here

Thanks!

Upvotes: 0

Views: 2055

Answers (2)

JMM
JMM

Reputation: 26827

You mean something like?:

$( ".zoom-thumbnail" ).on( 'click', function ( event ) {

  event.preventDefault();

  $( ".product-image img" ).attr( 'src', event.target.href );

} );

Upvotes: 1

el.severo
el.severo

Reputation: 2277

This link helped me to achieve what I wanted. hope it would help someone.

Solution looks like :

<a class="zoom-thumbnail" style="width:<?php echo $arrMedia ["width"]; ?>px;" class="cloud-zoom-gallery" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>" onclick="$('image').src = this.href; return false;"  title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($arrMedia ["width"], $arrMedia ["height"]); ?>" width="<?php echo $arrMedia ["width"]; ?>" height="<?php echo $arrMedia ["height"]; ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>

Upvotes: 0

Related Questions