Commit 92830760 authored by colmoneill's avatar colmoneill

images loaded script dependency, responsive tests begin

parent 5d2feca2
......@@ -432,6 +432,9 @@ h2.animated_title:nth-of-type(6){
right: 20px;
color: teal;
font-family: junicodeboldcondensed;
background: rgba(255, 255, 255, 0.5);
padding: 10px;
z-index: 3;
}
div.text-body{
position: fixed;
......@@ -449,7 +452,7 @@ div.text-body{
font-family: junicoderegularcondensed;
}
div.text-body:hover{
z-index: 2;
z-index: 6;
}
#reveal{
......@@ -463,18 +466,21 @@ div.text-body:hover{
bottom: 180px;
outline: 3px solid teal;
padding: 30px;
z-index: 1;
z-index: 5;
font-family: junicodeboldcondensed;
}
nav{
position: fixed;
right: 20px;
bottom: 120px;
bottom: 130px;
/* width: 60%;
margin-left: 20%; */
color: teal;
font-size: 32px;
background: rgba(255, 255, 255, 0.8);
z-index: 3;
padding: 10px;
}
nav a{
......@@ -502,11 +508,22 @@ a:visited{
font-size: 36px;
}
/* div.img-gallery{
width: 1200px;
.grid-item { width: 400px; }
.grid-item--width2 { width: 800px; }
.grid-item--height2 { height: 800px; }
div.img-gallery{
width: 100%;
margin-top: 60px;
margin-left: 20px;
} */
margin-left: 0px;
}
div.img-gallery img{
width: calc(100% - 10px);
margin-right: 10px;
margin-bottom: 10px;
}
/* div.img-gallery img{
width: 32%;
......@@ -515,8 +532,6 @@ a:visited{
margin-bottom: 10px;
} */
.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }
@media only screen and (max-width: 1550px) {
div.animation-container{
......@@ -577,17 +592,7 @@ a:visited{
font-size: 26px;
warning
}
div.img-gallery{
width: 100%;
margin-top: 60px;
margin-left: 0px;
}
div.img-gallery img{
width: 96%;
float: left;
margin-right: 2%;
margin-left: 2%;
margin-bottom: 5px;
}
.grid-item { width: 100%; }
.grid-item--width2 { width: 100%; }
.grid-item--height2 { height: auto; }
}
/*!
* imagesLoaded PACKAGED v4.1.4
* JavaScript is all like "You images are done yet or what?"
* MIT License
*/
!function(e,t){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",t):"object"==typeof module&&module.exports?module.exports=t():e.EvEmitter=t()}("undefined"!=typeof window?window:this,function(){function e(){}var t=e.prototype;return t.on=function(e,t){if(e&&t){var i=this._events=this._events||{},n=i[e]=i[e]||[];return n.indexOf(t)==-1&&n.push(t),this}},t.once=function(e,t){if(e&&t){this.on(e,t);var i=this._onceEvents=this._onceEvents||{},n=i[e]=i[e]||{};return n[t]=!0,this}},t.off=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){var n=i.indexOf(t);return n!=-1&&i.splice(n,1),this}},t.emitEvent=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){i=i.slice(0),t=t||[];for(var n=this._onceEvents&&this._onceEvents[e],o=0;o<i.length;o++){var r=i[o],s=n&&n[r];s&&(this.off(e,r),delete n[r]),r.apply(this,t)}return this}},t.allOff=function(){delete this._events,delete this._onceEvents},e}),function(e,t){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return t(e,i)}):"object"==typeof module&&module.exports?module.exports=t(e,require("ev-emitter")):e.imagesLoaded=t(e,e.EvEmitter)}("undefined"!=typeof window?window:this,function(e,t){function i(e,t){for(var i in t)e[i]=t[i];return e}function n(e){if(Array.isArray(e))return e;var t="object"==typeof e&&"number"==typeof e.length;return t?d.call(e):[e]}function o(e,t,r){if(!(this instanceof o))return new o(e,t,r);var s=e;return"string"==typeof e&&(s=document.querySelectorAll(e)),s?(this.elements=n(s),this.options=i({},this.options),"function"==typeof t?r=t:i(this.options,t),r&&this.on("always",r),this.getImages(),h&&(this.jqDeferred=new h.Deferred),void setTimeout(this.check.bind(this))):void a.error("Bad element for imagesLoaded "+(s||e))}function r(e){this.img=e}function s(e,t){this.url=e,this.element=t,this.img=new Image}var h=e.jQuery,a=e.console,d=Array.prototype.slice;o.prototype=Object.create(t.prototype),o.prototype.options={},o.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},o.prototype.addElementImages=function(e){"IMG"==e.nodeName&&this.addImage(e),this.options.background===!0&&this.addElementBackgroundImages(e);var t=e.nodeType;if(t&&u[t]){for(var i=e.querySelectorAll("img"),n=0;n<i.length;n++){var o=i[n];this.addImage(o)}if("string"==typeof this.options.background){var r=e.querySelectorAll(this.options.background);for(n=0;n<r.length;n++){var s=r[n];this.addElementBackgroundImages(s)}}}};var u={1:!0,9:!0,11:!0};return o.prototype.addElementBackgroundImages=function(e){var t=getComputedStyle(e);if(t)for(var i=/url\((['"])?(.*?)\1\)/gi,n=i.exec(t.backgroundImage);null!==n;){var o=n&&n[2];o&&this.addBackground(o,e),n=i.exec(t.backgroundImage)}},o.prototype.addImage=function(e){var t=new r(e);this.images.push(t)},o.prototype.addBackground=function(e,t){var i=new s(e,t);this.images.push(i)},o.prototype.check=function(){function e(e,i,n){setTimeout(function(){t.progress(e,i,n)})}var t=this;return this.progressedCount=0,this.hasAnyBroken=!1,this.images.length?void this.images.forEach(function(t){t.once("progress",e),t.check()}):void this.complete()},o.prototype.progress=function(e,t,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded,this.emitEvent("progress",[this,e,t]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,e),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&a&&a.log("progress: "+i,e,t)},o.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(e,[this]),this.emitEvent("always",[this]),this.jqDeferred){var t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},r.prototype=Object.create(t.prototype),r.prototype.check=function(){var e=this.getIsImageComplete();return e?void this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),void(this.proxyImage.src=this.img.src))},r.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},r.prototype.confirm=function(e,t){this.isLoaded=e,this.emitEvent("progress",[this,this.img,t])},r.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},r.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},r.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},r.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype=Object.create(r.prototype),s.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url;var e=this.getIsImageComplete();e&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},s.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype.confirm=function(e,t){this.isLoaded=e,this.emitEvent("progress",[this,this.element,t])},o.makeJQueryPlugin=function(t){t=t||e.jQuery,t&&(h=t,h.fn.imagesLoaded=function(e,t){var i=new o(this,e,t);return i.jqDeferred.promise(h(this))})},o.makeJQueryPlugin(),o});
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -40,9 +40,14 @@ document.addEventListener("DOMContentLoaded", function() {
$('#reveal-body').slideToggle();
}
);
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 400,
percentPosition: true,
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
});
......@@ -72,15 +72,15 @@
<div class="grid img-gallery">
<div class="grid-item"><img src="assets/imgs/1.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/1b.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/2.jpg" alt=""></div>
<div class="grid-item grid-item--height2"><img src="assets/imgs/1b.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/2c.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/3.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/3a.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/4d.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/5e.jpg" alt=""></div>
<div class="grid-item grid-item--width2"><img src="assets/imgs/5e.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/6f.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/7g.jpg" alt=""></div>
<div class="grid-item grid-item--width2"><img src="assets/imgs/7g.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/8h.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/a1.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/a2.jpg" alt=""></div>
......@@ -93,6 +93,7 @@
</div>
<script src="assets/js/typed.js"></script>
<script src="assets/js/masonry.min.js"></script>
<script src="assets/js/imagesloaded.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment