Skip to content
This repository was archived by the owner on Feb 23, 2023. It is now read-only.

Commit 8d10d9d

Browse files
fancyappsfancyapps
committed
Basic image "srcset" support
Pass "srcset" value either by using "data-srcset" tag or use an image option { image : { srcset : '..' } }
1 parent 595c8c3 commit 8d10d9d

File tree

4 files changed

+154
-22
lines changed

4 files changed

+154
-22
lines changed

‎dist/jquery.fancybox.js‎

Lines changed: 76 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// ==================================================
2-
// fancyBox v3.0.27
2+
// fancyBox v3.0.28
33
//
44
// Licensed GPLv3 for open source use
55
// or fancyBox Commercial License for commercial use
@@ -348,6 +348,10 @@
348348

349349
opts.selector = 'selector' in data ? data.selector : opts.selector;
350350

351+
if ( 'srcset' in data ) {
352+
opts.image = { srcset : data.srcset };
353+
}
354+
351355
opts.$orig = $item;
352356

353357
} else {
@@ -1421,11 +1425,63 @@
14211425

14221426
setBigImage : function ( slide ) {
14231427

1424-
var self = this;
1425-
var $img = $('<img />');
1428+
var self = this;
1429+
var $img = $('<img />');
1430+
var srcset = slide.opts.image.srcset;
1431+
var src;
1432+
var temp;
1433+
1434+
var pxRatio = window.devicePixelRatio || 1;
1435+
var windowWidth = window.innerWidth * pxRatio;
1436+
var windowHeight = window.innerHeight * pxRatio;
1437+
1438+
// If we have "srcset", then we need to find suitable "src".
1439+
// This is necessary, because when you set a src attribute, the browser will preload the image
1440+
// before any javascript or even CSS is applied.
1441+
if ( srcset ) {
1442+
temp = srcset.split(',').map(function (el) {
1443+
var ret = {};
1444+
1445+
el.trim().split(/\s+/).forEach(function (el, i) {
1446+
var value = parseInt(el.substring(0, el.length - 1), 10);
1447+
1448+
if ( i === 0 ) {
1449+
return (ret.url = el);
1450+
}
1451+
1452+
if ( value ) {
1453+
ret.value = value;
1454+
ret.postfix = el[el.length - 1];
1455+
}
14261456

1427-
if ( slide.opts.image.protect ) {
1428-
$('<div class="fancybox-spaceball"></div>').appendTo( slide.$placeholder );
1457+
});
1458+
1459+
return ret;
1460+
});
1461+
1462+
// Sort by value
1463+
temp.sort(function (a, b) {
1464+
return a.value - b.value;
1465+
});
1466+
1467+
// Ok, now we have an array of all srcset values
1468+
for ( var j = 0; j < temp.length; j++ ) {
1469+
var el = temp[ j ];
1470+
1471+
if (
1472+
( el.postfix === 'w' && el.value >= windowWidth ) ||
1473+
( el.postfix === 'h' && el.value >= windowHeight ) ||
1474+
( el.postfix === 'x' && el.value >= pxRatio )
1475+
) {
1476+
src = el.url;
1477+
break;
1478+
}
1479+
}
1480+
1481+
// If not found, take the last one
1482+
if ( !src && temp.length ) {
1483+
src = temp[ temp.length - 1 ].url;
1484+
}
14291485
}
14301486

14311487
slide.$image = $img
@@ -1436,27 +1492,34 @@
14361492
})
14371493
.one('load', function() {
14381494

1495+
// Clear timeout that checks if loading icon needs to be displayed
1496+
clearTimeout( slide.timouts );
1497+
slide.timouts = null;
1498+
14391499
if ( self.isClosing ) {
14401500
return;
14411501
}
14421502

14431503
slide.width = this.naturalWidth;
14441504
slide.height = this.naturalHeight;
14451505

1506+
if ( srcset ) {
1507+
$img.attr('srcset', srcset);
1508+
}
1509+
14461510
self.afterLoad( slide );
14471511

14481512
if ( slide.$ghost ) {
14491513
slide.timouts = setTimeout(function() {
1450-
14511514
slide.$ghost.hide();
14521515

14531516
}, 350);
14541517
}
14551518

14561519
})
14571520
.addClass('fancybox-image')
1458-
.appendTo( slide.$placeholder )
1459-
.attr('src', slide.src);
1521+
.attr('src', src || slide.src)
1522+
.appendTo( slide.$placeholder );
14601523

14611524
if ( $img[0].complete ) {
14621525
$img.trigger('load');
@@ -1467,7 +1530,6 @@
14671530
} else {
14681531

14691532
slide.timouts = setTimeout(function() {
1470-
14711533
if ( !$img[0].complete && !slide.hasError ) {
14721534
self.showLoading( slide );
14731535
}
@@ -1476,6 +1538,10 @@
14761538

14771539
}
14781540

1541+
if ( slide.opts.image.protect ) {
1542+
$('<div class="fancybox-spaceball"></div>').appendTo( slide.$placeholder );
1543+
}
1544+
14791545
},
14801546

14811547
// Simply show image holder without animation
@@ -2155,7 +2221,7 @@
21552221

21562222
$.fancybox = {
21572223

2158-
version : "3.0.27",
2224+
version : "3.0.28",
21592225
defaults : defaults,
21602226

21612227

‎dist/jquery.fancybox.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "fancybox",
33
"description": "Touch enabled, responsive and fully customizable jQuery lightbox script",
4-
"version": "3.0.27",
4+
"version": "3.0.28",
55
"homepage": "http://fancyapps.com/fancybox/",
66
"main": "./dist/jquery.fancybox.js",
77
"author": "fancyApps",

‎src/js/core.js‎

Lines changed: 74 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,10 @@
338338

339339
opts.selector = 'selector' in data ? data.selector : opts.selector;
340340

341+
if ( 'srcset' in data ) {
342+
opts.image = { srcset : data.srcset };
343+
}
344+
341345
opts.$orig = $item;
342346

343347
} else {
@@ -1411,11 +1415,63 @@
14111415

14121416
setBigImage : function ( slide ) {
14131417

1414-
var self = this;
1415-
var $img = $('<img />');
1418+
var self = this;
1419+
var $img = $('<img />');
1420+
var srcset = slide.opts.image.srcset;
1421+
var src;
1422+
var temp;
1423+
1424+
var pxRatio = window.devicePixelRatio || 1;
1425+
var windowWidth = window.innerWidth * pxRatio;
1426+
var windowHeight = window.innerHeight * pxRatio;
1427+
1428+
// If we have "srcset", then we need to find suitable "src".
1429+
// This is necessary, because when you set a src attribute, the browser will preload the image
1430+
// before any javascript or even CSS is applied.
1431+
if ( srcset ) {
1432+
temp = srcset.split(',').map(function (el) {
1433+
var ret = {};
1434+
1435+
el.trim().split(/\s+/).forEach(function (el, i) {
1436+
var value = parseInt(el.substring(0, el.length - 1), 10);
1437+
1438+
if ( i === 0 ) {
1439+
return (ret.url = el);
1440+
}
1441+
1442+
if ( value ) {
1443+
ret.value = value;
1444+
ret.postfix = el[el.length - 1];
1445+
}
14161446

1417-
if ( slide.opts.image.protect ) {
1418-
$('<div class="fancybox-spaceball"></div>').appendTo( slide.$placeholder );
1447+
});
1448+
1449+
return ret;
1450+
});
1451+
1452+
// Sort by value
1453+
temp.sort(function (a, b) {
1454+
return a.value - b.value;
1455+
});
1456+
1457+
// Ok, now we have an array of all srcset values
1458+
for ( var j = 0; j < temp.length; j++ ) {
1459+
var el = temp[ j ];
1460+
1461+
if (
1462+
( el.postfix === 'w' && el.value >= windowWidth ) ||
1463+
( el.postfix === 'h' && el.value >= windowHeight ) ||
1464+
( el.postfix === 'x' && el.value >= pxRatio )
1465+
) {
1466+
src = el.url;
1467+
break;
1468+
}
1469+
}
1470+
1471+
// If not found, take the last one
1472+
if ( !src && temp.length ) {
1473+
src = temp[ temp.length - 1 ].url;
1474+
}
14191475
}
14201476

14211477
slide.$image = $img
@@ -1426,27 +1482,34 @@
14261482
})
14271483
.one('load', function() {
14281484

1485+
// Clear timeout that checks if loading icon needs to be displayed
1486+
clearTimeout( slide.timouts );
1487+
slide.timouts = null;
1488+
14291489
if ( self.isClosing ) {
14301490
return;
14311491
}
14321492

14331493
slide.width = this.naturalWidth;
14341494
slide.height = this.naturalHeight;
14351495

1496+
if ( srcset ) {
1497+
$img.attr('srcset', srcset);
1498+
}
1499+
14361500
self.afterLoad( slide );
14371501

14381502
if ( slide.$ghost ) {
14391503
slide.timouts = setTimeout(function() {
1440-
14411504
slide.$ghost.hide();
14421505

14431506
}, 350);
14441507
}
14451508

14461509
})
14471510
.addClass('fancybox-image')
1448-
.appendTo( slide.$placeholder )
1449-
.attr('src', slide.src);
1511+
.attr('src', src || slide.src)
1512+
.appendTo( slide.$placeholder );
14501513

14511514
if ( $img[0].complete ) {
14521515
$img.trigger('load');
@@ -1457,7 +1520,6 @@
14571520
} else {
14581521

14591522
slide.timouts = setTimeout(function() {
1460-
14611523
if ( !$img[0].complete && !slide.hasError ) {
14621524
self.showLoading( slide );
14631525
}
@@ -1466,6 +1528,10 @@
14661528

14671529
}
14681530

1531+
if ( slide.opts.image.protect ) {
1532+
$('<div class="fancybox-spaceball"></div>').appendTo( slide.$placeholder );
1533+
}
1534+
14691535
},
14701536

14711537
// Simply show image holder without animation

0 commit comments

Comments
 (0)