2024
Graffiti Walls
.progress-button button {
border: 2px solid #1ECD97;
color: #1ECD97 }
.progress-button button:hover {
background-color: #1ECD97 }
.ri-grid ul li {
margin: 0px !important;
}
.brick {
background: #f5f5f5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
color: #333;
border: none;
}
.brick {
width: 221.2px;
}
.info {
padding: 15px;
color: #333;
}
.brick img {
margin: 0px;
padding: 0px;
display: block;
}
@keyframes start {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
@-webkit-keyframes start {
from {
-webkit-transform: scale(0);
}
to {
-webkit-transform: scale(1);
}
}
.free-wall .brick[data-state="init"] {
display: none;
}
.free-wall .brick[data-state="start"] {
display: block;
animation: start 0.5s;
-webkit-animation: start 0.5s;
}
.free-wall .brick[data-state="move"] {
transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s;
-webkit-transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s;
}
jQuery('#freewall').hide();
jQuery('#awl-loader').show();
jQuery( document ).ready(function() {
jQuery('#freewall').show();
jQuery('#awl-loader').hide();
var wall = new Freewall("#freewall");
wall.reset({
animate: false,
cellW: 200, // function(container) {return 100;} 200 to 300
cellH: 'auto', // function(container) {return 100;}
delay: 50, // slowdown active block;
engine: 'giot',
fixSize: null, // resize + adjust = fill gap;
//fixSize: 0, resize but keep ratio = no fill gap;
//fixSize: 1, no resize + no adjust = no fill gap;
gutterX: 0, // width spacing between blocks;
gutterY: 0, // height spacing between blocks;
keepOrder: true, // images show as uploaded
selector: '.brick',
draggable: false,
cacheSize: true, // caches the original size of block;
rightToLeft: false,
bottomToTop: false,
onGapFound: function() {},
onComplete: function() {},
onResize: function() {
wall.fitWidth();
},
onBlockDrag: function() {},
onBlockMove: function() {},
onBlockDrop: function() {},
onBlockReady: function() {},
onBlockFinish: function() {},
onBlockActive: function() {},
onBlockResize: function() {}
});
wall.container.find('.brick a').load(function() {
wall.fitWidth();
});
wall.container.find('.brick a').resize();
// lightbox
jQuery(".pw-lightbox").colorbox({
rel:'pw-lightbox',
});
jQuery(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
jQuery(".vemio").colorbox({iframe:true, innerWidth:640, innerHeight:390});
});
