Showing posts with label Color Image Swicher in Magento. Show all posts
Showing posts with label Color Image Swicher in Magento. Show all posts

Monday, 25 May 2015

Color Image Swicher in Magento

Hello Friends,

One site i see that when click on image icon in then change image color.
i am searching that any extension  in magneto but mostlly find paid.

then i am try to make simple image swicher or color swicher in magneto.

Check it my code that can help it.


GoTo Admin->manageproduct->addnewproduct(or edit product).

Check Below image we can create custom option in product. here check image for it.

Step1 :  Create custom option


color swicher


Step2: Add Image and also give the label to images

color swicher


After your current theme header.phtml file.

add this script in this your header.phtml

<script type="text/javascript">
jQuery(document).ready(function() {
   

   
    jQuery("#select_3").change(function() {
    var optionValueText = jQuery.trim(jQuery('#select_3 :selected').text());
    if(optionValueText != "-- Please Select --")
    {
        alert("#image" + optionValueText);
        var image = "image" + optionValueText;
        jQuery("."+image+".cloud-zoom-gallery").trigger('click');
        jQuery("#image" + optionValueText).show();
    }
    });

});
</script>

in this script comment alert. 

also check id of selectbox

image swicher


I am added Moo_Cloudzoom Extention for so you can added it.

Here it's Media.phtml file it path is in template\moo\catalog\product\view\

Here replace  this code.

foreach ($galleryImages as $_image) {
        $id =  $this->htmlEscape($_image->getLabel());
        $gallery .= '<a id="cloud-zoom-gallery' . $i . ' " href="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()) . '" '
                . 'rel="useZoom: \'cloudZoom\', smallImage: \'' . $this->getCloudImage($this->getProduct(), $_image) . '\'" class="cloud-zoom-gallery image'.$id.'" title="' . $this->htmlEscape($_image->getLabel()) . '">'
                . '<img src="' . $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56) . '" width="56" height="56" alt="' . $this->htmlEscape($_image->getLabel()) . '"  />'
                . '</a>';
    }

In this i am added on $id. here I am getting image label. this is added in class in a tag.

i am making with back color. this code added in your media.phtml file. check it
the output.

I am adding after addind code you can change selectbox color value you can change color of image