CODEWITHSUNDEEP
javascriptjqueryretina.js
Sander Schaeffer
Sander Schaeffer

Reputation: 2827

Else statement in JavaScript based upon media query / viewport OR 'Retina'-fix

I'm creating a website for a photographer. Sadly, to maintain quality, pictures serving should be equal at least the viewport of the user. Therefor, on Retina devices such as the new Macbook Pros, there should be images of about 1800x2880px. Too bad, these load very slowly.

I've currently got a dynamic script that simply loads thumbs and the full picture when clicked on.

The HTML code, for a thumb (and when clicked on, immediately the full size):

<a  href="#"
    data-flare-title="All-my-Loving"
    data-flare-width="375"
    class="multiple color"></a>

And the Javascript that automatically links the thumb src, and the A href, and some more tags:

$(function(){

$('#container #portfolioOverview a').each(function(){

var $link = $(this),
    title = $link.data('flare-title') + '.jpg';
    imgTooltip = $link.data('flare-title');
    imgTip = imgTooltip.replace(/-/g, ' ');
    imgWidth = $link.data('flare-width') + 'px';

$link.attr('href', 'images/portfolio/full/' + title);
$link.attr('data-flare-bw', 'images/portfolio/blackwhite/' + title);
$link.attr('data-flare-thumb', 'images/portfolio/thumbs/' + title);
$link.attr('data-flare-scale', 'fitmax');
$link.attr('data-target', 'flare');
$link.attr('data-flare-gallery', 'portfolio');
$link.addClass('tip');

$link.attr('data-tip', imgTip);

$link.append($('<img>', {
  src     : 'images/portfolio/thumbs/' + title,
  height  : '250px',
  width   : imgWidth
}));

});

});

This line: $link.attr('href', 'images/portfolio/full/' + title); links the correct full picture to the thumb. However, all these full images have a resolution of about 2800x1800px. These will also load for screens with a resolution of 1024x768, which results in awful, unnecessary slow loading times for smaller screens

Solution wanted:
As far as I could think of, this could simply be either a Retina JS script or a Else statement.

As the Retina JS script will automatically pick the "*@2x.jpg" image in the /images/portfolio/full/ folder, and ignore them for non-retina devices, While the ELSE statement will check if viewport is larger than 1920x1080. If confirm: Serve images from the folder 'images/portfolio/2x' instead of 'full', while 'else' would serve from the default full folder.

Please comment if I'm unclear. Thanks in advance!

Note: This should apply to ALL devices running a screen resolution of that above 1920x1080, not only Apple's devices

Upvotes: 1

Views: 139

Answers (2)

RWAM
RWAM

Reputation: 7018

Why you don't use any approach of responsive image techniques? More information you can find on http://responsiveimages.org/ If you use a polyfill like https://github.com/JimBobSquarePants/srcset-polyfill you are ready for the future.

Another approach is to minimized the image quality by increasing the dimensions of the images. Sounds strange, but it works: http://www.netvlies.nl/blog/design-interactie/retina-revolution I used this technique sometimes and in the result images are sharp even at retina displays.

Upvotes: 1

pm.calabrese
pm.calabrese

Reputation: 376

You can find the solution to your problem here. I will not copy and paste the solution. The basic idea is to use a custom attribute for serve a high res image on high res display like retina.

http://drew.roon.io/retina-images-that-respond

Upvotes: 1

Related Questions