Problem with lightbox, on click event is not working - javascript

I have a stupid problem with jQuery.. I'm trying to make a simple lightbox and I have problems with the "close" button.. Here is what I have - a grid with some color variations. We have an image and a text for the color. When we click on it, we should see the image in a lightbox with bigger size. To do so, I'm just adding and removing a class.
The weird thing is that the on click on the close is working, the console log is displayed, but the class is not removed.. Why is that? What do I do wrong here? Shouldn't the function on the close button remove the class from all elements?
var colorVariation = $('.product-variations__color');
var colorPopUp = $('.product-variations__color-popup');
colorVariation.on('click', function () {
$(this).find(colorPopUp).addClass('is-active');
});
$('.close').on('click', function() {
colorPopUp.removeClass('is-active');
console.log('woohoo');
});
.product-variations {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.product-variations__color {
max-width: calc((100% / 4) - 20px);
padding: 0 10px 50px;
}
.product-variations__color-name {
width: 100%;
text-align: center;
}
.product-variations__color-popup {
display: none;
}
.product-variations__color-popup.is-active {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.product-variations__color-popup.is-active .close {
filter: difference;
position: absolute;
top: 20px;
left: 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-variations">
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/ff0000" />
<div class="product-variations__color-name">
Red
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/ff0000" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/008000" />
<div class="product-variations__color-name">
Green
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/008000" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/0000ff" />
<div class="product-variations__color-name">
Blue
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/0000ff" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/800080" />
<div class="product-variations__color-name">
Purple
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/800080" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/FFFF00" />
<div class="product-variations__color-name">
Yellow
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/FFFF00" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/00FFFF" />
<div class="product-variations__color-name">
Cyan
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/00FFFF" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/BFFF00" />
<div class="product-variations__color-name">
Lime
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/BFFF00" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/000000" />
<div class="product-variations__color-name">
Black
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/000000" />
</div>
</div>
</div>

The problem is you are triggering the other click call that adds the class back onto the element because the event listener is on a parent. So the child is triggered, followed by the parent. If you stop the click, it will not trigger on the parent.
$('.close').on('click', function(event) {
event.stopPropagation();
colorPopUp.removeClass('is-active');
});

Related

How do i arrange images inside a div?

I am making a project for Uni where I need to upload images to with specified width and height for everyone to see. Its basically equivalent of this: http://www.milliondollarhomepage.com/ . The problems is i have this for the HTML side:
<div id="canvas">
</div>
This is where the pictures are supposed to be uploaded, lets say its size is 1000 x 1000. I am supposed to fit every image there without change its dimensions.
const canvas=document.getElementById('canvas')
const btn = document.getElementById('submit-button');
const image_width=document.getElementById('image_width');
const image_height=document.getElementById('image_height');
btn.addEventListener('click', (event) => {
var x=document.createElement('img');
var color=document.getElementById('color');
if(color.value==='red')
{
x.src='red.png';
}
else if(color.value==='blue')
{
x.src='blue.png';
}
x.width=image_width.value;
x.height=image_height.value
event.preventDefault();
canvas.appendChild(x);
});
This is the Javascript I used, just to see how it works. However when we used different sized images for example we put 3 20x20 and add an 20x40 and finish the rest of the line with 20x20 once i add one more 20x20 it wont start filling the free space to the left of the 20x40, it will start filling to the right of the 20x40.
This is the result.
I wanted the red to fill in the black space left of the blue. Red=50x10 Blue=50x20
What you are trying to do is called a "masonry layout" and they are not very straightforward to implement. It usually requires you to change the flow of your content to run in columns instead of rows.
I'm not even sure that your exact scenario can be accomplished without manual placement, but here is an example of a vertical masonry layout (source: https://codepen.io/iamsaief/pen/jObaoKo):
/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background: linear-gradient(45deg, #190f2c, #200b30);
padding: 15px;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
display: inline-block;
}
/* Main CSS */
.grid-wrapper > div {
display: flex;
justify-content: center;
align-items: center;
}
.grid-wrapper > div > img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}
.grid-wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
grid-auto-rows: 100px;
grid-auto-flow: dense;
}
.grid-wrapper .wide {
grid-column: span 2;
}
.grid-wrapper .tall {
grid-row: span 2;
}
.grid-wrapper .big {
grid-column: span 2;
grid-row: span 2;
}
<div class="grid-wrapper">
<div>
<img src="https://images.unsplash.com/photo-1541845157-a6d2d100c931?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1588282322673-c31965a75c3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="" />
</div>
<div class="tall">
<img src="https://images.unsplash.com/photo-1588117472013-59bb13edafec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</div>
<div class="wide">
<img src="https://images.unsplash.com/photo-1587588354456-ae376af71a25?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div>
<img src=" https://images.unsplash.com/photo-1558980663-3685c1d673c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=60" alt="" />
</div>
<div class="tall">
<img src="https://images.unsplash.com/photo-1588499756884-d72584d84df5?ixlib=rb-1.2.1&auto=format&fit=crop&w=2134&q=80" alt="" />
</div>
<div class="big">
<img src="https://images.unsplash.com/photo-1588492885706-b8917f06df77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1588247866001-68fa8c438dd7?ixlib=rb-1.2.1&auto=format&fit=crop&w=564&q=80" alt="" />
</div>
<div class="wide">
<img src="https://images.unsplash.com/photo-1586521995568-39abaa0c2311?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div class="big">
<img src="https://images.unsplash.com/photo-1572914857229-37bf6ee8101c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80" alt="" />
</div>
<div class="tall">
<img src="https://images.unsplash.com/photo-1588453862014-cd1a9ad06a12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1588414734732-660b07304ddb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1588224575346-501f5880ef29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1574798834926-b39501d8eda2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1547234935-80c7145ec969?ixlib=rb-1.2.1&auto=format&fit=crop&w=1353&q=80" alt="" />
</div>
<div class="wide">
<img src="https://images.unsplash.com/photo-1588263823647-ce3546d42bfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1587732608058-5ccfedd3ea63?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1587897773780-fe72528d5081?ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80" alt="" />
</div>
<div class="wide">
<img src="https://images.unsplash.com/photo-1588083949404-c4f1ed1323b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1587572236558-a3751c6d42c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div class="wide">
<img src="https://images.unsplash.com/photo-1583542225715-473a32c9b0ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div class="big">
<img src="https://images.unsplash.com/photo-1527928159272-7d012024eb74?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1553984840-b8cbc34f5215?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1433446787703-42d5bf446876?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="" />
</div>
<div class="big">
<img src="https://images.unsplash.com/photo-1541187714594-731deadcd16a?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="" />
</div>
<div class="tall">
<img src="https://images.unsplash.com/photo-1540979388789-6cee28a1cdc9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1421930866250-aa0594cea05c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1493306454986-c8877a09cbeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1381&q=80" alt="" />
</div>
<div class="wide">
<img src="https://images.unsplash.com/photo-1536466528142-f752ae7bdd0c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
</div>

MasonryJS image gallery aligns left on page refresh

So I have this image gallery which I displayed as Pinterest-style Masonry by using MasonryJS. Everything works fine but the problem is when I refresh the page. That is, when I refresh the page, all the images align to the left at first then comes to the actual place. It's like for a couple of milliseconds it goes to that position and comes back to life.
Here's a gif which shows the actual problem:
How can I not have it left-aligned in page refresh? I just wish it to stay in the middle no matter how much I refresh the page.
Here's the code:
jQuery(window).on('load', function(){
$('.modal-grid').masonry({
itemSelector: '.modal-grid-item',
gutter: 10,
isFitWidth: true
});
});
.modal-grid{
margin: 0 auto;
margin-top: 30px;
}
.modal-grid-item {
width: 300px; margin-bottom: 10px;
}
.modal-grid-item img {
width: 100%; height: auto;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="modal-grid">
<div class="modal-grid-item">
<img src="https://i.imgur.com/m7M9EPX.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/NzD7YF9.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/8zvUjul.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/WNmP9VL.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/0nwzhDV.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/ypdixv8.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/1oHOvK1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/kpjtht1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/QAQ0dk6.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/m7M9EPX.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/NzD7YF9.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/8zvUjul.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/WNmP9VL.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/0nwzhDV.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/ypdixv8.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/1oHOvK1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/kpjtht1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/QAQ0dk6.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/m7M9EPX.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/NzD7YF9.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/8zvUjul.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/WNmP9VL.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/0nwzhDV.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/ypdixv8.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/1oHOvK1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/kpjtht1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/QAQ0dk6.jpg" />
</div>
</div>
Masonry has events we can take advantage of, like layoutComplete. I used that to get masonry to load the images while hidden. Once the ready event fires, we trigger Masonry's own layoutComplete event to recalculate the elements. Then we run a callback once to reveal Masonry.
.modal-grid {
opacity: 0; /* jQuery will remove this later */
transition: opacity; /* optional */
}
jQuery(window).on('load', function() {
/* Init your grid like normal but save it to a variable */
const $grid = $('.modal-grid').masonry({
itemSelector: '.modal-grid-item',
gutter: 10,
isFitWidth: true
});
/*
Add a one time eventListener to just run on our hand-made "onLoad" event
*/
$grid.one('layoutComplete', function() {
/* and fade it in */
$grid.css('opacity', '1');
/*
If it is still happening, you can
add a setTimeout to delay the fade effect
*/
/**
let timeoutHandle;
timeoutHandle = setTimeout(function() {
$grid.css('opacity', '1')
// clear the timeout to make explicitly
// sure no extra timers are running
clearTimeout(timeoutHandle);
}, 1000);
*/
});
$(document).ready(function() {
// trigger the event when the document elements
// are ready
$grid.trigger('layoutComplete');
});
});
If you wanna play around with it, you can check out the CodePen here.

Swipeable figcaptions

I am playing with coding and trying to make FIGCAPTION swipeable but when I add function to the following HTML, it doesn't work.
However, it seems to work when there is only a <div> with id="container" and the code inside it.
Is there a way to make the below script work with FIGCAPTION?
<div>
<h2 id="Books" class="heading"> Books</h2>
<div class="w-row">
<div class="column-3 w-col w-col-3 w-col-small-6 w-col-tiny-tiny-stack">
<figure class="imghvr-fall-away-vert">
<img src="images/hg.jpg" srcset="images/hg-p-500.jpg 500w, images/hg-p-800.jpg 800w, images/hg-p-1080.jpg 1080w, images/hg-p-1600.jpg 1600w, images/hg-p-2000.jpg 2000w, images/hg-p-2600.jpg 2600w, images/hg.jpg 2628w" sizes="100vw" >
<figcaption>
<div id="container">
<div class="buddy" style="display: block;">
<div class="avatar" style="display: block; background-image: url(images/Untitled-1.jpg)"></div>
</div>
<div class="buddy"><div class="avatar" style="display: block; background-image: url(images/Untitled-2.jpg)"></div></div>
<div class="buddy"><div class="avatar" style="display: block; background-image: url(images/Untitled-3.jpg)"></div></div>
<div class="buddy"><div class="avatar" style="display: block; background-image: url(images/Untitled-4.jpg)"></div></div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
Script:
$(document).ready(function(){
$(".buddy").on("swiperight",function(){
$(this).addClass('rotate-left').delay(700).fadeOut(1);
$('.buddy').find('.status').remove();
$(this).append('<div class="status like">Like!</div>');
if ( $(this).is(':last-child') ) {
$('.buddy:nth-child(1)').removeClass ('rotate-left rotate-right').fadeIn(300);
} else {
$(this).next().removeClass('rotate-left rotate-right').fadeIn(400);
}
});
$(".buddy").on("swipeleft",function(){
$(this).addClass('rotate-right').delay(700).fadeOut(1);
$('.buddy').find('.status').remove();
$(this).append('<div class="status dislike">Dislike!</div>');
if ( $(this).is(':last-child') ) {
$('.buddy:nth-child(1)').removeClass ('rotate-left rotate-right').fadeIn(300);
alert('OUPS');
} else {
$(this).next().removeClass('rotate-left rotate-right').fadeIn(400);
}
});
});

positioning div classes next to another div using jquery

below is my current html layout, inside my .container class I have two <span> tags with classes of .download-btn and .save-btn. I want, whenever page load, remove those <span> from there and postioning near <div class="share"></div>
tag.
current layout
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
expected layout when page load
<div class="container">
<div class="col-md-6 col-center">
</div>
<div id="options">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
<div class="share"></div>
</div>
</div>
pls advice how to proceed using js ?
Using jQuery,
It can be done in a one line of code.
$("#options").prepend($(".save-btn")).prepend($(".download-btn"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
</div>
Use prepend() to move the buttons to the beginning of the element with ID options:
$('#options').prepend($('.download-btn, .save-btn'));
In this example I'm removing this two buttons from their places, and append them before <div class="share"></div> (and I have added content "share" to this div to see the difference):
var downloadBtn = $('.download-btn');
var saveBtn = $('.save-btn');
$('.share').before(saveBtn).before(downloadBtn);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share">share</div>
</div>
Use button for for the buttons. It's semantically correct and accessible.
$(window).on('load', function() {
var download = $('.download-btn'),
save = $('.save-btn'),
options = $('#options');
download.remove();
save.remove();
options.prepend(download, save);
});
.container {
border: .1rem solid red;
min-height: 5rem;
margin-bottom: 1rem;
}
#options {
border: .1rem solid blue;
min-height: 100px;
}
button {
padding: 1rem;
background-color: #ddd;
display: inline-block;
margin: .5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<button class="download-btn">download</button>
<button class="save-btn">save</button>
</div>
</div>
<div id="options">
<div class="share"></div>
</div>

Card flip inside Bootstrap modal with dynamicly imported image

I'm making a sort of card game. I'm using Bootstrap 3 as my framework with a deck of cards in a grid, each card in their own column.
When a card is clicked, I want the card to be displayed with its backside up as an overlay, like Bootstraps modal or equivalent. But when the card is clicked (or touched) it should flip, displaying the front which is the same as the image that was clicked to trigger the modal. It should be able to flip back and forward infinite number of times. Clicking outside the modal or on a close button, closes the modal and returns to the deck.
I'm able to do a card flip on an image. And I'm able to trigger a modal with dynamic content. But what I can't figure out is how to do this together so that I don't have to create a seperate modal for each card.
I've been pulling my hair over this issue for days now and I truly cannot wrap my head around how this can be made. My javascript skills are quite limited and I cant find any plugin or code example to help me in this (I've tried numerous options).
My grid is displayed in the snippet. No data-targets, modules or javascripts included though since I havn't found anything that works yet.
Any ideas?
main {
.container-fluid;
.text-center;
background: none;
header {
.container-fluid;
.text-center;
padding: 50px;
h1 {
font-weight: #font-weight-heading;
}
}
.cardColumns {
.make-row();
.cCard {
.make-xs-column(4);
.make-sm-column(3);
.make-md-column(2);
padding: 10px;
img {
width: 100%;
height: auto;
.img-rounded;
modal-body-shadow: 0 4px 8px 0 #000;
transition: 0.3s;
}
img:hover {
modal-body-shadow: 0 8px 16px 0 #000;
}
}
}
}
<main>
<div class="cardColumns">
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
</div>
</main>
This basically just changes the background image in the mid spin.
$(document).ready(function() {
initListeners();
});
function initListeners() {
$(".container").off();
$(".container").on("click",function() {
$(".container").removeClass("toggle")
$(this).addClass("toggle");
});
}
/*var Cards;
setTimeout(function() {
Cards = document.querySelectorAll(".container");
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].addEventListener("click", function(elem) {
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].classList.remove('toggle');
elem.target.parentElement.classList.add('toggle');
});
}, 1);*/
.container {
perspective: 1000px;
display: inline-block;
position: relative;
}
.card {
margin: 5px;
width: 105px;
height: 150px;
background: #000;
transition: transform .35s linear;
transform: rotateX(180deg);
transform-style: preserve-3d;
}
.card::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/gcRWf.png) center center;
background-size: cover!important;
transition: background 0.01s linear;
transition-delay: 0.175s;
}
.container.toggle .card {
transform: rotateX(0deg);
}
.container.toggle .card::after {
background: url(https://s-media-cache-ak0.pinimg.com/736x/f4/e3/97/f4e397ef5e0a4cd7cdbf30e65aa149c0.jpg) center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
With that also i have used external js to flip images reference to which you will get here.
$('.flip-card').flip();
function openModal(front_image, back_image) {
var message = $('#modal_1');
BootstrapDialog.show({
message: $('#modal_1'),
onshown: function() {
$('.front img').attr('src', front_image);
$('.back img').attr('src', back_image);
},
onhide: function(dialogRef) {
$('#hidden-div').append(message);
},
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button type="button" class="btn btn-primary" onclick="openModal('http://fillmurray.com/200/200','http://fillmurray.com/600/600')">Open modal</button>
<div id="hidden-div" style="display: none">
<div class="container-fluid" id="modal_1">
<div class="row">
<div class="col-sm-3 col-xs-6">
<div class="flip-card" ontouchstart="this.classList.toggle('hover');" style="height : 300px;">
<div class="front front-side" style="">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
<div class="back back-side" style="background-color : blue">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
</div>
</div>
</div>
</div>
</div>

Categories