In my web application initially showing Image with overlapping the video when the user click on it the form will show up after submitting the form storing the value in cookie for One day. If cookie have value the YouTube video will show. So that user can watch this is the functionality we have.
The functionality are working but the video are not showing if cookies have value. For this I tried below code.
Here I have submitting the code If cookie have value replacing the YouTube video. It's not working for me. Please suggest us where I went wrong.
<html>
<head>
<title>Set Cookies</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style type="text/css">
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: -60px;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #f7f7f7;
margin: auto;
padding: 20px;
border: 1px solid #888;
max-width: 340px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal{
padding-left: 35px;
padding-right: 35px;
}
#contactform input,select {
height: 40px;
border: 1px solid #C6C6C6;
color: #000;
margin: 5px 0 0;
}
.errorMessage{
color: #d13800;
font-size: 12px;
display: none;
}
.customButton{
background-color: #0095eb !important;
color: #fff !important;
}
</style>
<style type="text/css">
.youTypeLink{
display: none;
}
.thumb {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.thumb li {
width: 193px;
}
.thumb li ~ li {
margin-left: 20px;
}
.thumb .thumbCaption {
padding: 10px 0;
}
.overlay {
position: relative;
}
.overlay .thumbnail {
display: block;
}
.overlay .time {
position: absolute; z-index: 2;
right: 3px; bottom: 3px;
padding: 2px 5px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
}
.overlay .playWrapper {
opacity: 0;
position: absolute; z-index: 1;
top: 0;
width: 192px; height: 109px;
background: rgba(0,0,0,0.6) url("http://wptf.com/wp-content/uploads/2014/05/play-button.png") no-repeat scroll center center / 50px 50px;
}
.playWrapper .playBtn {
position: absolute;
z-index: 2;
width: 50px;
height: 50px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto; /* center */
}
.thumb .overlay:hover .playWrapper {
opacity: 1;
}
</style>
<script>
function setCookie(cname,cvalue,exdays) {
let d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
let user = getCookie("username");
if (user !== "") {
$('#youTubeImage').css({"display":"none !important"});
$('#youTypeLink').css({"display":"initial !important"});
/* player = new YT.Player('player', {
width : '320',
height : '180',
videoId : 'qlEUrEVqDbo',
playerVars: { 'autoplay': 1 },
events : {
'onReady' : onPlayerReady,
'onStateChange' : onPlayerStateChange
}
});*/
console.log(user);
setCookie("username", "cookiesValue", 1);
}else{
$('#youTubeImage').css({"display":"initial"});
$('#youTypeLink').css({"display":"none"});
}
</script>
</head>
<body>
<div>
<ul id="youTubeImage" class="thumb">
<li>
<div class="overlay">
<img class="thumbnail" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" width="192" height="109" alt="">
<span class="time">3:28</span>
<a href="#" class="playWrapper" id="myBtn">
<!--<span class="playBtn"><img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png" width="50" height="50" alt=""></span>-->
</a>
</div>
<div class="thumbCaption">This is the description of the video...</div>
</li>
</ul>
<div class="youTypeLink">
<ul class="thumb">
<li>
<div class="overlay">
<iframe width="370" height="303" src="https://www.youtube.com/embed/OXmIptsCsw0">
</iframe>
</div>
<div class="thumbCaption">This is the description of the video...</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Please suggest us to work properly. If cookie have value show video or else showing image.
Related
I have been looking everywhere for a solution to my problem, but nothing seems to work. It always bugged me that the top of my website always had a gap on the top and all the answers to the problem did nothing. I inspected the website in firefox and found that there was a whitespace between the body and first div (I tried putting the code on the same row but that did nothing). Any Idea on how to remove the whitespace? (I can remove it in inspect on firefox and it goes away there)
Here is the HTML and CSS:
/* CSS Document */
html,
body {
height: 100%;
}
* {
overflow: auto;
margin: 0;
}
body {
margin: 0;
background-color: #111111;
padding: 0;
font-family: verdana;
box-sizing: border-box;
font-size: 1rem;
font-weight: 400;
color: white;
text-align: left;
}
video {
width: 100%;
z-index: 0;
}
.menubar {
left: 100;
}
.ulmenubar {
list-style-type: none;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.ulmenubar a {
float: left;
}
.space {
margin: 0;
padding: 0;
}
.rightside {
float: right;
}
.ulmenubar a {
display: block;
color: whitesmoke;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.ulmenubar a:hover {
color: grey;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #181818;
}
::-webkit-scrollbar-thumb {
background: white;
border-radius: 10px;
}
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
#contact {
width: 200px;
margin-left: auto;
margin-right: auto;
}
#cover {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 5;
width: 100%;
height: 100%;
display: none;
}
<div class="menubar">
<ul class="ulmenubar">
<div class="rightside">
Home
Portfolio
About
Contact
</div>
</ul>
</div>
<div class="space"><video id="background-video" autoplay="" loop="" muted=""><source src="vid.mp4" type="video/mp4"></video></div>
<div id="vids"></div>
<div class="row">
<div class="column">
<img src="https://media0.giphy.com/media/xT8qBoDhee6aWOhLqw/giphy.gif?cid=790b7611a86749120009311d9c18651c96962c8e7e27def2&rid=giphy.gif&ct=g" alt="Sea" style="width:100%">
</div>
<div class="column">
<a onclick="openWin()"><img src="https://media4.giphy.com/media/UxTZDNv0Zej4s/giphy.gif?cid=790b76118b066a194adc23988667623a5aea3c7b55f3c44b&rid=giphy.gif&ct=g" alt="Forest" style="width:100%"></a>
</div>
<div class="column">
<img src="https://media4.giphy.com/media/l41lQIclE3lItAlfq/giphy.gif?cid=ecf05e47mgmmt0kas0kp9zc0435gcanw878chwmk129z9uhf&rid=giphy.gif&ct=g" alt="Sky" style="width:100%">
</div>
</div>
* {
margin: 0px;
padding: 0px;
}
Add this to your CSS
After many hours of trying, I figured out what the problem was. This may not be the case but when I went into the HTML file on text edit, I saw two <body> on the top, I deleted one and also deleted the space between <head> and <body>. It worked.
I have a fairly simple page with a couple divs designed to be pop ups...
I'm having an issue with the .close div located in a jQuery populated popup. A btn is clicked .. jquery brings up a div and then populates it with content from another div.
This all works as expected.
There's a .close div in the popups designed to be, well a close button.
$('body, .close').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('#info').html('').removeClass('pop').fadeOut(300);
$('#pup').children('h1').html('');
$('#pup').fadeOut(300);
$('#cov').fadeOut(300);
console.log('clk');
});
This works perfectly when the .close div is hard coded into the popup itself.. but it will not function in the when content is populated from somewhere else.
Can anyone shed some light on what I'm missing please?
// included so snippet functions....
var cards = $(".smpl");
cards.each(function(i) {
var im = $(this).attr('data-im');
var fadeTime = 180;
$(this).css('background-image', 'url(_core/img/p/' + im + ')')
$(this).delay(fadeTime * i).fadeIn(fadeTime);
});
// loaded #info with content from other divs
$('.about, .cont').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var wht = $(this).attr('data-t');
$('#info').removeClass('pop').html(''); //empty's info popup if its present
$('#pup').hide(); //hides other popup if its present
$('#cov').fadeIn(300);
$('#info').addClass('pop').html($(wht).html()).fadeIn(300);
console.log(wht);
});
// Should close all popups - FAIL for the #info .close div
// ###### this is where something is not right or borken...
$('body, .close').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('#info').html('').removeClass('pop').fadeOut(300);
$('#pup').children('h1').html('');
$('#pup').fadeOut(300);
$('#cov').fadeOut(300);
console.log('clk');
});
$('#info').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('#pup').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
//This opens #pup div
$('.sp, .ai, .ot').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var imgsrc = $(this).attr('data-im');
var longDes = $(this).children('.dspt').attr('data-ld');
$('#cov').fadeIn(300);
$('#pup').addClass('pop');
$('#pup h1').html(longDes);
$('#pup').css('background-image', 'url(_core/img/p/' + imgsrc + ')').fadeIn(300);
});
.nav {
position: absolute;
right: 30px;
top: 20px;
list-style: none;
z-index: 9997;
}
.nav a:link,
.nav a:visited {
display: block;
transition: all 0.5s;
font-size: 13px;
line-height: 22px;
width: 76px;
text-transform: uppercase;
background: #07e;
color: #fff;
padding: 2px 5px;
border-radius: 3px;
height: 25px;
position: relative;
right: 20px;
cursor: pointer;
margin: 5px 0;
text-align: center;
box-shadow: 0 -2px 0 #fff;
}
.smpl {
overflow: hidden;
position: relative;
float: left;
border: 1px solid #aaa;
padding: 0;
display: none;
width: 100%;
max-width: calc((100% - 60px) / 10);
height: auto;
margin: 5px 5px 0 0;
background-size: cover;
background: #aaa;
}
h1.dspt {
position: absolute;
bottom: -50px;
width: 100%;
background: #2d2d2d;
color: #fff;
text-transform: none;
padding: 5px;
opacity: 0;
transition: all .5s;
}
.smpl:hover h1.dspt {
bottom: 0;
transition: all .5s;
background: #07e;
opacity: 0.8;
}
#over,
#cov {
width: 100%;
height: 100%;
background: #aaa;
display: none;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 9991;
opacity: 0.8;
}
#cov {
background: #fffs;
opacity: 0.9;
}
#pup,
#info {
width: 150px;
height: 150px;
background-color: #fff;
display: none;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translate(0, -50%);
z-index: 9998;
opacity: 1;
margin: 0 auto;
border: 1px solid #aaa;
box-shadow: 0 5px 50px #666;
overflow: hidden;
display: none;
}
#pup h1.dspt {
position: absolute;
bottom: -50px;
width: 100%;
background: #2d2d2d;
color: #fff;
text-transform: none;
font-size: 16px;
padding: 15px 40px;
opacity: 0;
transition: all .5s;
text-align: left;
text-shadow: 2px 0 1px #000;
}
#pup:hover h1.dspt {
bottom: 0;
transition: all .5s;
background: #2d2d2d;
opacity: 0.8;
}
#info {
padding: 10px;
overflow-Y: auto;
border: 3px solid #333;
border-radius: 6px;
}
.pop .close {
position: absolute;
top: -40px;
right: -40px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #333;
color: #fff;
opacity: .5;
font-weight: bold;
text-align: center;
font-size: 16px;
line-height: 30px;
transition: all .5s;
cursor: pointer;
}
.pop:hover .close {
top: 10px;
right: 10px;
transition: all .5s;
background: #2d2d2d;
opacity: 0.8;
z-index: 9999;
}
#about,
#cont {
display: none;
background: #fff;
padding: 10px;
position: relative;
text-align: left;
margin: 10px 0 0 0;
border: 1px solid #ddd;
border-radius: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cov"></div>
<div id="info"></div>
<div id="pup">
<h1 class="dspt"></h1>
<div class="close">X</div>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 medium-12 cell masthead">
<div class="base">
<ul class="nav">
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
<div class="large-12 medium-12 cell" id="content">
<div id="about">
<div class="close">X</div>
<h4>about - Info Div</h4>
<p>Hover to see close btn, but it fails to function.
<p>
</div>
<div id="cont">
<div class="close">X</div>
<p>Contact - Info div</p>
<p>Hover to see close btn, but it fails to function.
<p>
</div>
<div class="grid-x grid-padding-x">
<div class="large-12 medium-12 cell inner">
<div class="smpl sp" data-im="h1pc_15px.png">
<div class="zm"></div>
<h1 class="dspt" data-ld="#pup div">Pup Div</h1>
<img alt="H" src="_core/img/p/_blank.png"></div>
</div>
</div>
</div>
</div>
<!-- // grid padding -->
</div>
<!-- //grid container -->
Snippet Above ..
If you click the [broken] image
the #pup popup shows
clicking outside #pup(grey area) removes the popup (- GOOD)
clicking the .close div removes the popup (- GOOD).
Click "about" or "contact" in the header
the #info popup shows
clicking outside that popup (grey area) closes it (- GOOD)
clicking the .close div simply won't trigger the close event (- FAIL).
Suggested that it was due to the click event on body and stopPropagation... So I tested...
$('.about, .cont').on('click', function (e) {
e.preventDefault();
//e.stopPropagation();
var wht = $(this).attr('data-t');
$('#info').removeClass('pop').html(''); //empty's info popup if its present
$('#pup').hide(); //hides other popup if its present
$('#cov').fadeIn(300);
$('#info').addClass('pop').html($(wht).html()).fadeIn(300);
console.log(wht);
});
$('#cov, .close').on('click', function(e) {
e.preventDefault();
//e.stopPropagation();
$('#info').html('').removeClass('pop').fadeOut(300);
$('#pup').children('h1').html('');
$('#pup').fadeOut(300);
$('#cov').fadeOut(300);
console.log('clk');
});
Issue remains.
It works if you change the click function to: $(document).on('click', 'body', '.close', function()
You also need to remove this bit:
$('#info').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('#pup').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
I need to create an image lightbox. I basically started from this example from w3school, https://www.w3schools.com/howto/howto_js_lightbox.asp
However, it doesn't work for portrait oriented images. Eg. a landscape image is 1200x800 and a portrait can be 800x1200.
I need the images to resize responsive and work for both horizontal and vertical images.
It needs to work for all modern browsers, ios, android and also IE11.
you'll see I've added "max-width: 1200px;" to lightbox-content, which does the trick for horizontal images... but since a vertical image is 800 wide, it enlarges and the height exceeds.
<div class="lightbox">
<span class="close" onclick="closeLightbox()">×</span>
<div class="lightboxTitle">My Title</div>
<div class="lightbox-content">
<div class="slide"><img src="img1.jpg"></div>
<div class="slide"><img src="img2.jpg"></div>
<div class="slide"><img src="img2.jpg"></div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
/* The Modal (background) */
.lightbox {
display: none;
position: fixed;
z-index: 99999999;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
}
/* Modal Content */
.lightbox-content {
position: relative;
margin: auto;
padding: 0;
width: 100%;
max-width: 1200px;
}
.lightboxTitle {
position: absolute;
top: 20px;
left: 25px;
font-size: 20px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #FF8511;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.slide {
display: none;
}
.slide img {
width: 100%;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev {
left: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
color: #FF8511;
}
I had the same issue in one of my past projects. I solved it with this js library https://imagesloaded.desandro.com/,
It allows you to process the images after they are loaded, and you can then assign a css class to it according to the aspect ratio.
$('#container').imagesLoaded( function() {
// images have loaded
// check image height/width > 1, portrait
// check image heidht/width <= 1, square or landscape
// assign different classes for each case to handle
});
css:
.img-container {
//do whatever you need on the container
}
// keep the image classes like this
.img-container img.portrait {
height: 100%;
width: auto;
}
.img-container img.landscape {
width: 100%;
height: auto;
}
I'm making a messaging app in Electron. I'm using backdrop-filter to blur the messages as they scroll past the title bar, so I need the messages to pass behind the title bar, rather than being contained inside their own div in the middle of the screen.
When the page is not scrolled, the messages behave as expected. However, at the bottom of the page, the messages are cut off by the bottom bar for entering messages.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="css/chat.css" />
<script src="js/chatWindow.js"></script>
</head>
<body>
<div class="header">
<span class="name">Room Name</span>
</div>
<div class="messageBar">
<input id="messageBox" type="text" placeholder="Enter a message..." />
<div class="sendBtn">Send</div>
</div>
<div class="messageList"></div>
</body>
</html>
CSS
#font-face {
font-family: "Roboto Light";
font-style: "normal";
font-weight: 400;
src: url("fonts/Roboto-Light.ttf") format("truetype");
}
body {
background-color: white;
font-family: "Roboto Light";
padding: 45px 0px;
}
.header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 45px;
z-index: 100;
background-color: rgba(56, 92, 254, 0.75);
display: flex;
text-align: center;
justify-content: center;
align-items: center;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
-webkit-app-region: drag;
}
.header span {
font-weight: bold;
}
.messageBar {
position: fixed;
top: calc(100% - 45px);
left: 0px;
width: 100%;
height: 45px;
z-index: 100;
background-color: rgba(57, 93, 255, 0.75);
padding: 0px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
vertical-align: middle;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
#messageBox {
width: 90%;
height: 100%;
background-color: rgba(255,255,255,0.5);
font-size: 1em;
margin: none;
border: none;
padding: 0px 5px 0px 5px;
}
#messageBox::-webkit-input-placeholder {
color: dimgray;
}
.sendBtn {
float: right;
width: 10%;
height: 100%;
padding: 0px 3px;
line-height: 45px;
transition: 0.2s;
}
.sendBtn:hover {
background-color: rgba(0,0,0,0.25);
}
.messageList {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.message {
display: block;
width: auto;
max-width: 50%;
border-radius: 10px;
padding: 4px;
margin: 5px 0px;
box-sizing: border-box;
background-color: lightblue;
overflow-wrap: break-word;
float: left;
clear: both;
}
.message.mine {
float: right;
background-color: lightgreen;
}
Does anybody know how to fix this issue? Here's a CodePen for an example of what's happening. Any help would be greatly appreciated!
Try this javascript code may this help you.
window.addEventListener("load", function(){
var messageList = document.querySelector(".messageList");
var messageBox = document.getElementById("messageBox")
var sendBtn = document.querySelector(".sendBtn");
for(var i = 0; i < 100; i++) {
var content = "Message body: " + i + "\nThe quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.";
createMessageBubble(content, Math.random() > 0.5);
}
sendBtn.onclick = function() {
var message = messageBox.value;
messageBox.value = "";
if(!message || message.length <= 0) {
return;
}
createMessageBubble(message, true);
// TODO: actually send the message
};
function createMessageBubble(content, isUser) {
var el = document.createElement("div");
el.classList.add("message");
if(isUser) {
el.classList.add("mine");
}
el.innerText = content;
messageList.appendChild(el);
}
var div = document.createElement("div");
div.style.width = "100%";
div.style.height = "45px";
div.style.float = "left";
messageList.parentNode.appendChild(div);
});
I'm working on an image grid feature in which images are being displayed. I'm facing issue regarding creating an expandable/collapsable div.
HTML
<div *ngIf="Display('images')">
<section class="image-grid" *ngFor="let item of items$|async">
<div class="image__cell is-collapsed">
<div class="image--basic">
<img (click)="expandImage()" class="basic__img" src="{{item.link}}">
</div>
<div class="image--expand" [ngClass]="{'image--expand': !_expand}">
<a class="expand__close"></a>
<img class="image--large" src="{{item.link}}">
</div>
</div>
</section>
</div>
.ts file
private _maxHeight: string;
private _marginBottom: string;
private _expand: boolean = false;
expandImage() {
this._expand = !this._expand;
this._maxHeight = '500px';
this._marginBottom = '10px';
}
CSS
.image-grid {
width: 100%;
padding-right: 30px;
padding-left: 30px;
}
.image__cell {
float: left;
position: relative;
}
.basic__img {
height: 200px;
max-width: 100%;
float: left;
overflow: hidden;
}
.image__cell.is-collapsed {
overflow: hidden;
padding: 0.6%;
}
.image__cell.is-collapsed .image--basic {
cursor: pointer;
}
.image--expand {
position: relative;
left: -5px;
padding: 0 5px;
box-sizing: content-box;
overflow: hidden;
background-color: #222;
max-height: 0;
transition: max-height .3s ease-in-out,margin-bottom .1s .2s;
}
.expand__close {
position: absolute;
top: 10px;
right: 20px;
color: #454545;
font-size: 50px;
line-height: 50px;
text-decoration: none;
}
.expand__close:before {
content: '×';
}
.expand__close:hover {
color: #fff;
}
.image--large {
max-width: 100%;
height: auto;
display: block;
padding: 40px;
margin: 0 auto;
box-sizing: border-box;
}
The code above creates an expandable div. But the problem is whenever, I click on any one image, the div gets expanded in each row. I'm trying to create similar to this: Recreating image-viewer. It would be great if someone can help me out in this. Thanks. :)
I am guessing here,
Pass clicked key to this functions (click)="expandImage(item.$key)"
and in your code
expandImage(key) {
this._expand = !this._expand;
this.clickedItem = key;
this._maxHeight = '500px';
this._marginBottom = '10px';
}
and in your template
<div class="image--expand" *ngIf="clickedItem == item.$key" [ngClass]="{'image--expand': !_expand}">
<a class="expand__close"></a>
<img class="image--large" src="{{item.link}}">
</div>