Simulate button click with delay - javascript

I have a function that switches between 3 divs when one of 3 buttons is clicked (each button is linked to each div). But I also need that function to click each button automatically with 4 seconds delay. I want to achieve something like a slider that switches between those 3 divs automatically but the divs can also be switched by buttons. Is it possible to do? If so, how to do that? I'm a total jQuery / javascript beginner and I have no idea how to make it work.
Code attached below.
$(document).ready(function() {
$('#button_slide1').trigger('click');
$('.btn a').on('click', function(e) {
e.preventDefault();
//figure out which slide to show
var slideToShow = $(this).attr('rel');
//hide current slide
$('#header .slides.active').removeClass('active')
$('#' + slideToShow).addClass('active');
//show new slide
});
});
.slides:not(.active) {
display: none;
}
.btn {
float: left;
margin: 5px;
}
.btn p {
padding: 0;
margin: 0;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="slides active" id="slide1">
<img src="http://placehold.it/400x150/?text=Slide1">
</div>
<div class="slides" id="slide2">
<img src="http://placehold.it/400x150/?text=Slide2">
</div>
<div class="slides" id="slide3">
<img src="http://placehold.it/400x150/?text=Slide3">
</div>
<div class="buttons-wrapper">
<div class="btn">
<a href="http://facebook.com" rel="slide1">
<img src="http://placehold.it/70x25/" alt="typo-icon">
<p class="paragraph button-red">S1</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide2">
<img src="http://placehold.it/70x25/" alt="rwd-icon">
<p class="paragraph button-blue">S2</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide3">
<img src="http://placehold.it/70x25/" alt="ux-icon">
<p class="paragraph button-green">S3</p>
</a>
</div>
</div>
</section>


This should get you well along your way.
<style>
.toggleDiv {
display: none;
}
.toggleDiv.active {
display: block;
}
</style>
<div id="div1" class="toggleDiv">
<span>I'm div #1</span>
</div>
<div id="div2" class="toggleDiv">
<span>I'm div #2</span>
</div>
<div id="div3" class="toggleDiv">
<span>I'm div #3</span>
</div>
<button type="button" onClick="slides.toggle(0)">Toggle 1</button>
<button type="button" onClick="slides.toggle(1)">Toggle 2</button>
<button type="button" onClick="slides.toggle(2)">Toggle 3</button>
<script>
var slides = [
document.getElementById("div1"),
document.getElementById("div2"),
document.getElementById("div3")
];
function Slides(slides, active) {
this.slides = slides;
this.activeIndex = active === 0 ? 0 : active === null ? null : active || null;
this.slidesCount = this.slides.length;
this.toggle = function(index) {
if (this.activeIndex === index) {
return this.close(index);
}
return this.open(index);
};
this.open = function(index) {
this.activeIndex = index;
let i;
for (i = 0; i < this.slidesCount; i++) {
if (this.activeIndex !== i) {
this.slides[i].classList.remove("active");
}
}
return this.slides[index].classList.add("active");
};
this.close = function(index) {
this.activeIndex = null;
return this.slides[index].classList.remove("active");
};
console.log(this.activeIndex)
if (this.activeIndex !== null) {
this.slides[this.activeIndex].classList.add("active");
}
}
var slides = new Slides(slides, 0);
</script>


You need to set an interval using javascript:
var inx=0, // the button index that must be clicked
totalButtons = $('.buttons-wrapper').find('div.btn').length; // total number of buttons
var myInterval = setInterval(clickButton, 4000); // name of the function that needs to be triggered, time interval in miliseconds
function clickButton() {
if (inx >= totalButtons) // check for out of index
inx = 0;
$('.buttons-wrapper').find('.btn').eq(inx).find('a').first().trigger('click');
inx=inx+1; // adding one unit to the index
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="slides active" id="slide1">
<img src="http://placehold.it/400x150/?text=Slide1">
</div>
<div class="slides" id="slide2">
<img src="http://placehold.it/400x150/?text=Slide2">
</div>
<div class="slides" id="slide3">
<img src="http://placehold.it/400x150/?text=Slide3">
</div>
<div class="buttons-wrapper">
<div class="btn">
<a href="http://facebook.com" rel="slide1" onclick="console.log(this.getAttribute('rel'))">
<img src="http://placehold.it/70x25/" alt="typo-icon">
<p class="paragraph button-red">S1</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide2" onclick="console.log(this.getAttribute('rel'))">
<img src="http://placehold.it/70x25/" alt="rwd-icon">
<p class="paragraph button-blue">S2</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide3" onclick="console.log(this.getAttribute('rel'))">
<img src="http://placehold.it/70x25/" alt="ux-icon">
<p class="paragraph button-green">S3</p>
</a>
</div>
</div>
</section>


https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
You can edit this example according to your need
$(document).ready(function() {
$("#slideshow > div:gt(0)").hide();
$('.btn').one("click", function(e) {
e.preventDefault();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
});
.btn {
float: left;
margin: 5px;
}
.btn p {
padding: 0;
margin: 0;
text-align: center;
}
#slideshow > div {
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div id="slideshow">
<div class="slides active" id="slide1">
<img src="http://placehold.it/400x150/?text=Slide1">
</div>
<div class="slides" id="slide2">
<img src="http://placehold.it/400x150/?text=Slide2">
</div>
<div class="slides" id="slide3">
<img src="http://placehold.it/400x150/?text=Slide3">
</div>
</div>
<div class="buttons-wrapper">
<div class="btn">
<a href="http://facebook.com" >
<img src="http://placehold.it/70x25/" alt="typo-icon">
<p class="paragraph button-red">S1</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com">
<img src="http://placehold.it/70x25/" alt="rwd-icon">
<p class="paragraph button-blue">S2</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com">
<img src="http://placehold.it/70x25/" alt="ux-icon">
<p class="paragraph button-green">S3</p>
</a>
</div>
</div>
</section>

Related

Remove Parent element child elements href has no property

I was trying to remove the parent element if the child element href has no attribute.
$(document).ready(function() {
var noImg = "";
var cPathName = window.location.pathname;
if (noImg) {
$(this).parent().remove();
}
});
$(".dnext-thumbs-gallery-top-image-link").filter(function() {
if ($(this).attr('href').length == 0) {
console.log('test');
$(this).parent().parent().remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cs-gallery" class="et_pb_with_border et_pb_module dnxte_thumbs_gallery_parent dnxte_thumbs_gallery_parent_0_tb_body">
<div class="et_pb_module_inner">
<div class="dnext_thumbs_gallery_top_holder">
<div class="swiper-container dnext-thumbs-gallery-top swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper dnext-thumbs-gallery-active" data-lightbox="on">
<div class="et_pb_module dnxte_thumbs_gallery_child dnxte_thumbs_gallery_child_0_tb_body swiper-slide">
<div class="et_pb_module_inner dnext-thumbs-gallery-item">
<img class="img-fluid" alt="Logo Item" src="">
</div>
</div>
<div class="et_pb_module dnxte_thumbs_gallery_child dnxte_thumbs_gallery_child_1_tb_body swiper-slide swiper-slide-prev" style="width: 1080px; margin-right: 10px;">
<div class="et_pb_module_inner dnext-thumbs-gallery-item">
<img class="img-fluid" alt="Logo Item" src="https://adroithd.com/wp-content/uploads/2022/07/WhatsApp-Image-2022-03-28-at-11.45.05-AM.jpeg.webp">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
when I trying to filter. got an error
$(...).filter is not a function
how to solve this error?

You can use each instead of filter.
$(document).ready(function() {
var noImg = "";
var cPathName = window.location.pathname;
if (noImg) {
$(this).parent().remove();
}
});
$(".dnext-thumbs-gallery-top-image-link").each(function(i, e) {
if ($(e).attr('href').length == 0) {
$(this).parent().parent().remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cs-gallery" class="et_pb_with_border et_pb_module dnxte_thumbs_gallery_parent dnxte_thumbs_gallery_parent_0_tb_body">
<div class="et_pb_module_inner">
<div class="dnext_thumbs_gallery_top_holder">
<div class="swiper-container dnext-thumbs-gallery-top swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper dnext-thumbs-gallery-active" data-lightbox="on">
<div class="et_pb_module dnxte_thumbs_gallery_child dnxte_thumbs_gallery_child_0_tb_body swiper-slide">
<div class="et_pb_module_inner dnext-thumbs-gallery-item">
<img class="img-fluid" alt="Logo Item" src="">
</div>
</div>
<div class="et_pb_module dnxte_thumbs_gallery_child dnxte_thumbs_gallery_child_1_tb_body swiper-slide swiper-slide-prev" style="width: 1080px; margin-right: 10px;">
<div class="et_pb_module_inner dnext-thumbs-gallery-item">
<img class="img-fluid" alt="Logo Item" src="https://adroithd.com/wp-content/uploads/2022/07/WhatsApp-Image-2022-03-28-at-11.45.05-AM.jpeg.webp">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Is there any way I can filter with multiple criteria using jQuery?

So I tried this way to filter the boxes via multiple criteria, like when I choose "ON-TRACK" then "International", it should show me the only the "ON-TRACK" boxes with the "International" title, and if I choose "ON-TRACK" & "OFF-Track" together with "Technology" it should show nothing and so on...
I tried to play with the if statement and tried with loops but I couldn't find a way. Any tips? And thanks
$(document).ready(function() {
let toShow = [];
let noEl = [];
$('.top-right a').click(function(e) {
$(e.target).toggleClass('tag-active');
let getId = e.target.id;
let tagName = e.target.innerHTML;
if (toShow.includes(getId)) {
for (var i = 0; i < toShow.length; i ++) {
if (toShow[i] == getId) {
toShow.splice(i, 1);
break;
}
}
}
else {
toShow.push(getId);
}
if (noEl.includes(getId)) {
for (let j = 0; j < noEl.length; j ++) {
if (noEl[j] == getId) {
$(`.list-body .${getId}`).fadeOut('fast');
noEl.splice(j, 1);
break;
}
}
}
if (toShow.length === 0) {
$('#main .list-el').fadeIn('fast');
$(`.list-body .tag-no-result`).fadeOut('fast');
}
else {
$('#main .list-el').fadeOut('fast');
}
$.each(toShow, function(i, b) {
$('#main .list-el'+'.'+b).fadeIn('fast');
});
});
});
.tag {
border: 1px solid blue;
display: inline-block;
padding: 10px;
}
.myull {
display: inline-block;
border: 1px solid blue;
padding: 5px
}
.btn {
padding: 0px;
font-size: 14px;
}
a {
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="m-4">
<div class="list">
<div class="top">
<div class="top-right">
<a id="tag-1" class="myull tag tag-1" href='#' class='tag'>ON-TRACK</a>
<a id="tag-2" class="myull tag tag-2" href='#' class='tag'>OFF-TRACK</a>
<a id="tag-3" class="myull tag tag-3" href='#' class='tag'>CRITICAL</a>
<a id="tag-4" class="myull tag tag-4" href='#' class='tag'>NOT-STARTED</a>
<a id="tag-5" class="myull tag tag-5" href='#' class='tag'>ONHOLD</a>
<a id="tag-6" class="myull tag tag-6" href='#' class='tag'>CLOSED</a>
</div>
</div>
<hr>
<p class="pl-2">PORTFOLIO:</p>
<div class="top">
<div class="top-right myul">
<a id="tag-7" class="myull tag-7" href='#'>Support</a>
<a id="tag-8" class="myull tag-8" href='#'>Collaboration</a>
<a id="tag-9" class="myull tag-9" href='#'>Quality</a>
<a id="tag-10" class="myull tag-10" href='#'>DO</a>
<a id="tag-11" class="myull tag-11" href='#'>Social</a>
<a id="tag-12" class="myull tag-12" href='#'>University</a>
<a id="tag-13" class="myull tag-13" href='#'>Technology</a>
</div>
</div>
<hr>
<p class="pl-2">OWNER:</p>
<div class="top">
<div class="top-right myul1">
<a id="tag-14" class="myull tag-14" href='#'>Jake</a>
<a id="tag-15" class="myull tag-15" href='#'>Adam</a>
<a id="tag-16" class="myull tag-16" href='#'>Mark </a>
<a id="tag-17" class="myull tag-17" href='#'>Sam </a>
<a id="tag-18" class="myull tag-18" href='#'>Sarah </a>
</div>
</div>
</div>
<div class="container" style="background-color: aqua">
<div class="row">
<div id="main" class="col-md-12 parentClass">
<div class="tag list-el tag-14 tag-1 tag-7 m-1">
<div>
<h4>ON-TRACK</h4>
</div>
<div>
<h5>Support</h5>
</div>
<div>
<h6>Jake</h6>
</div>
</div>
<div class="tag list-el tag-14 tag-1 tag-8 m-1">
<div>
<h4>ON-TRACK</h4>
</div>
<div>
<h5>Collaboration</h5>
</div>
<div>
<h6>Jake</h6>
</div>
</div>
<div class="tag list-el tag-14 tag-2 tag-9 m-1">
<div>
<h4>OFF-TRACK</h4>
</div>
<div>
<h5>Quality</h5>
</div>
<div>
<h6>Jake</h6>
</div>
</div>
<div class="tag list-el tag-15 tag-2 tag-10 m-1">
<div>
<h4>OFF-TRACK</h4>
</div>
<div>
<h5>DO</h5>
</div>
<div>
<h6>Adam</h6>
</div>
</div>
<div class="tag list-el tag-16 tag-3 tag-11 m-1">
<div>
<h4>CRITICAL</h4>
</div>
<div>
<h5>Social</h5>
</div>
<div>
<h6>Mark</h6>
</div>
</div>
<div class="tag list-el tag-17 tag-4 tag-12 m-1">
<div>
<h4>NOT-STARTED</h4>
</div>
<div>
<h5>University</h5>
</div>
<div>
<h6>Sam</h6>
</div>
</div>
<div class="tag list-el tag-18 tag-4 tag-13 m-1">
<div>
<h4>ONHOLD</h4>
</div>
<div>
<h5>Technology</h5>
</div>
<div>
<h6>Sarah</h6>
</div>
</div>
</div>
</div>
</div>

Look, it would be much easier to see what's going on if you add a classname when a particular toggle is active, then get the currently selected filters by let's say, the 'active' class, and then finally filter the items with the toggles which are active.
I've completely re-written the JavaScript event handler. See the comments in code below to understand what each line is doing:
$(function() {
// Filter in the tag list clicked
$('.list').on('click', '.tag', function() {
// Toggle active class on clicked element
$(this).toggleClass('active');
// Get all active filters' tag class number (tag-xx)
let activeGp1 = $('.top:eq(0) .tag.active').map((i, el) => el.className.match(/tag-\d+/)[0]).get();
let activeGp2 = $('.top:eq(1) .tag.active').map((i, el) => el.className.match(/tag-\d+/)[0]).get();
let activeGp3 = $('.top:eq(2) .tag.active').map((i, el) => el.className.match(/tag-\d+/)[0]).get();
// Filter the items below, must match at least one single active filter in each filter group
$('#main .list-el').hide().filter((i, el) =>
(activeGp1.length == 0 || activeGp1.some(c => el.classList.contains(c))) &&
(activeGp2.length == 0 || activeGp2.some(c => el.classList.contains(c))) &&
(activeGp3.length == 0 || activeGp3.some(c => el.classList.contains(c)))
).show();
// Return false since it's not a hyperlink
return false;
});
});
.tag {
border: 1px solid blue;
display: inline-block;
padding: 10px;
}
.tag.active {
background-color: #ffe;
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.myull {
display: inline-block;
border: 1px solid blue;
padding: 5px
}
.btn {
padding: 0px;
font-size: 14px;
}
a {
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="m-4">
<div class="list">
<div class="top">
<div class="top-right">
<a class="myull tag tag-1">ON-TRACK</a>
<a class="myull tag tag-2">OFF-TRACK</a>
<a class="myull tag tag-3">CRITICAL</a>
<a class="myull tag tag-4">NOT-STARTED</a>
<a class="myull tag tag-5">ONHOLD</a>
<a class="myull tag tag-6">CLOSED</a>
</div>
</div>
<hr>
<p class="pl-2">PORTFOLIO:</p>
<div class="top">
<div class="top-right myul">
<a class="myull tag tag-7">Support</a>
<a class="myull tag tag-8">Collaboration</a>
<a class="myull tag tag-9">Quality</a>
<a class="myull tag tag-10">DO</a>
<a class="myull tag tag-11">Social</a>
<a class="myull tag tag-12">University</a>
<a class="myull tag tag-13">Technology</a>
</div>
</div>
<hr>
<p class="pl-2">OWNER:</p>
<div class="top">
<div class="top-right myul1">
<a class="myull tag tag-14">Jake</a>
<a class="myull tag tag-15">Adam</a>
<a class="myull tag tag-16">Mark </a>
<a class="myull tag tag-17">Sam </a>
<a class="myull tag tag-18">Sarah </a>
</div>
</div>
</div>
<div class="container" style="background-color: aqua">
<div class="row">
<div id="main" class="col-md-12 parentClass">
<div class="tag list-el tag-14 tag-1 tag-7 m-1">
<div>
<h4>ON-TRACK</h4>
</div>
<div>
<h5>Support</h5>
</div>
<div>
<h6>Jake</h6>
</div>
</div>
<div class="tag list-el tag-14 tag-1 tag-8 m-1">
<div>
<h4>ON-TRACK</h4>
</div>
<div>
<h5>Collaboration</h5>
</div>
<div>
<h6>Jake</h6>
</div>
</div>
<div class="tag list-el tag-14 tag-2 tag-9 m-1">
<div>
<h4>OFF-TRACK</h4>
</div>
<div>
<h5>Quality</h5>
</div>
<div>
<h6>Jake</h6>
</div>
</div>
<div class="tag list-el tag-15 tag-2 tag-10 m-1">
<div>
<h4>OFF-TRACK</h4>
</div>
<div>
<h5>DO</h5>
</div>
<div>
<h6>Adam</h6>
</div>
</div>
<div class="tag list-el tag-16 tag-3 tag-11 m-1">
<div>
<h4>CRITICAL</h4>
</div>
<div>
<h5>Social</h5>
</div>
<div>
<h6>Mark</h6>
</div>
</div>
<div class="tag list-el tag-17 tag-4 tag-12 m-1">
<div>
<h4>NOT-STARTED</h4>
</div>
<div>
<h5>University</h5>
</div>
<div>
<h6>Sam</h6>
</div>
</div>
<div class="tag list-el tag-18 tag-4 tag-13 m-1">
<div>
<h4>ONHOLD</h4>
</div>
<div>
<h5>Technology</h5>
</div>
<div>
<h6>Sarah</h6>
</div>
</div>
</div>
</div>
</div>

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);
}
});
});

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>

Adding descriptions inside a blueimp gallery

I am using a BlueImp Gallery to add lightboxes to my image gallery. So, when you click on an image thumbnail, it launches a lightbox with a larger version of the image etc.
I also want to add in some descriptive text and a button to each slide of the lightbox, but I am having trouble making it work. It won't show the placeholder descriptions that I have added in.
Here's what I have so far;
HTML:
<div id="blueimp-gallery" class="blueimp-gallery">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<p class="description"></p>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="links">
<div class="row prints">
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm3.staticflickr.com/2843/10406026526_4cd1b56391.jpg" title="Ballooning" data-description="This is a banana." data-gallery>
<img src="http://farm8.staticflickr.com/7389/10404414563_0914b69e0e.jpg" alt="Ballooning">
</a>
<h3>Ballooning</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5547/10406009404_c197c2221b.jpg" title="Clearing" data-description="This is a apple." data-gallery>
<img src="http://farm6.staticflickr.com/5490/10404414523_745ea3065d.jpg" alt="Clearing">
</a>
<h3>Clearing</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5510/10406026066_7f95a075ee.jpg" title="Sky/Sea" data-description="This is a cherry." data-gallery>
<img src="http://farm4.staticflickr.com/3769/10404249505_d767f7c420.jpg" alt="Sky/Sea">
</a>
<h3>Sky/Sea</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3678/10406009004_5c625e2028.jpg" title="Lights" data-description="This is a grapefruit." data-gallery>
<img src="http://farm3.staticflickr.com/2814/10404249395_9e4cae5bc7.jpg" alt="Lights">
</a>
<h3>Lights</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5538/10406019875_8424fbee11.jpg" title="Silhouettes" data-description="This is a orange." data-gallery>
<img src="http://farm8.staticflickr.com/7343/10404255766_d808d1902d.jpg" alt="Silhouettes">
</a>
<h3>Silhouettes</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3682/10406009134_3b666324ff.jpg" title="Sway" data-description="This is a kiwi." data-gallery>
<img src="http://farm6.staticflickr.com/5516/10404249545_7efb481042.jpg" alt="Sway">
</a>
<h3>Sway</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm8.staticflickr.com/7425/10406019935_1def1e0c09.jpg" title="Sunset" data-description="This is a grape." data-gallery>
<img src="http://farm3.staticflickr.com/2810/10404249465_0124b7f3e5.jpg" alt="Sunset">
</a>
<h3>Sunset</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5532/10406009324_4cd1b56391.jpg" title="Lighthouse" data-description="This is a strawberry." data-gallery>
<img src="http://farm6.staticflickr.com/5543/10404240054_6261498220.jpg" alt="Lighthouse">
</a>
<h3>Lighthouse</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3747/10406026506_6a4dbf2df0.jpg" title="Slabs"data-description="This is a pineapple." data-gallery>
<img src="http://farm8.staticflickr.com/7345/10404249655_7512bf6565.jpg" alt="Slabs">
</a>
<h3>Slabs</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.blueimp-gallery > .description {
position: absolute;
top: 30px;
left: 15px;
color: red;
display: none;
}
.blueimp-gallery-controls > .description {
display: block;
}
JS:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
}
);
And in my body (gallery.js is the file where I've added the above JS):
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="lib/fancybox/jquery.fancybox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="js/bootstrap-image-gallery.min.js"></script>
<script src="js/gallery.js"></script>
Any pointers on where I've gone wrong would be much appreciated!

You can pass any needed data on a element, and then display it in the gallery.
I spend a lot of time trying to find an answer, so I'll leave it here.
Here is an example:
HTML:
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<p class="description"></p>
<p class="example"></p>
...
</div>
------
<div id="links">
Banana
Apple
</div>
JS:
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {
index: link, event: event,
onslide: function (index, slide) {
self = this;
var initializeAdditional = function (index, data, klass, self) {
var text = self.list[index].getAttribute(data),
node = self.container.find(klass);
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
};
initializeAdditional(index, 'data-description', '.description', self);
initializeAdditional(index, 'data-example', '.example', self);
}
},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
CSS:
You can use .scss to refactor it, but it's just for example
.blueimp-gallery > .description, .blueimp-gallery > .example {
position: absolute;
top: 30px;
left: 15px;
color: #fff;
display: none;
}
.blueimp-gallery-controls > .description, .blueimp-gallery-controls > .example {
display: block;
}

Sorry if to late but I find a way to do this, only change the JS from:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
}
);
to this:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].innerHTML = text;
}
}
}
);

blueimp.Gallery(
document.getElementById('links'), {
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
});
http://jsfiddle.net/2B3bN/25/
Have a look at this one, it is a working one.
Just check what you've done wrong compared to mine.

use
document.getElementById('links').getElementsByTagName('a') or .children()

That works only for the first link...
I am trying to get it to work with html in the data-description. I have it working and pulling in the decsription text, but how do you parse the html to work as a link?
http://jsfiddle.net/LXp76/
<img src="http://lorempixel.com/80/80/" alt="" >
here it is working with FancyBox, http://jsfiddle.net/yShjB/2/
but I would much rather use the BlueImp Gallery..

Categories