Monday 16 January 2017

Basic jQuery + HTML - image zoomed in on hover

For quite a while, I have been wanting to delve deeper into Javascript. On top of that there were all these other - what I thought at the time - programming names floating around that seemed super complicated and a whole confusing thing in themselves. One of these was jQuery.

However, it turns out that jQuery is just a library that uses the Javascript syntax and saves a whole bunch of time with lots of pre-build functions set in. So with that I thought I would create a really basic test using jQuery.


The idea? To zoom in on an image, once you hover over. Inspired by many different themes that are out there.


Link to example to see the result in action: http://www.w3schools.com/code/tryit.asp?filename=FBSW64JYFOVV

How it works?


Firstly for the button: 

First of all I linked to the online library of jQuery in a separate <script> tag with the following code:

src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"

then In a separate <script> tag I'll create the main function using the basic jQuery syntax: $(selector).action():

$(document).ready(function(){

}

Setting up the function 

So with that, inside of the main 'document' function I use $ then reference to the id "button" that is in my HTML code using the .click action set by the jQuery library. Finally, with that set I can then get a reference to the <div> element in the HTML document. I have 2 different <div> each either own ID ('#div1' and '#div2'). Once referenced I can assign the jQuery action which in this case is a basic fadeIn set to 'slow' for the first, and '3000' milliseconds for the second one.

 $("button").click(function(){
        $("#div1").fadeIn("slow");
        $("#div2").fadeIn(3000);
 });

Mouse over/out <div>

With that set I can then go ahead and write the code for when the mouse hovers over the element. For this, I used the .animate action, setting the width and height to 500% and after some playing around I came to the following values for marginLeft and marginTop.

$("#div2").mouseover(function(){    
    $("#img2").animate({
            width: '500%',
            height: '500%',
            marginLeft: '-=200px',
            marginTop: '-=80px',
         });
});

Then when the user takes their mouse away, I would reset the values to these:

 $("#div2").mouseout(function(){    
    $("#img2").animate({
            width: '300%',
            height: '300%',
            marginLeft: '-180px',
            marginTop: '-20px',
        });
});


Finished code

Once the first <div> was set up, I copied the function and tweaked the values slightly. In hindsight It would have been beneficial to create one function that handled the whole mouse over/out and then call that function with the new values. 
Here is the final code:

$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn("slow");
        $("#div2").fadeIn(3000);
    });
$("#div2").mouseover(function(){    
    $("#img2").animate({
        width: '500%',
            height: '500%',
            marginLeft: '-=200px',
            marginTop: '-=80px',
            
        });
        });
     $("#div2").mouseout(function(){    
    $("#img2").animate({
        width: '300%',
            height: '300%',
            marginLeft: '-180px',
            marginTop: '-20px',
        });
        });
        
    $("#div1").mouseover(function(){    
    $("#img1").animate({
        width: '100%',
            height: '100%',
            marginLeft: '0px',
            marginTop: '0px',
            
        });
        });
     $("#div1").mouseout(function(){    
    $("#img1").animate({
        width: '300%',
            height: '300%',
            marginLeft: '-180px',
            marginTop: '-20px',
        });
        });
        

});

No comments:

Post a Comment