Develop Reference

Hide image with play button

The play button image hides when I click it, how do I also have the green image hide?
That is all I am trying to do in the code.
Hide the green image after the play image is clicked.
Currently only the play image hides, how to I have the green image hide aftr the play image is clicked?
https://jsfiddle.net/075anu3x/
css green image
.video-wrapper::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 1px solid #333;
pointer-events: none;
background: url(https://i.imgur.com/ShS6nAO.png) no-repeat;
background-size: contain;
background-position: center;
}
javascript
const manageCover = (function makeManageCover() {
const events = {};
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function fadeVideoIn(cover) {
hide(cover);
const videoWrapper = document.querySelector(".video-wrapper");
videoWrapper.classList.add("slide");
return videoWrapper;
}
function showVideo(videoWrapper) {
const thewrap = videoWrapper.parentElement.querySelector(".wrap");
show(thewrap);
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const videoWrapper = fadeVideoIn(cover);
showVideo(videoWrapper);
cover.dispatchEvent(events.afterClickCover);
}
function init(callback) {
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
events.afterClickCover = new Event("afterClickCover");
cover.addEventListener("afterClickCover", callback);
}
return {
init
};
}());

maybe you can try add background: unset; to .video-wrapper.slide::after class

for your issue, it is easier to make the green background with the button as the same component.
The reason why the green background doesn't get away:
It is set up as a pseudo-class under video-wrapper
In my experience, javascript can't reach a pseudo-class, even if it is possible, it will make your code super messy and hard to read and follow.
Suggestion:
Remove the green background from the video wrapper class and move it to the button.
See here
HTML
<div class="container">
<div class="video-wrapper">
<div class="ratio-keeper">
<div class="wrap hide">
<div class="video video-frame"></div>
</div>
</div>
</div>
<div class="play">
<button type="button" aria-label="Open"></button>
</div>
</div>
CSS
.play {
position: relative;
width: 100vw;
height: 100vh;
}
.play button {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
animation: rotate 700ms linear forwards;
border-color: red transparent red transparent;
}
.play::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 1px solid #333;
pointer-events: none;
background: url(https://i.imgur.com/ShS6nAO.png) no-repeat;
background-size: contain;
background-position: center;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
99.9% {
border-color: red transparent red transparent;
pointer-events: none;
}
100% {
transform: rotate(360deg);
border-color: blue;
}
}
.play button:hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}
.play button:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.play button::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid;
transform: translateX(4px);
animation: triangle 700ms linear forwards;
}
#keyframes triangle {
0% {
opacity: 0;
}
99.9% {
opacity: 0;
}
100% {
border-left-color: blue;
opacity: 1;
}
}
.hide {
display: none;
}

Can't hide isotope perfectly

I create a website on which there is a lot of boxes created with 'Isotope', it's works perfectly but I would like these boxes are totally hidden on the first load of my page and brefore i click on buttons.
It's seems to work but the 4 boxes from examples appear et dispear quickly on first load .
Any idea to fix that ?
Thanks for your help
Here my code :
https://codepen.io/Roberta3d/pen/ZwvzJB
and here too
**HTML**
<!doctype html>
<html class="export" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Filter & sort magical layouts">
<title>Isotope · Filter & sort magical layouts</title>
<!-- Isotope does not require any CSS files -->
<link rel="stylesheet" href="css/isotope-docs.css?6" media="screen">
</head>
<body class="page--index">
<div class="button-group filters-button-group">
<button class="button is-checked" data-filter=".dessin"> DESSIN</button>
<button class="button" data-filter=".troisd"> 3D </button>
<button class="button" data-filter=".graphisme"> GRAPHISME </button>
</div>
<div class="grid">
<div class="element-item dessin " data-category="dessin"> </div>
<div class="element-item troisd " data-category="troisd"> </div>
<div class="element-item graphisme " data-category="graphisme"> </div>
<div class="element-item graphisme " data-category="graphisme"> </div>
</div>
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.js"></script>
<!-- Looking for isotope.js? Use isotope.pkgd.min.js -->
<!-- Isotope does NOT require jQuery. But it does make things easier -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/isotope-docs.min.js?6"></script>
</body>
</html>
CSS
/* ---- counting ---- */
.grid--counting {
counter-reset: item;
}
.grid--counting .grid-item:before {
counter-increment: item;
content: counter(item);
display: block;
color: #555;
padding-top: 0.2em;
text-align: center;
font-size: 18px;
}
/* ---- horizontal ---- */
/* horizontal examples need height */
.grid--horizontal {
height: 334px;
}
/* ---- static banner ---- */
.grid--has-banner {
position: relative;
}
.static-banner {
position: absolute;
left: 10px;
top: 10px;
background: hsla(210, 100%, 50%, 0.8);
z-index: 1;
padding: 2px 20px;
color: white;
pointer-events: none;
}
/* ---- fixed-width ---- */
.grid--fixed-width {
width: 304px;
}
/* ---- stamp ---- */
.grid--has-stamp {
position: relative;
}
/* ---- fit-width ---- */
/* centered */
.grid--fit-width {
margin: 0 auto;
}
/* grid-image-item
------------------------- */
.grid-image-item {
float: left;
}
.grid-image-item img {
display: block;
max-width: 100%;
}
/* grid-item
------------------------- */
.grid-item--gigante {
width: 150px;
height: 200px;
}
------------------------------------------------------------------------------------------------------------------ */
.button {
display: inline-block;
padding: 10px 18px;
margin-bottom: 10px;
background: #EEE;
border: none;
border-radius: 7px;
background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
color: #222;
font-family: sans-serif;
font-size: 16px;
text-shadow: 0 1px white;
cursor: pointer;
}
.button:hover {
background-color: #8CF;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #222;
}
.button:active,
.button.is-checked {
background-color: #28F;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
/* ---- button-group ---- */
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
float: left;
border-radius: 0;
margin-left: 0;
margin-right: 1px;
}
.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
/* ---- isotope ---- */
.grid {
border: 1px solid #333;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .element-item ---- */
.element-item {
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 5px;
padding: 10px;
background: #888;
color: #262524;
}
.element-item > * {
margin: 0;
padding: 0;
}
.element-item .name {
position: absolute;
left: 10px;
top: 60px;
text-transform: none;
letter-spacing: 0;
font-size: 12px;
font-weight: normal;
}
.element-item .symbol {
position: absolute;
left: 10px;
top: 0px;
font-size: 42px;
font-weight: bold;
color: white;
}
.element-item .number {
position: absolute;
right: 8px;
top: 5px;
}
.element-item .weight {
position: absolute;
left: 10px;
top: 76px;
font-size: 12px;
}
.element-item.troisd { background: #F00; background: hsl( 0, 100%, 50%); }
.element-item.graphisme { background: #F80; background: hsl( 36, 100%, 50%); }
.element-item.dessin { background: #08F; background: hsl( 216, 100%, 50%); }
JAVASCRIPT
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows'
});
var filterFns = {
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// bind filter button click
$(document).ready(function() {
$('.filters-button-group').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
$('.element-item').hide();
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
return false;
});
});
});

You mean the "flicker" that happens at the start?
Move
$('.element-item').hide();
to to the top inside
$(document).ready(function() {});

Linking video to an HTML anchor tag

I am trying to make a website that has an anchor link to "watch the video", what I want to do is to link a video to the anchor tag and when someone clicks on the link, the video appears on the same webpage but upon webpage and behind the video, page should be lightened. Help me to figure this out.
<div class="button">
Watch Video
Explore More
</div>

var $iframe = $('iframe'),
$videoLink = $('.video-link'),
playerTemplate = '<div class="player"><div class="player__video"><div class="video-filler"></div><button class="video-close">×</button><iframe class="video-iframe" src="{{iframevideo}}" frameborder="0" allowfullscreen></iframe></div><div/>';
$videoLink.on('click', function(e) {
var localTemplate = '',
videoWidth = parseInt($(this).data('width')),
videoHeight = parseInt($(this).data('height')),
videoAspect = ( videoHeight / videoWidth ) * 100,
// elements
$player = null,
$video = null,
$close = null,
$iframe = null;
e.preventDefault();
localTemplate = playerTemplate.replace('{{iframevideo}}', $(this).prop('href'));
$player = $(localTemplate);
$player
.find('.video-filler')
.css('padding-top', videoAspect + '%');
$close = $player
.find('.video-close')
.on('click', function() {
$(this).off().closest('.player').hide().remove();
});
$player.appendTo('body').addClass('js--show-video');
});
.video-link {
display: inline-block;
padding: 5px 10px;
border-radius: 4px;
text-decoration: none;
color: white;
background-color: #f03;
box-shadow: 0 5px 10px -3px rgba(0,0,0,.5);
}
/* --- */
.player {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,1);
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,1) 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%,rgba(0,0,0,1) 100%);
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.player__video {
position: relative;
top: 50%;
left: 50%;
width: auto;
max-width: 75%;
background-color: #fff;
box-shadow: 0 0 50px rgba(0,0,0,.95);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.js--show-video { opacity: 1; }
.video-filler {
display: block;
width: 100%;
}
.video-close {
position: absolute;
z-index: 0;
top: 0;
right: -30px;
padding: 5px 10px;
border: none;
outline: none;
border-radius: 0 50% 50% 0;
cursor: pointer;
font-size: 24px;
color: #000;
background-color: #fff;
box-shadow: 0 0 20px rgba(0,0,0,.75);
}
.video-iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 10px solid #fff;
}
<a class="video-link" href="https://www.youtube.com/embed/ONaPq2L-MRg?html5=1" data-width="1920" data-height="1080">Open video</a>

You do need a video tag and also use some JavaScript.
Not sure if that what you meant, but here is a simple implemnation of what I think you meant.
<a href="javascript:openVideo()"
https://jsfiddle.net/awkbawgs/2/

How do I get fancybox gallery to respect Isotope combination filtering in a gallery?

The code that I'm using to add the data-fancybox-group attribute of "gallery" is only applying to the last filter button I clicked, instead of the combination of filters that are currently being applied. You can filter images with isotope, and then click any of them to load into lightbox. If you go here http://codepen.io/benslocum/pen/jVQjpo and choose sink then you can click one of the sink images, and scroll through just sinks by hitting left or right (or scrolling with your mousewheel). So far, so good. If you then click kitchen you'll see the images are now filtered to JUST kitchen sinks. But, if you click one of those images, the gallery that you'll be scrolling through will be all KITCHEN images... including non-sinks. It appears that somewhere around line 32 in JS I am causing the fancybox gallery to only be applied to the last filter button you click, and not the cumulative filterValue that takes into account all the filters that are checked. What do I need to change to make the data-fancybox-group attribute of gallery apply to the combination filter, and not just the last filter that was checked?
In case that codepen goes away, here is the JS
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.optiones',
layoutMode: 'fitRows'
});
// random order
$grid.isotope({ sortBy : 'random' });
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
// store filter for each group
var filters = {};
$('.filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
// set filter for Isotope
$grid.isotope({ filter: filterValue });
// make the selected images part of fancybox gallery
var selector = $(this).attr('data-filter');
if(selector == "*"){
$(".fancybox").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox").attr("data-fancybox-group", selector);
}
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
$(".fancybox").fancybox({
arrows : false, closeClick : true, closeBtn : false
});
// ignoring my NOT selection... trying to make the anyfeature-button NOT be among the buttons that forces the detail button to be selected
$('#feature').not('#anyfeature-button').on('click', function(e){
$('#roomdetails') .find('.is-checked').removeClass('is-checked');
$('#detail-button') .addClass('is-checked');
$('#detail-button').trigger('click');
});
$('#fullroom-button').on('click', function(e){
$('#feature') .find('.is-checked').removeClass('is-checked');
$('#anyfeature-button') .addClass('is-checked');
$('#anyfeature-button').trigger('click');
});
$('.generic-location').on('click', function(e){
$('#room') .find('.is-checked').removeClass('is-checked');
$('#anyroom-button') .addClass('is-checked');
$('#anyroom-button').trigger('click');
});
$('#bathshower-button').on('click', function(e){
$('#room') .find('.is-checked').removeClass('is-checked');
$('#bathroom-button') .addClass('is-checked');
$('#bathroom-button').trigger('click');
});
$('filters a').click(function(event){
event.preventDefault()
});
And here's shorter version of the html
<div id="header"><img src="http://sales.newpasaderahomes.com/wp-content/uploads/2015/05/Pasadera_Logo_Horiz.png" alt="Logo" class="logo-img">
<div class="filters">
<div class="ui-group" id="roomdetails">
<div class="button-group js-radio-button-group" data-filter-group="type">
<button class="button is-checked" id="both-button" data-filter="">both</button>
<button class="button" id="fullroom-button" data-filter=":not(.detail)">full room</button>
<button class="button" id="detail-button" data-filter=".detail">detail</button>
</div>
</div>
<div class="ui-group">
<h3>Room</h3>
<div class="button-group js-radio-button-group" data-filter-group="room">
<button class="button is-checked" id="anyroom-button" data-filter="">any</button>
<button class="button" data-filter=".kitchen">kitchen</button>
<button class="button" id="bathroom-button" data-filter=".bathroom">bathroom</button>
<button class="button" data-filter=":not(.kitchen):not(.bathroom)">other</button>
</div>
</div>
<div class="ui-group">
<h3>Plan</h3>
<div class="button-group js-radio-button-group" data-filter-group="plan">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".Plan1">plan 1</button>
<button class="button" data-filter=".Plan2">plan 2</button>
<button class="button" data-filter=".Plan3">plan 3</button>
<button class="button" data-filter=".Plan4">plan 4</button>
<button class="button" data-filter=".Plan5">plan 5</button>
</div>
</div>
<div class="ui-group" id="feature">
<h3>Feature</h3>
<div class="button-group js-radio-button-group" data-filter-group="feature">
<button class="button anyfeature-button is-checked" id="anyfeature-button" data-filter="">any</button>
<button class="button" data-filter=".tile">tile</button>
<button class="button" data-filter=".hardware">hardware</button>
<button class="button" data-filter=".door">door</button>
<button class="button" data-filter=".sink">sink</button>
<button class="button generic-location" data-filter=".lighting">lighting</button>
<button class="button generic-location" data-filter=".handrail">handrail</button>
<button class="button generic-location" id="wallceiling-button" data-filter=".wall-ceiling">wall/ceiling</button>
<button class="button" id="bathshower-button" data-filter=".bath-shower">tub/shower</button>
<button class="button" data-filter=".cabinet-interior">cabinet interior</button>
</div>
</div>
</div>
</div>
<div class="gridholder">
<div class="grid">
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Bath-Vanity-2-Kichler-6122-NI.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Bath-Vanity-2-Kichler-6122-NI.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Dining-Room-Transglobe-6545-BN.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Dining-Room-Transglobe-6545-BN.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Front-Porch-Kichler-10953-TZ.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Front-Porch-Kichler-10953-TZ.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Garage-Entry-Kichler-10923-TZ.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Garage-Entry-Kichler-10923-TZ.jpg"></a></div>
<div class="optiones Plan1 detail kitchen sink tile "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2597.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2597.jpg"></a></div>
<div class="optiones Plan1 detail wall-ceiling "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2602.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2602.jpg"></a></div>
<div class="optiones Plan1 detail hardware "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2603.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2603.jpg"></a></div>
<div class="optiones Plan1 detail kitchen sink tile "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2606.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2606.jpg"></a></div>
<div class="optiones Plan2 detail kitchen "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2664.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2664.jpg"></a></div>
<div class="optiones Plan2 cabinet-interior detail kitchen "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2665.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2665.jpg"></a></div>
</div> </div>
</div>
And finally, a little css
* { box-sizing: border-box; }
body {
font-family: sans-serif;
}
#header {
background-color: #00A8A5;
height: 115px;
width: 100%;
}
.logo-img {
margin: 10px;
float: left;
max-width: 350px;
}
h1 {
margin: 0;
padding: 0;
}
/* ---- button ---- */
.filters {
position: relative;
top: 20px;
left: 30px;
}
.button {
display: inline-block;
padding: 0.5em .8em;
background: #EEE;
border: none;
border-radius: 7px;
background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.15) );
color: #222;
font-family: sans-serif;
font-size: 16px;
text-shadow: 0 1px white;
cursor: pointer;
}
.button:hover {
background-color: #f7e7ba;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #222;
}
.button:active,
.button.is-checked {
background-color: #fdbe10;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
/* ---- button-group ---- */
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
float: left;
border-radius: 0;
margin-left: 0;
margin-right: none;
}
.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
/* ---- isotope ---- */
.grid {
background: lightgray;
max-width: 1920px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ui group */
.ui-group {
display: inline-block;
}
.ui-group h3 {
display: inline-block;
vertical-align: top;
line-height: 5px;
margin-right: 0.2em;
font-size: 16px;
}
.ui-group .button-group {
display: inline-block;
margin-right: 20px;
}
/* options */
.optiones {
margin: 5px;
float: left;
}
.optiones img {
display: block;
max-width: 100%;
}
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_sprite.png);
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_loading.gif) center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url(http://benslocum.com/pasadera-options/fancybox/source/blank.gif); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: visible !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_overlay.png);
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}
/*Retina graphics!*/
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_sprite#2x.png);
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_loading#2x.gif);
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}
}
In case it helps anyone else, when I was just trying to get Fancybox to respect ANY filtering at all, I found these. None of them worked "as is" but when I took a piece of it
var selector = $(this).attr('data-filter');
if(selector == "*"){
$(".fancybox").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox").attr("data-fancybox-group", selector);
}
And put it in the code that was already doing stuff with filters, it worked to the extent that I explained above.
Now for the things that didn't work for me, but put me on the right track
$('filters a').click(function(event){
event.preventDefault()
var selector = $(this).attr('data-filter');
if(selector == "*"){
$(".fancybox").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox").attr("data-fancybox-group", selector);
}
});
Neither did this
$('#filters a').on("click", function(){
var selector = $(this).attr('data-option-value');
$('#container').isotope({ filter: selector }, function(){
if(selector == "*"){
$(".fancybox-thumbs").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox-thumbs").attr("data-fancybox-group", selector);
}
});
return false;
});
Here's one more that I found and tried to customize... it didn't work for me either.
// filter buttons
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$('#isotopegallery').isotope({ filter: selector }, function(){
if(selector == "*"){
$(".fancybox").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox").attr("data-fancybox-group", selector);
}
});
return false;
});
Anyone have an idea on how to make this work with my setup?

Can't add this piece of jQuery code in the sample

I'm having a bit of trouble adding the following piece of jQuery code in the code. It basically adds dots to words. I tried the following jQuery and when added into the click function it doesn't work. But yet outside of the click function it works.
How do I add it in so that only once the button is clicked, will step 1 appear with the dots following. After 10 seconds make it move to step 2 doing the same things again like step 1. Until I reach step 5 which will show completed and stop flashing?
var dots = 0;
setInterval (type, 1000);
function type()
{
if(dots < 5)
{
$('#dots').append('.');
dots++;
}
else
{
$('#dots').html('');
dots = 0;
}
}
This is what I've managed so far:
jQuery(function($) {
// all jQuery code goes here
$("a").click(function() {
// do something here
// when any anchor is clicked
$("#flash").html("STEP1"); // content inside #myElement will be replaced with that specified
var flash = $('#flash');
function runIt() {
flash.animate({
opacity: '+=1'
}, 400);
flash.animate({
opacity: '+=1'
}, 200);
flash.animate({
opacity: '-=0.9'
}, 600, runIt);
}
runIt();
});
});
.test {
float: left;
}
#flash {
padding: 10px;
}
.content {
font-size: 25px;
font-weight: bold;
width: 100px;
left: 100px;
top: 100px;
color: red;
}
.classname {
-moz-box-shadow: inset 0px 1px 0px 0px #fceaca;
-webkit-box-shadow: inset 0px 1px 0px 0px #fceaca;
box-shadow: inset 0px 1px 0px 0px #fceaca;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffce79), color-stop(1, #eeaf41));
background: -moz-linear-gradient( center top, #ffce79 5%, #eeaf41 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffce79', endColorstr='#eeaf41');
background-color: #ffce79;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
text-indent: 0;
border: 1px solid #eeb44f;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 40px;
line-height: 40px;
width: 100px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #ce8e28;
}
.classname:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eeaf41), color-stop(1, #ffce79));
background: -moz-linear-gradient( center top, #eeaf41 5%, #ffce79 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeaf41', endColorstr='#ffce79');
background-color: #eeaf41;
}
.classname:active {
position: relative;
top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">TEXT</div>
<div class="test">
<div id="flash">Start<span id="dots"></span></div>
</div>
It's basically suppose to like a progress bar with 5 different status, start and finish do not flash, steps in between start and finish flash to show progress

Does this work for you?
var dots = 0;
var step = 1;
var flag = false;
var $all = $('#all');
var $flash = $('#flash');
var $dots = $('#dots');
function type()
{
if(dots < 5)
{
$dots.append('.');
dots++;
setTimeout(type, 1000);
}
else
{
$flash.html('Completed');
$dots.html('');
flag = true;
dots = 0;
}
}
function start() {
$flash.html("STEP"+step);
step++;
function runIt() {
$all.animate({opacity:'+=1'}, 400);
$all.animate({opacity:'+=1'}, 200);
if (flag){
return flag = false;
}
$all.animate({opacity:'-=0.9'}, 600, runIt);
}
runIt();
type();
}
$('#text').on('click', start);
I also made some changes in HTML and CSS. Everything is in the demo:
DEMO