CODEWITHSUNDEEP
jquerycssresponsive-designmedia-queries
RegEdit
RegEdit

Reputation: 2162

Responsive Image replacement with added img attributes

Given this html markup...

<figure class="figureFeatured">
    <img 
        width="300" 
        height="213" 
        src="wp-content/uploads/featuredImage-300x213.jpg"
        data-responsive="wp-content/uploads/featuredImage-150x150.jpg"
    />
</figure>

Is it possible via CSS or jQuery to replace the src attribute with the value of the data-responsive attribute?

I only want to do the replacement at specific device-width breakpoints (css media queries or jQuery window resize dimensions)

Upvotes: 2

Views: 2090

Answers (4)

John Magnolia
John Magnolia

Reputation: 16793

Using enquire.js you could do something simple like this:

<img alt="" data-respond="(min-width:768px)" data-respond-src="logo.jpg" src="logo-sm.jpg" role="logo" id="logo" />

$('img[data-respond][data-respond-src]').each(function(){
    var $el= $(this),
        src_org = $el.attr('src');  

    enquire.register($el.data('respond'), {
        match: function(){              
            $el.attr('src', $el.data('respond-src'));
        },
        unmatch: function(){                
            $el.attr('src', src_org);       
        }             
    });
});

Upvotes: 0

Adam Simpson
Adam Simpson

Reputation: 3681

If you are able to alter the markup a little bit, this is my go-to for responsive/retina s. https://github.com/scottjehl/picturefill

You could also modify the JS to match your markup.

Upvotes: 0

Drew Thomas
Drew Thomas

Reputation: 155

You could also try the Responsive Img jQuery plugin. It does just what you need, although I'm not sure how it would work within WordPress. http://responsiveimg.com

Upvotes: 0

Mark Price
Mark Price

Reputation: 107

You could do something like this:

Change your mark up to this

<figure class="figureFeatured"> 
    <img class="yourImgClass" src="wp-content/uploads/featuredImage-150x150.jpg" data-responsive="wp-content/uploads/featuredImage-300x213.jpg"/>

This will include the mobile image first, inline with best practice for Responsive. Ensure that your images are set to max-width: 100% in your css

Javascript wise, this code will get you the viewport width, and then swap the images upon resize of the window - ( change the breakPoint variable to what suits your need)

  /*! viewportwidth.js 0.1.1 | Author: Brett Jankord, 2012 | License: MIT */
    /* https://github.com/bjankord/viewportwidth.js */

    function getViewportWidth() {
        var vpw, w = window,
            webkit = (!(window.webkitConvertPointFromNodeToPage == null));

        // Webkit and IE 6-8
        if (webkit || !(typeof (window.innerWidth) == 'number')) {
            vpw = document.documentElement.clientWidth;
        }
        // Everything else
        else {
            vpw = w.innerWidth;
        }
        return vpw;

    };

    // doc ready
    jQuery(function () {
        // xcounter var to indicate if function has run 
        var hasSwapped = 0;

        // function to switch images to larger images

        function swapImages() {

            // for each image
            jQuery('.yourImgClass').each(function () {
                // cache selector
                var $this = jQuery(this);
                // get new src attribute
                var newSrc = $this.attr('data-responsive');
                // assign new image source
                $this.attr('src', newSrc);
                // update counter so function doesn't keep running 
                hasSwapped = 1;
            });
        }

        // set breakpoint width 
        var breakPoint = 850;

        // on resize of window
        jQuery(window).resize(function () {
            // assess the width of the viewport 
            var currentWidth = getViewPortWidth();
            // if the current width is bigger than the required breakpoint and the function has not been run 
            if (currentWidth >= breakPoint && hasSwapped < 1) {
                // run the swap image function 
                swapImages();
            }

        }); // end resize

    // you may also want to check you have the right image on doc ready as well, so you could do this:

        // get viewportWidth
        var initWidth = getViewPortWidth();
        // if the initial width is bigger than the required breakpoint and the function has not been run 
        if (initWidth >= breakPoint && hasSwapped < 1) {
         // run the swap image function 
             swapImages();
        }       


}); // close doc ready

hope that helps some - Mark

Upvotes: 1

Related Questions