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/AVvXsEitvUxcESX9Hyox8IuIhyphenhyphenardCpLYSZPiUBQY6fOX35OwCUEIIRl4pOg_fbfgz9siqIO3cA3YaVs4zYqe8Zjwok7t1ftBWegtKBCnp0YaWjtY4jauU1Sdja0pw1RIRC5miT7IWKB8RWTw3JX/+large.jpg" class="preview" title="Beautiful Lonely Beach">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVAiI_XPgVNWe_jPIyikx1cuzkFGg6eWtPACzRajENpkzaYGMJdlfEgpdo6y6hmffdJMewS8RcSV4oqpIgTvTeRwF0At-MkkBMqouQiqRKr2fxiw93fITXFhECEVHPgh06TFsAu42ajS84/+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