In my previous article to resize image in Magento, I had written direct code to resize any image. Here, I will be writing a simple function to resize image proportionally, which can be kept in the helper file of the module (as helper file can be accessed by any template (.phtml) file). Here is the … Read more
In adminhtml, you might have the following code in any form. Here ‘logo‘ is the name of the input type file. Or, you may have any HTML Form with the File field in the frontend page. Remember that your form’s enctype should be multipart/form-data. $fieldset->addField('logo', 'file', array( 'label' => 'Small Logo', 'required' => false, 'name' … Read more
Here, I will show you how to preview Image with grey out background effect. I mean, you will be able to preview large image when you click the thumbnail image. The background of the page will be greyed and the image will be displayed as popup. View Demo || Download Code The following code will … Read more
Here, I will show you how to preview Image with Zoom effect. I mean, you will be able to preview large image when you hover the thumbnail image. The image is zoomed when hovered. View Demo || Download Code As you can see below, I have kept the large image link in the alt tag. … Read more
Here, I will show you how to preview Image as a tooltip effect. I mean, you will be able to preview large image when you hover the thumbnail image. The preview is shown as tooltip is shown generally. View Demo || Download Code As you can see in the js code, I have positioned the … Read more
I have created a bit of image animation with the Transfer effect of jQuery UI. By animation, I just mean fade in and out. But the transfer effect makes it so beautiful :). The Transfer effect can be used with effect() method. This Transfers the outline of an element to another element. Very useful when … Read more
I have made a very simple jQuery slideshow. When you click the play button, then the images changes with fade in and fade out effect. View Demo || Download Code I have used animate() jQuery function for fade in and out. queue() and dequeue() functions along with setTimeout() function are used to set time interval … Read more
In this article, I will be showing you how you can replace string, div content, and image src value with jQuery. You can do this by replace() function in jQuery. View Demo || Download Code Here is the code to replace string. This will replace the ‘smile’ text with ‘be happy’. var oldText = "Save … Read more
In my previous post on getting height and width of image , I have written focusing on product image, i.e. getting height and width of product image. In this case, I will be showing you how to get height and width of any image in Magento. The image need not to be product image. You … Read more