We can updating our site. 💖 Some link are not working. So please try to second link

How To Add Lightbox Popup Effect in Blogger Photos?

How to Add Image Lightbox Popup Effect in Blogger Blog The Beautiful Gadget For Blogger Photos To Lock Awesome Your Blogger Blog
How To Add Lightbox Popup Effect in Blogger Photos?

How To Add Lightbox Popup Effect To Your Blogger Blog

Hello Friends, Welcome to my next article about the gadgets for Blog. Today, I will show you how to Add Lightbox Popup Effect To Blogger Blog

The appearance of the best lightboxes is an impressive first focal point of the website. Lightbox is an overlay or popup window that appears on web pages where it displays an image. The feature highlights the image and darkens the rest of the page, but still allows the content to be seen around the edges. Lightbox is a great way to display featured products and images. It is often used for images, opt-in forms, videos, slideshows, etc. With lightbox your website will become more beautiful and professional.

With the current situation, the number of people using the Median UI Template is quite a lot, but there is an inadequacy that when clicking on the image in the article, this Template will navigate directly to the image source Link. So I will show you how to add Popup Light Box effect to Template Median

Step 1: You log in to Blogger.com
Step 2: You choose to edit HTML and paste the code below before the </body>. tag

  <!-- Lightbox with Fancybox3 by FCThemes.eu.org-->

<b:if cond='data:view.isSingleItem'>

  <link href='https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css' rel='stylesheet'/>

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

  <script src='https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js'/>

  <script>//<![CDATA[

    $('.postEntry img').each(function() {

      var img_link = $(this).attr('src')

      $(this).wrap('<a href='+ img_link +' data-fancybox="gallery"></a>')

    })

    $('.tr-caption-container').each(function() {

      var caption = $(this).find('.tr-caption').text()

      $(this).find('a').attr('data-caption',caption)

    })

  //]]></script>

</b:if>

<!-- Lightbox with Fancybox3 by FCThemes.eu.org -->

Step 3: Click Save and enjoy the results!

Note:For those of you using Tempalte Median, if that doesn't work, you need to reinstall the Image Lightbox mode as shown below.

Go To Settings

Find The image Lightbox Button

Showcase images in overlay on top of post

Click The Button To Allow

Note: For those of you using other Templates, you can use the code below

<!-- Lightbox with Fancybox3 By FCThemes.eu.org-->

<b:if cond='data:view.isSingleItem'>

  <link href='https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css' rel='stylesheet'/>

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

  <script src='https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js'/>

  <script>//<![CDATA[

    $('.post-body img').each(function() {

      var img_link = $(this).attr('src')

      $(this).wrap('<a href='+ img_link +' data-fancybox="gallery"></a>')

    })

    $('.tr-caption-container').each(function() {

      var caption = $(this).find('.tr-caption').text()

      $(this).find('a').attr('data-caption',caption)

    })

  //]]></script>

</b:if>

<!-- Lightbox with Fancybox3 By FCThemes.eu.org-->

Thanks for visiting Fc Themes I Hope This Article is Useful For You please Describe Your Feedback in the Comment Box


Post a Comment

Please Don't Add Links 😠 I hate spam
© FC Themes. All rights reserved. Premium By FC Themes