CODEWITHSUNDEEP
javascripthtmlmagnific-popup
Kurt François
Kurt François

Reputation: 1

Using WEBP with Magnific Popup

I have a simple HTML page using the following code to popup jpg images using Magnific Popup JS:

<li class="001">
<a href="images/large-image.jpg" class="002">
<div class="003">
<img src="images/thumbnail-image.jpg" alt="example alt-tag" />
</div>
<div class="004">
<h3 class="005">Photo Title Example</h3>
<p class="006">Longer description example about the photo here</p>
</div>
</a>
</li>

I would like to use WEBP images instead. I know the code to insert simple WEBP images on the page would be :

<picture> 
   <source type="image/webp"  srcset="images/thumbnail-image.webp"
   <img src="images/thumbnail-image.jpg" alt="example alt-tag" />
</picture>

Is there a way to adjust my codes to use WEBP with Magnific Popup JS ?

URL

Updates :

1st Step: Create htaccess rules for fallback

# Enable the rewrite engine
<IfModule mod_rewrite.c>
  RewriteEngine On

  # Check if the browser supports WebP
  RewriteCond %{HTTP_ACCEPT} image/webp

  # Check if the WebP file exists
  RewriteCond %{REQUEST_FILENAME}.webp -f

  # Serve the WebP file instead of the requested file
  RewriteRule ^(.*)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
  # Set the correct content type for WebP images
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

<IfModule mod_mime.c>
  # Add WebP MIME type if not already present
  AddType image/webp .webp
</IfModule>

2nd step, amend HTML as follows"

Code:

<ul>
  <li class="001">
    <a href="images/large-image.jpg" class="002">
      <div class="003">
        <picture>
          <source type="image/webp" srcset="images/thumbnail-image.webp">
          <img src="images/thumbnail-image.jpg" alt="example alt-tag">
        </picture>
      </div>
      <div class="004">
        <h3 class="005">Photo Title Example</h3>
        <p class="006">Longer description example about the photo here</p>
      </div>
    </a>
  </li>
</ul>

However browser seems to pickup only jpg. Tried both FF and Chrome.

Upvotes: 0

Views: 62

Answers (0)

Related Questions