Jquery Add to Cart Fly ala Prestashop

Hi haloo,
On this post I will share an amazing Add to Cart jquery animation which use by Prestashop.
For an e-commerce website, it can mean a better shopping experience for customers where they can easy to use, beautiful animation which make the site more interesting, so they can concentrate more on the products which may result in better sales.

Ok, Now I will let you know how the basic of the source.
1. We make a Html file with code below

<table cellpadding="0" cellspacing="0">

    <tr>
     <td width="400px">
         <div>
                <div class="image"><img src="1.jpg" /></div>
                <div><a class="addCart">Add to Cart</a></div>
            </div>
            <div>
                <div class="image"><img src="1.jpg" /></div>
                <div><a class="addCart">Add to Cart</a></div>
            </div>
        </td>
        <td width="100px" valign="top">
         <div id="shoppingCart">
          <h3>Shopping Cart</h3>
            </div>
        </td>
    </tr>
</table>

2. Include the javascript code below your html code

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(".addCart").click(function(){
 var imgsrc = $(this).parent().parent().children(".image").children().attr('src');
 var imgpos = $(this).parent().parent().children(".image").children().position();
 var imgsrcstyle = "position:absolute;opacity:0.8;display:none;left:"+imgpos.left+"px;top:"+imgpos.top+"px;z-index:99999;";
 var this_parent = $(this).parent();
  
 // Ajax request
 $.ajax({
     type: "POST",
     url: "update.php",
     data: ({id:'2'}),
     dataType: "json",
     cache: false,
     success: function(result){
  if(result['status'] == 'true'){
     // make clone image
     this_parent.append('<img src="'+imgsrc+'" style="'+imgsrcstyle+'" class="cloned" />');
     
     // call animate fly
     fly(result);
  } else {
     alert('Failed add product to cart');
  }
      }
 });   
});
 
function fly(result){
 var box = $('#shoppingCart').position();
 $(".cloned").show().animate({ "opacity": 0.2,"top":(box.top + 20),"left":(box.left + 20),"width":10},1500,function(){
    $(this).remove();
   
    // update action
    alert('yay success!');
 }); 
}
 
});
</script>

For the complete source you can download here.
Hope it can help you guys.

Best regard,
Bayu Prawira

Jquery Image Slide on Hover

Hello,
In this post I will share  about  a simple jquery to animate an image when hovering. basically it is using jQuery’s animate() effect. I will use this effect to make transaction when hovering the image.
Let's looks the demo in the url below :
Jquery Image Slide

Ok, I begin with html code :

<div id="vertical" class="clear">
    <!-- Vertical -->
    <h2>jQuery image slide on hover effect (vertical)</h2>
    <div><a href="htmldrive.net"><img src="image-2.png" alt="" /></a></div>
    <div><a href="#"><img src="image-1.jpg" alt="" /></a></div>
</div>
<div id="horizontal" class="clear">
    <!-- Horizontal -->
    <h2>jQuery image slide on hover effect (horizontal)</h2>
    <div><a href="#"><img src="image-4.jpg" alt="" /></a></div>
    <div><a href="#"><img src="image-5.png" alt="" /></a></div>
</div>
<div id="easeOutBounce" class="clear">
    <!-- Horizontal -->
    <h2>jQuery image slide on hover effect (easeOutBounce)</h2>
    <div><a href="htmldrive.net"><img src="image-2.png" alt="" /></a></div>
    <div><a href="#"><img src="image-1.jpg" alt="" /></a></div>
</div>

We have 3 main div contain image links. each image has two face, maybe it will easier when you look image below :

image-1.jpg

  


image-2.jpg

Then defined simple jquery.imageslide.js to make it work, you can download full source Jquery Image Slide.

jquery.imageslide.js has 3 transaction type (vertical, horizontal,easeOutBounce) and you can use it with multiple images

Now you can set up the property of image slide as below:

<script type="text/javascript">
        $(document).ready(function(){
            $('#vertical div a').imgslide({
                width: 296,
                height: 130,
                animate : "vertical",
                duration : 300
            });
            $('#horizontal div a').imgslide({
                animate : "horizontal",
                duration : 300
            });
            $('#easeOutBounce div a').imgslide({
                animate : "easeOutBounce",
                duration : 800
            });
        });
    </script>

Run your code, it will work like a charm ^^.
That's all, hope it useful

Best regard,
Bayu Prawira

Get original size of image ( Jquery )

Hi buddy, Today I will share a short code to get original size of image on page that has been resized to fit in a div. It usually needed when you make photo gallery with thumbnail images. Ok, here we go, Lets look for the demo
 

Width: x Height:

 

Then look for the code, 
We will take the original size of image by using Jquery.  
Defined the jquery in your head container
 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Html code of image:

  <html>
     <head>
          // Defined Jquery
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

     </head>
     <body>
         <div id="myimg">
             <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLaXD9e5dDWD2dh5V-5pIegk_ipN2nZD9zp9miIYq_FQr_H-iy34uH5cPRDpHeKB2IbATqYv4j78uvqK4R50UZeeqexd1oU97SZ9b3SzpsqI2JS8z_twEqH9Snmjk2L3Kb_uk8N41l4iJg/s1600/nusa-dua.jpg" height="200" width="300" />
         </div>
     </body>
  </html> 

And below is the code to get original size of image:

$(document).ready(function(){
    var img = new Image();
    img.onload = function() {
        alert("width:"+this.width+" x Height:"+this.height;
    }
    img.src = $('#myimg img').attr('src');
});

Include get original size of image code in html:

  <html>
     <head>
          // Defined Jquery
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
          
          // Get original size code
          <script type="text/javascript">
               $(document).ready(function(){
                   var img = new Image();
                   img.onload = function() {
                       alert("width:"+this.width+" x Height:"+this.height;
                   }
                   img.src = $('#myimg img').attr('src');
               });
          </script>
     </head>
     <body>
         <div id="myimg">
             <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLaXD9e5dDWD2dh5V-5pIegk_ipN2nZD9zp9miIYq_FQr_H-iy34uH5cPRDpHeKB2IbATqYv4j78uvqK4R50UZeeqexd1oU97SZ9b3SzpsqI2JS8z_twEqH9Snmjk2L3Kb_uk8N41l4iJg/s1600/nusa-dua.jpg" height="200" width="300" />
         </div>
     </body>
  </html> 

Well done,
hope it will help,
Thank you for visit my blog,
If you have any question, just write comment below.

Best Regard,
Bayu Prawira