Foundation - Interchange Use with Images

Description

Using interchange for images, you can set the image size as per the screen size i.e. large, medium or small. The image gets displayed smaller on the small screen device. To determine the users device for which image to serve, the CSS media queries are used.

Example

The following example demonstrates the use of interchange with images in Foundation −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
   </head>

   <body>
      <h2>Example of use with images</h2>
      <img data-interchange = "[/foundation/images/foundation-plugin/small.jpg, (default)], 
         [/foundation/images/foundation-plugin/small.jpg, (small)], 
         [/foundation/images/foundation-plugin/medium.jpg, (medium)]">
      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code use_images.html file.
Open this HTML file in a browser, an output is displayed as shown below.

foundation_plugins.htm