How to open an image in the same product page of Magento

Posted on March 20th, 2013 | Posted by admin

How to open an image in the same product page of Magento
No popup window with the image nor the single image alone in the same page.

If you want to replace the large image with the image displayed in the thumbnail when these are clicked, here are the steps to do it:

  1. Edit the file media.phtml that you will find in app/design/frontend/[YOUR TEMPLATE]/default/template/catalog/product/view/
  2. In the final line add a new one and copy/paste the following code:
    81 <script type="text/javascript">
    82 function imageReplace(newimageURL){
    83 document.getElementById("pimage").setAttribute('src', newimageURL);
    84 document.getElementById("pimage").style.width = '100%';
    85 }
    86 </script>
  3. Approximately, on line 62 you will find the following code:

Helpful image library functions in magento

Posted on September 19th, 2012 | Posted by admin

Magento Wraps PHP Image Library Functions in its library with its own wrapper functions. Magento Provides the general adapter for image manipulation. This gives us the flexibility to use any PHP libraries like GD2, imagemagik etc.

Some of the common wrapper functions are

  1. crop
  2. resize
  3. rotate

You can make use of these functions in your custom code. To Utilise these functions we need to create an object of type Varien_Image with image name along with the path.

How to display Image Preview in Admin Form magento

Posted on January 28th, 2012 | Posted by admin

Magento allows us to create custom form in admin panel by creating our own custom module. We can create almost any field in the admin form by creating a class that extends the base class Mage_Adminhtml_Block_Widget_Form. The _prepareForm method allows to define our form elements.
Sometimes we may need to upload a file in the adminform, the default file field doesn’t provide the image preview when we upload an image file. For this purpose we need to use image field type as shown in the below snippet

$fieldset->addField('filename', 'image', array(
'label' => Mage::helper('customform')->__('Image'),
'required' => false,
'name' => 'filename',

Product Image Preview, quick view image module in magento

Posted on June 10th, 2011 | Posted by admin

This extension will install a wonderful and ready-to-use product image preview widget in your Magento store. This is an impressive script that allows your visitors to conveniently zoom out an product image that they want to view. Installation is very easy via FTP and no coding experience is required to have module up-and-running.

  1. Allow customers zoom out product images they want to view
  2. Allow admin to configure the following parameters: Image Preview size, Border Image Preview, Border Color for Image Preview, Text Image Preview, Text color

How To Create CSS Image Buttons In Your Magento Themes

Posted on May 24th, 2011 | Posted by admin

Many developers and store owners don’t like to use images as buttons simply because they do not wish their users to wait until the images load. Image buttons gives the flexibility to display images as per store’s requirement but these days lots and lots of stores are opting to create CSS image buttons rather than image buttons. With a very little tweak you can get rid of image buttons in your theme and switch to CSS buttons. If you are willing to change your image buttons to CSS powered buttons then follow the steps given below:

Take a nice background image which is blank and nothing written on it. We will use this background image to generate text over it. Basically, if you follow CSS buttons you don’t have to create separate images for each button. Download the background image given below for an example (you can create your own image background).

Page 1 of 212»