How To Add jQuery Image Preview With Caption to Blogger

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 before the tag .

4.Now save your template.

5.Now when you add a image use below html structure:

Large-Image-Address" class="preview" title="Image-Title">Small-Image-Address" alt="gallery thumbnail" />

Look at the example below:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGMBsq9PfYarmX78JdBAs4sp6ELcjWoGICXPCZudl6zZR3X2uAraoFIrIBzr3iKAZpxMZ_mZI0vIY3gOp14KG-0IuvrMdXim-tgMuJySIHACXQXXwctRztEA-UeCN4Lp6EkSN_ky7DTMTc/+large.jpg" class="preview" title="Beautiful Lonely Beach">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_SRXTMqT8GyF8klW3lWOPjfVKAl_MDycaaBwE7uN0gDImxtjfgXwZl-bdnEieZEIRPIMrf8uHMYm5BpUNk8slOnFVugrkRkRmFBJR3D0TinJMrWdjLjksI4Yzrhyphenhyphen79yph-k6uCmDqIgNX/+small.jpg" alt="gallery thumbnail" />

Note: If you want to remove caption, remove the title attribute from above code.

It will look like this:



Demo | Source