How To Add jQuery Image Zooming To Blogger

Posted by Funniest Pictures at 20:36 Labels: ,


1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]> tag .

3.Copy below code and paste it just after the ]]> tag.

jQuery Image Zooming





Important !!! : Download jquery.js and jquery.jqzoom.js as a zip file from here and host jquery.js and jquery.jqzoom.js yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<span style=LARGE-IMAGE-ADDRESS" src="SMALL-IMAGE-ADDRESS" class="jqzoom"/>


Look at the example below.

<span style=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL1I_q1KCajEPFD-08h_2HRaAJLXSqHe4fychfYNL6FGUOBH3pD_PfjpT-9RaIcDVGkZ5sBqIP49Z0WE4VzM72x7l1m9k9HwcnCR5wm4FSASjT2OZwoFEEuht0o81FplGhfPGZC1AXkWum/+Zoom+Image+big.jpeg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj0kRdzRmk-pHIQ57EzxYO_37rsMHOQYlSudlzGOZAY7Lp76HWhpJroSdXaTczAjIHPKcX_Bvk_z1Q4MMLYfSDfWfg7PNZKXArqs_lA7ewYln3Rshahkx7yD5q5fYrodzndHVT4CXY_7L0/+Zoom+Image+small.jpg" class="jqzoom"/>


You are done.

Demo




0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)