Example to show how mobify works

Question

I have been looking at the mobify.js website for a while now, but I fail to understand the benefits of using it. (I am stumped to see why would one replace all the images on the page by GrumpyCat image?).

Could you kindly point me to a clear and lucid example, wherein, I can see that depending on the browser resolution my image size changes.

I have done the following tasks till now: 0. Included mobify.js header information 1. Used the mountains.jpg and forest.jpg image in my hosted website (The page contains only these two images) 2. Request the page from a desktop machine, from a tablet (Samsung Galaxy 10 inch), from an android mobile phone. 3. In all the three cases, I see the same image getting downloaded, the size of the image stays the same in all the cases.

I understand that the magic of size reduction can't happen on the fly, but how do I achieve this?

score 1 · Accepted Answer · edited Apr 23 '15 at 23:12

I realize that the Grumpy Cat example is a bit cheeky, but the same concept applies to solve your problem. Instead of replacing the images with Grumpy Cat images, you could write some logic to replace the images with lower-resolution images (i.e. mountains-320.jpg and forest-320.jpg).

With Mobify.js, you need to write the adaptations in the JavaScript snippet that you added to your site. So, to load smaller images for mobile, you could define the path to the lower resolution image in your original HTML like this:

<img src="mountain.jpg" data-mobile-src="mountain-320.jpg" />
<img src="forest.jpg" data-mobile-src="forest-320.jpg" />

Then, in the JavaScript snippet, you could modify it to grab the image in the data-mobile-src attribute instead like this:

        if (capturing) {
            // Grab reference to a newly created document
            Mobify.Capture.init(function(capture){
                // Grab reference to the captured document in progres
                var capturedDoc = capture.capturedDoc;

                var imgs = capturedDoc.getElementsByTagName("img[data-mobile-src]");
                for(var i = 0; i < imgs.length; i++) {
                    var img = imgs[i];
                    var ogImage = img.getAttribute("x-src");
                    var mobileImage = img.getAttribute("data-mobile-src");
                    img.setAttribute("x-src", mobileImage);
                    img.setAttribute("old-src", ogImage);
                }

                // Render source DOM to document
                capture.renderCapturedDoc();
            });
        }

Then, you'll see that the mobile site will download and render mountain-320.jpg or forest-320.jpg, but it will not download mountain.jpg or forest.jpg.

Just out of curiousity, what site are you wanting to use Mobify.js on?

Thanks a lot for your response. But, I am still not getting the expected output. When requesting from the laptop, and mobile phone, in both cases I see mountains-320.jpg file only. But, I want to see mountains.jpg file when accessing from laptop, and mountains-320.jpg when accessing from mobile. How can I achieve this? Here's my code: https://github.com/ashwintumma23/myMobify/blob/master/index.html — ATP, Apr 24 '15 at 06:24
Hi Ashwin, it is activating on both desktop and mobile right now because of how the `supportedBrowser` variable is getting set. It's a regular expression that is currently passing on most browsers. You'll want to update the regular expression to only match on mobile browsers, for example: /ip(hone|od)|android.*(mobile)|blackberry.*applewebkit|bb1\d.*mobile/i — Stewart Yu, May 01 '15 at 20:28

Example to show how mobify works

1 Answers1