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

Commit 620eaa8

Browse files
fancyappsfancyapps
committed
Thumbs can be zoomed when "srcset" is used
Just set default width/height and the script will calculate image height using the ratio
1 parent 8d10d9d commit 620eaa8

File tree

4 files changed

+140
-130
lines changed

4 files changed

+140
-130
lines changed

‎dist/jquery.fancybox.js‎

Lines changed: 69 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// ==================================================
2-
// fancyBox v3.0.28
2+
// fancyBox v3.0.29
33
//
44
// Licensed GPLv3 for open source use
55
// or fancyBox Commercial License for commercial use
@@ -1369,14 +1369,75 @@
13691369

13701370
setImage : function( slide ) {
13711371

1372-
var self = this;
1372+
var self = this;
1373+
var srcset = slide.opts.image.srcset;
1374+
1375+
var found, temp, pxRatio, windowWidth;
13731376

13741377
if ( slide.isLoaded && !slide.hasError ) {
13751378
self.afterLoad( slide );
13761379

13771380
return;
13781381
}
13791382

1383+
// If we have "srcset", then we need to find matching "src" value.
1384+
// This is necessary, because when you set an src attribute, the browser will preload the image
1385+
// before any javascript or even CSS is applied.
1386+
if ( srcset ) {
1387+
pxRatio = window.devicePixelRatio || 1;
1388+
windowWidth = window.innerWidth * pxRatio;
1389+
1390+
temp = srcset.split(',').map(function (el) {
1391+
var ret = {};
1392+
1393+
el.trim().split(/\s+/).forEach(function (el, i) {
1394+
var value = parseInt(el.substring(0, el.length - 1), 10);
1395+
1396+
if ( i === 0 ) {
1397+
return (ret.url = el);
1398+
}
1399+
1400+
if ( value ) {
1401+
ret.value = value;
1402+
ret.postfix = el[el.length - 1];
1403+
}
1404+
1405+
});
1406+
1407+
return ret;
1408+
});
1409+
1410+
// Sort by value
1411+
temp.sort(function (a, b) {
1412+
return a.value - b.value;
1413+
});
1414+
1415+
// Ok, now we have an array of all srcset values
1416+
for ( var j = 0; j < temp.length; j++ ) {
1417+
var el = temp[ j ];
1418+
1419+
if ( ( el.postfix === 'w' && el.value >= windowWidth ) || ( el.postfix === 'x' && el.value >= pxRatio ) ) {
1420+
found = el;
1421+
break;
1422+
}
1423+
}
1424+
1425+
// If not found, take the last one
1426+
if ( !found && temp.length ) {
1427+
found = temp[ temp.length - 1 ];
1428+
}
1429+
1430+
if ( found ) {
1431+
slide.src = found.url;
1432+
1433+
// If we have default width/height values, we can calculate height for matching source
1434+
if ( slide.width && slide.height && found.postfix == 'w' ) {
1435+
slide.height = ( slide.width / slide.height ) * found.value;
1436+
slide.width = found.value;
1437+
}
1438+
}
1439+
}
1440+
13801441
slide.$placeholder = $('<div class="fancybox-placeholder"></div>')
13811442
.hide()
13821443
.appendTo( slide.$slide );
@@ -1425,64 +1486,8 @@
14251486

14261487
setBigImage : function ( slide ) {
14271488

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-
}
1456-
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-
}
1485-
}
1489+
var self = this;
1490+
var $img = $('<img />');
14861491

14871492
slide.$image = $img
14881493
.one('error', function() {
@@ -1503,8 +1508,8 @@
15031508
slide.width = this.naturalWidth;
15041509
slide.height = this.naturalHeight;
15051510

1506-
if ( srcset ) {
1507-
$img.attr('srcset', srcset);
1511+
if ( slide.opts.image.srcset ) {
1512+
$img.attr('sizes', '100vw').attr('srcset', slide.opts.image.srcset);
15081513
}
15091514

15101515
self.afterLoad( slide );
@@ -1518,7 +1523,7 @@
15181523

15191524
})
15201525
.addClass('fancybox-image')
1521-
.attr('src', src || slide.src)
1526+
.attr('src', slide.src)
15221527
.appendTo( slide.$placeholder );
15231528

15241529
if ( $img[0].complete ) {
@@ -2221,7 +2226,7 @@
22212226

22222227
$.fancybox = {
22232228

2224-
version : "3.0.28",
2229+
version : "3.0.29",
22252230
defaults : defaults,
22262231

22272232

‎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.28",
4+
"version": "3.0.29",
55
"homepage": "http://fancyapps.com/fancybox/",
66
"main": "./dist/jquery.fancybox.js",
77
"author": "fancyApps",

‎src/js/core.js‎

Lines changed: 67 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1359,14 +1359,75 @@
13591359

13601360
setImage : function( slide ) {
13611361

1362-
var self = this;
1362+
var self = this;
1363+
var srcset = slide.opts.image.srcset;
1364+
1365+
var found, temp, pxRatio, windowWidth;
13631366

13641367
if ( slide.isLoaded && !slide.hasError ) {
13651368
self.afterLoad( slide );
13661369

13671370
return;
13681371
}
13691372

1373+
// If we have "srcset", then we need to find matching "src" value.
1374+
// This is necessary, because when you set an src attribute, the browser will preload the image
1375+
// before any javascript or even CSS is applied.
1376+
if ( srcset ) {
1377+
pxRatio = window.devicePixelRatio || 1;
1378+
windowWidth = window.innerWidth * pxRatio;
1379+
1380+
temp = srcset.split(',').map(function (el) {
1381+
var ret = {};
1382+
1383+
el.trim().split(/\s+/).forEach(function (el, i) {
1384+
var value = parseInt(el.substring(0, el.length - 1), 10);
1385+
1386+
if ( i === 0 ) {
1387+
return (ret.url = el);
1388+
}
1389+
1390+
if ( value ) {
1391+
ret.value = value;
1392+
ret.postfix = el[el.length - 1];
1393+
}
1394+
1395+
});
1396+
1397+
return ret;
1398+
});
1399+
1400+
// Sort by value
1401+
temp.sort(function (a, b) {
1402+
return a.value - b.value;
1403+
});
1404+
1405+
// Ok, now we have an array of all srcset values
1406+
for ( var j = 0; j < temp.length; j++ ) {
1407+
var el = temp[ j ];
1408+
1409+
if ( ( el.postfix === 'w' && el.value >= windowWidth ) || ( el.postfix === 'x' && el.value >= pxRatio ) ) {
1410+
found = el;
1411+
break;
1412+
}
1413+
}
1414+
1415+
// If not found, take the last one
1416+
if ( !found && temp.length ) {
1417+
found = temp[ temp.length - 1 ];
1418+
}
1419+
1420+
if ( found ) {
1421+
slide.src = found.url;
1422+
1423+
// If we have default width/height values, we can calculate height for matching source
1424+
if ( slide.width && slide.height && found.postfix == 'w' ) {
1425+
slide.height = ( slide.width / slide.height ) * found.value;
1426+
slide.width = found.value;
1427+
}
1428+
}
1429+
}
1430+
13701431
slide.$placeholder = $('<div class="fancybox-placeholder"></div>')
13711432
.hide()
13721433
.appendTo( slide.$slide );
@@ -1415,64 +1476,8 @@
14151476

14161477
setBigImage : function ( slide ) {
14171478

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-
}
1446-
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-
}
1475-
}
1479+
var self = this;
1480+
var $img = $('<img />');
14761481

14771482
slide.$image = $img
14781483
.one('error', function() {
@@ -1493,8 +1498,8 @@
14931498
slide.width = this.naturalWidth;
14941499
slide.height = this.naturalHeight;
14951500

1496-
if ( srcset ) {
1497-
$img.attr('srcset', srcset);
1501+
if ( slide.opts.image.srcset ) {
1502+
$img.attr('sizes', '100vw').attr('srcset', slide.opts.image.srcset);
14981503
}
14991504

15001505
self.afterLoad( slide );
@@ -1508,7 +1513,7 @@
15081513

15091514
})
15101515
.addClass('fancybox-image')
1511-
.attr('src', src || slide.src)
1516+
.attr('src', slide.src)
15121517
.appendTo( slide.$placeholder );
15131518

15141519
if ( $img[0].complete ) {

0 commit comments

Comments
 (0)