Header Ads

  • Breaking News

    JQuery Image Zoom Effect





    Live Demo


    A few words about the effect 
    This is actually a WordPress plug -in that was rebuilt for the blog , with a little hard working, everything is possible. It would be selfish to keep it to yourself because many keep such things as the greatest treasure and wan't to share with us. All praise to the people who selflessly help everyone and for those who can rightfully say that they are real bloggers . Those others who selfishly kept widgets and everything to make their blog "In" are actually worthless. But not to whine but to get down to business . Easy Zoom is , as I said, the WP plug -in and converted now in blog form for you . It's working Somehow - but that 's ok and fair , I do not know if you agree . With these things need to be careful when installing , not because you will break something or disrupt a system , but simply because you must install correctly .
    Note : Photos must be bigger than 500px it is, they should be the size of Wallpapers. Or less , but not less than 500px because it will not have an effect .
    Original WP effect is  cssglobe  property with gratitude for the use and modification.


    Really means a lot when you need to look something up close and do not have the space , it happens to exceed the dimensions of the monitor photos , rare but it happens. Or if you want to see the details.
    Remind you, it is very difficult to implement this plugin in blogger, but learning and sleeples nights, you can achieved quite a lot . The effect of space-saving and beautiful with decorative side .
    Let me show you how to install but be careful because it may happen that there is no effect, ok we can easily fix but better to do it right.

    Step by Step >> dashboard > Template> Edit HTML >CTRL + F and find </head> 
    Just above this code ( </head> ) paste next code :


    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
    <script src='http://wierdwalker.googlecode.com/files/easyzoom.js' type='text/javascript'/>
    <script type='text/javascript'>
    jQuery(function($){
    $(&#39;a.zoom&#39;).easyZoom();
    });
    </script>


    Now, same CTL + F and find ]]></b:skin> tag and just above that, add next one line ( code):


    #easy_zoom{width:600px;height:400px; border:5px solid #eee;background:#fff;color:#333;position:fixed;top:35px;left:50%;overflow:hidden;-moz-box-shadow:0 0 10px #555;-webkit-box-shadow:0 0 10px #555;box-shadow:0 0 10px #555;/* vertical and horizontal alignment used for preloader text */line-height:400px;text-align:center;}


    Save template. 
    Now we are going to add photos. By default, settings are different but still blogger decrease regardless of size. Medium is always one size when you upload photos. Note: Always upload photo otherwise it will not work if you add on some other way or copy/paste.


    This is zoom image after all settings and adding in template. The end is always easy. The only difference compared to the "regular" photo is class = "zoom" and nothing more but before that everything had to be done properly.
    1. Upload photo
    2. Replace a "separator" that is already there by default when you upload the photo with "zoom" tag and that's it.
    <a class="zoom" href="http://3.bp.blogspot.com/-REsmEZucXM4/Urw-qfV2l5I/AAAAAAAAQxs/F4N2HomjPFk/s1600/strumf.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-REsmEZucXM4/Urw-qfV2l5I/AAAAAAAAQxs/F4N2HomjPFk/s1600/strumf.jpg" height="205" width="320" /></a><br />
    Now when you added effect, feel free to share, please leave a comment if you like and that's happy bloging.


    No comments

    Post Top Ad

    Post Bottom Ad