Added image examples

EladIsraeli · Jan 6, 2015 · 8439412 · 8439412
1 parent 01b79d1
commit 8439412
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 0 deletions.
diff --git a/pictureart/js/main.js b/pictureart/js/main.js
@@ -0,0 +1,25 @@
+'use strict';
+
+var img = document.querySelector('img');
+var imgSrc = document.querySelector('#imgSrc');
+var imgNaturalWidth = document.querySelector('#imgNaturalWidth');
+var imgWidth = document.querySelector('#imgWidth');
+
+var dpr = document.querySelector('#devicePixelRatio');
+var viewportWidth = document.querySelector('#viewportWidth');
+var availableWidth = document.querySelector('#availableWidth');
+
+function displayData(){
+  imgSrc.innerHTML = '<a href="' + img.currentSrc + '">' +
+    img.currentSrc.replace(/^.*[\\\/]/, '') + '</a>';
+  imgNaturalWidth.textContent = img.naturalWidth;
+  imgWidth.textContent = img.width;
+  dpr.textContent = window.devicePixelRatio;
+  viewportWidth.textContent = document.documentElement.clientWidth;
+  availableWidth.textContent = window.screen.availWidth;
+}
+
+img.onload = window.onresize = displayData;
+
+// in case image already loaded -- is there a better way?
+displayData();
diff --git a/pictureart/large.jpg b/pictureart/large.jpg
diff --git a/pictureart/medium.jpg b/pictureart/medium.jpg
diff --git a/pictureart/small.jpg b/pictureart/small.jpg
diff --git a/sizeswvalues/js/main.js b/sizeswvalues/js/main.js
@@ -0,0 +1,27 @@
+'use strict';
+
+var img = document.querySelector('img');
+var imgSrc = document.querySelector('#imgSrc');
+var imgNaturalWidth = document.querySelector('#imgNaturalWidth');
+var imgWidth = document.querySelector('#imgWidth');
+
+var dpr = document.querySelector('#devicePixelRatio');
+var minimumWidth = document.querySelector('#minimumWidth');
+var viewportWidth = document.querySelector('#viewportWidth');
+var availableWidth = document.querySelector('#availableWidth');
+
+function displayData(){
+  imgSrc.innerHTML = '<a href="' + img.currentSrc + '">' +
+    img.currentSrc.replace(/^.*[\\\/]/, '') + '</a>';
+  imgNaturalWidth.textContent = img.naturalWidth;
+  imgWidth.textContent = img.width;
+  dpr.textContent = window.devicePixelRatio;
+  minimumWidth.textContent =  img.width * window.devicePixelRatio;
+  viewportWidth.textContent = document.documentElement.clientWidth;
+  availableWidth.textContent = window.screen.availWidth;
+}
+
+img.onload = window.onresize = displayData;
+
+// in case image already loaded -- is there a better way?
+displayData();
diff --git a/srcsetwvalues/js/main.js b/srcsetwvalues/js/main.js
@@ -0,0 +1,27 @@
+'use strict';
+
+var img = document.querySelector('img');
+var imgSrc = document.querySelector('#imgSrc');
+var imgNaturalWidth = document.querySelector('#imgNaturalWidth');
+var imgWidth = document.querySelector('#imgWidth');
+
+var dpr = document.querySelector('#devicePixelRatio');
+var minimumWidth = document.querySelector('#minimumWidth');
+var viewportWidth = document.querySelector('#viewportWidth');
+var availableWidth = document.querySelector('#availableWidth');
+
+function displayData(){
+  imgSrc.innerHTML = '<a href="' + img.currentSrc + '">' +
+    img.currentSrc.replace(/^.*[\\\/]/, '') + '</a>';
+  imgNaturalWidth.textContent = img.naturalWidth;
+  imgWidth.textContent = img.width;
+  dpr.textContent = window.devicePixelRatio;
+  minimumWidth.textContent =  img.width * window.devicePixelRatio;
+  viewportWidth.textContent = document.documentElement.clientWidth;
+  availableWidth.textContent = window.screen.availWidth;
+}
+
+img.onload = window.onresize = displayData;
+
+// in case image already loaded -- is there a better way?
+displayData();