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

Step2: Add Image and also give the label to images

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

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

Remove Image Title In Wordpress

Hello All,

Some Time you have requirement to remove image title in wordpress site.
but you added lots of image and also if you can change manully then it so
long work.

when yon remove image title  content. you can use this code and check it.

it's only change when you added image in wordpress editor. but when you can
create plugin on use any plugin in when added image title that can not remove that.
there you can use simple Jquery

Use  AnD Remove Image Title In Content Filter check below code.

This code added in you current theme functions.php also you can create plguin for it

add_filter('the_content', 'remove_images_titles');
function remove_images_titles($text) {

    // Get all title="..." tags from the html.
    $result = array();
    preg_match_all('|title="[^"]*"|U', $text, $result);

    // Replace all occurances with an empty string.
    foreach($result[0] as $img_tag) {
        $text = str_replace($img_tag, '', $text);
    }

    return $text;
}

But you can remove image title in all wordpress site follow simple jquery and 

check result

jQuery(document).ready(function($) {
$("img").removeAttr("title");
}

this code added in your header.php after added all script in wrdpress.

refresh your site check it using firebug it can be remove image title.

please tell me this can be helpfull or not? comment Please?

Parallax Scroll and Back to Top Using Jquery

Parallax Scroll and Back to Top Using Jquery

Hello

Here you can create parallax scroll and back to top using jquery.

just you can add jquery in your html 

download https://jquery.com/download/ here

i am write script here give smaple code then check it your html

here sample code

https://drive.google.com/file/d/0BwNaFGxzigBuZVpPaGYtZGl0RGc/view?usp=sharing

please check it 

here i  add simple jquery scripy

<script type="text/javascript"&

gt;

jQu

ery( document ).ready(function() {

    

    jQuery('.tryitbtn a').click(function() { 

     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);

      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

      if (target.length) {

        $('html,body').animate({

          scrollTop: target.offset().top

        }, 1000);

        return false;

      }

    }

  });

    

    jQuery('a.back_t').click(function () {

        //alert('hi');

jQuery('body,html').animate({

scrollTop: 0

}, 800);

return false;

});

  

})

;

</

script>

create custom loader in jquery and css

<script type="text/javascript">
$(document).ready(function(){
   
     jQuery('#link').click(function(){
       
     var link_value =  jQuery(this).attr('value');
     //alert(link_value);
     pagination(link_value);
     
});
   
});

function pagination(link_value){
   
    jQuery("#ldr").show();
    jQuery.ajax({
    type: "GET",
    url: "http://example.com/",
    dataType : "html",
    data: {link_value: link_value},
    success: function(response){
    jQuery('.gallery').html(response);
    jQuery("#ldr").hide();
    },
});
     
   
}
</script>
<div id="ldr" style="z-index: 99999999;display: none; position: fixed; height: 100%; width: 100%; background: url("http://www.example.com/image/ajax_loader_blue_512.gif") no-repeat scroll center center rgba(0, 0, 0, 0.5);">
</div>
<label value="20" id="link">20

<div class="gallery"></div>

How to get base url and go back facility in php

How to get base url and go back facility in php

Here for very normal code for that 

just get base url then you can try this code

<?php echo "http://" . $_SERVER['SERVER_NAME'] . 

$_SERVER['REQUEST_URI']; ?>

try i think it's working for you and you want create go back

<a href="#" onclick="window.history.back();">Go Back

this two for php very usefull check it suggest me.

How to pass value from Javascript to php variable on the second page?

hello

How to pass value from Javascript to php variable on the second page?

I am giving example of how pass value using javascript.

create .php file like demo.php write to code

separate sentences (paragraph) using pipeline by dots using javascript and html

Just check this code using this code you can separated setences. i am septences where dots using pipe line.

multiple checkbox select with javascript and getting checkbox Value using php

<title>

PHP output JSON Web Service charset UTF-8 get multi languange data like hindi,franch

set database filed collation in table.

if you add another langauge data like hindi,gujrati  first chanage strucute

change Collation as utt8_general_ci.

Ajaxsubmits the from jquey validation in php

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Jquery Validation -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Usefull Link For Php,magento,Jquery,css,Bootsrap

To change the homepage: Magento theme
http://www.magentocommerce.com/knowledge-base/entry/how-to-change-the-home-page

Get Featured product In magento
http://www.eglobeits.com/blog/magento-create-featured-product-block-on-home-page/

Extension For Featured product
http://www.magentocommerce.com/magento-connect/featured-product-with-scroller.html

Create Simple Static slideshow or slider using Jquery