I'm currently setting up a website for a photographer and working on creating a gallery. To streamline the process, I have automated many aspects such as file names, paths, widths, lightbox classes, etc.
All I have to do in the HTML is write an <a> tag with a title, and jQuery handles the rest.
HTML
<a alt="All-my-Loving"></a>
jQuery
$(function () {
$('.imagesContainer a').each(function () {
var $link = $(this),
title = $link.attr('alt'),
thumb = 'images/portfolio/thumbs/' + title + '.jpg';
$link.attr('data-target', 'flare');
$link.attr('data-flare-scale', 'fitmax');
$link.attr('data-flare-thumb', thumb);
$link.attr('data-flare-gallery', 'main');
$link.addClass('item');
$link.attr('href', 'images/portfolio/full/' + title + '.jpg');
$link.append($('<img>', {
src : 'images/portfolio/thumbs/' + title + '.jpg'
}));
});
});
The Challenge:
The image path leads to regular (@1x) images but to ensure compatibility with retina screens, I need it to lead to @2x or @3x images when necessary.
I've considered using Retina.js but since all image sources are determined after the script execution, this may not be feasible.
Key Requirement:
I must find a way to serve retina images without downloading both 1x and 2x versions simultaneously.
Any suggestions?
Potential Solution:
Incorporating an IF statement to determine if the device has retina graphics could help resolve the issue.
If (window.devicePixelRatio > 1) {
$link.append($('<img>', {
src : 'images/portfolio/thumbsRETINA/' + title + '.jpg'
}));
} else {
$link.append($('<img>', {
src : 'images/portfolio/thumbsREGULAR/' + title + '.jpg'
}));
}
This IF statement can be applied to each Image Path request to check if the device supports retina display.
Update
After implementing the IF statement, it appears to be functioning correctly. The Retina folders remain empty, and only devices with retina displays will load appropriate images. However, I am uncertain if this method is optimal. The modified script now looks like:
$(function () {
$('.imagesContainer a').each(function () {
var $link = $(this),
title = $link.attr('alt'),
thumb = 'images/portfolio/thumbs/' + title + '.jpg';
retinaThumb = 'images/portfolio/thumbs-retina/' + title + '.jpg';
// Regular tags
$link.attr('data-target', 'flare');
$link.attr('data-flare-scale', 'fitmax');
$link.attr('data-flare-gallery', 'main');
$link.addClass('item');
$link.attr('href', 'images/portfolio/full/' + title + '.jpg');
// Retina tags
if (window.devicePixelRatio > 1) {
$link.attr('data-flare-thumb', retinaThumb);
$link.attr('href', 'images/portfolio/full-retina/' + title + '.jpg');
$link.append($('<img>', {
src : 'images/portfolio/thumbs-retina/' + title + '.jpg'
}));
} else {
$link.attr('data-flare-thumb', thumb);
$link.attr('href', 'images/portfolio/full/' + title + '.jpg');
$link.append($('<img>', {
src : 'images/portfolio/thumbs/' + title + '.jpg'
}));
}
});
});