It is a Jquery image zoom plugin for blogger.It will help to zoom your image without loss of clarity.If you can add small image in your blog post but it convert images size to large when cursor move on image.
Step 1. Log in Blogger Dashboard and Click Layout > Edit Html
Step 2. Find ]]></b:skin> (Ctrl+F).
Step 3. Copy paste the below code directly above ]]></b:skin>
#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;
}
Step 4. Now Find </head> (Ctrl+F)
Step 5. Copy and paste the following code directly above </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src='http://www.weebly.com/uploads/8/2/7/3/8273197/zoom_image_entertainment.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function($){
$('a.zoom').easyZoom();
});
Important - The red coloured code is the main jQuery script, if you already have jQuery in your template. Then leave the highlighted code.
Demo: Please Click below Image
............................................END.......................................
0 comments