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