Want blur image once the process is completed in tracking process - javascript

I am creating a website wherein a user is looking at the tracking screen. In this screen the user is able to see the current status of the package. As soon as first process is completed, the completed process then blurred and the current status is glows. Here is the code I have written in HTML and CSS
li {
list-style-type: none;
float: left;
margin: 10px;
}
.imgage {
margin-top: 150px;
}
body h2 {
font-family: sans-serif, 'Montserrat';
}
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<ul>
<li>
<div class="imgage">
<img src="images/fil_1.jpg" width="202px" height="100px">
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/export1.jpg" width="202px" height="100px">
<h2>IMPORT</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/UKimport.jpg" width="202px" height="100px">
<h2>CARRIER</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/DHL.jpg" width="202px" height="100px">
<h2>DHL</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/HMRC_logo.jpg" width="202px" height="100px">
<h2>HMRC</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img src="images/Importt.jpg" width="202px" height="100px">
</li>
</ul>
</div>


I tried my best to understand what you wanted to do.
My interpretation is that you wanted to blur the page while things get loaded and then show the loaded page.
I added the code to do that plus I added a code to emulate the photos that were not loading since they were not included with the full URI to reach them.
If by any chance this is not what you wanted, then please edit your question and let me know so I can change my answer to it.
// Emulating loading the photos
$(window).on('load', function() {
$("#cover").fadeOut(200);
});
function callLoad(){
$(window).load();
}
setTimeout(callLoad, 1000);
$(function() {
$('.image').each(function(){
let randomNumber = (Math.floor(Math.random() * 100) + 1);
$(this).attr('src', 'https://picsum.photos/id/' + randomNumber + '/202/100');
});
var images = $('.image').sort(function (a, b) {
return +$(a).data('sort') - +$(b).data('sort');
});
var index = 0;
var getNextImage = function(index){
var remainder = index % images.length;
return $(images[(remainder === 0) ? images.length - 1 : remainder - 1]);
};
$("#btnNext").click(function(){
getNextImage(index - 1).addClass("blur-content");
getNextImage(index).toggleClass("blur-content");
index++;
});
});
li {
list-style-type: none;
float: left;
margin: 10px;
}
.imgage {
margin-top: 50px;
}
body h2 {
font-family: sans-serif, 'Montserrat';
}
#cover {
top:0;
left: 0;
position: fixed;
height: 100%;
width: 100%;
background: #CCC;
z-index:9999;
}
.blur-content {
-webkit-filter: url(#svg-blur);
filter: url(#svg-blur);
}
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<button id="btnNext"> Next </button>
<div id="cover" class="blur-content"></div>
<div>
<ul>
<li>
<div class="imgage">
<img class="image blur-content" src="images/fil_1.jpg" width="202px" height="100px" data-sort="7">
<h2>SOMETHING</h2>
</li>
<li>
<div class="imgage">
<img class="image blur-content" src="images/export1.jpg" width="202px" height="100px" data-sort="2">
<h2>IMPORT</h2>
</li>
<li>
<div class="imgage">
<img class="image blur-content" src="images/UKimport.jpg" width="202px" height="100px" data-sort="3">
<h2>CARRIER</h2>
</li>
</ul>
<ul>
<li>
<div class="imgage">
<img class="image blur-content" src="images/DHL.jpg" width="202px" height="100px" data-sort="4">
<h2>DHL</h2>
</li>
<li>
<div class="imgage">
<img class="image blur-content" src="images/HMRC_logo.jpg" width="202px" height="100px" data-sort="5">
<h2>HMRC</h2>
</li>
<li>
<div class="imgage">
<img class="image blur-content" src="images/Importt.jpg" width="202px" height="100px" data-sort="6">
<h2>HMRC2</h2>
</li>
</ul>
</div>
<!-- SVG Blur Filter -->
<!-- 'stdDeviation' is the blur amount applied -->
<svg id="svg-filter-blur">
<filter id="svg-blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
</filter>
</svg>

Related

how to make html elements respond to their parent viewport rather than browser viewport?

I'm working on a Vue poject and I let the user choose the width and height of app main container by clicking on each device specific icon (mobile, tablet, laptop and desktop). something like firefox responsive tool. how can I force elements inside the main container respond to it's own viewport rather than browser viewport?
I'm using UIKit width component to define my breakpoints. I know I can achieve this by adding/removing classes dynamically, but my Vue components are added dynamicallly by the user, so it's more complex.
I thought there might be a more generic way to do this. here's the sample code ( number of visible slides changes in defferent viewports and if my component is a grid element items inside it should wrap ( based on container width ) ):
<div id="main-container" :style="{width: deviceWidth, height: deviceHeight}">
<!-- Dynamically added component -->
<div class="uk-position-relative uk-visible-toggle uk-light" uk-slider>
<!-- UIKit Width classes -->
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="../../img/01.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>1</h1></div>
</li>
<li>
<img src="../../img/02.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>2</h1></div>
</li>
<li>
<img src="../../img/03.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>3</h1></div>
</li>
<li>
<img src="../../img/04.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>4</h1></div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>

Explanation
This is a very simple, and minimal answer, it's literally been written to simply illustrate how you can tackle your problem, but as you can see within this answer, pressing the different buttons makes the containing element grow/shrink.
As you can see within this solution, all of the elements that are responsive will respond based on the parent element's size. It's really easy to achieve this if you use fixed sizes, like in my example.
Although, take note, I only selected to use a very minimal implementation, no use of Vue or anything sophisticated, this is a simple solution, using native technologies only.
Edit
After having learned exactly what you're looking for, the long story short is that there's no clean & easy way to do that, at least to my knowledge, your best bet would be to simply change & alter the classes, that, by far makes the most sense.
Because your question is somewhat vague, to me it appears that you're trying to execute logic similar to what #arieljuod has stated, where you're trying to run media queries on specific DOM elements rather than the user's viewport.
I'm sorry to inform you that to my knowledge there's no clean and easy way to achieve this, not to say that there isn't a way, I'm sure someone has found a way, but a clean, concise, easy to read, solution, I highly doubt there's such a solution.
const clickHandler = txt => {
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
break;
case 'Tablet':
clName = 'tablet';
break;
case 'Mobile':
clName = 'mobile';
break;
default:
clName = 'desktop';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
Possible Solution
What I would do in this scenario is as stated above, alter classes on the slider, like so, I mean you could use extra/additional logic to check the user's width & whatnot, but this is possibly the most simplistic approach possible.
const clickHandler = txt => {
const slider = document.getElementById("mySlider");
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
break;
case 'Tablet':
clName = 'tablet';
slider.className = 'uk-slider-items uk-child-width-1-3';
break;
case 'Mobile':
clName = 'mobile';
slider.className = 'uk-slider-items uk-child-width-1-2';
break;
default:
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul id="mySlider" class="uk-slider-items uk-child-width-1-4">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>

How to push lower row items of a flex box further down to create space for addtional content upon click?

I created an HTML flex-box that displays images based on data returned from API which is somewhat like this:-
[![THIS][1]][1]
Now I want to display additional data upon clicking on a specific div element.So that the lower divs move further down and create space for "expand" section
[![Say like space for tiffin is produced in here][2]][2]

Why not insert a placeholder flex row below each specific flex data row?
I created an demo where you can run this snippet and click each row to figure out if it works for you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.flex-box {
width: 800px;
display: flex;
flex-direction: column;
}
.flex-box__nav {
display: flex;
}
.flex-box__item {
flex: 1;
border: 1px solid black;
}
.flex-box__collapse {
display: none;
background: red;
}
</style>
<div class="flex-box">
<ul class="flex-box__nav">
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
</ul>
<div class="flex-box__collapse">
collapsed area
</div>
<ul class="flex-box__nav">
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
<li class="flex-box__item">click me
<img src="">
</li>
</ul>
<div class="flex-box__collapse">
collapsed area
</div>
</div>
<script>
function clickHanlder() {
var isCollapse = true;
return function () {
this.nextSibling.nextSibling.style.display = isCollapse ? "block" : "none";
isCollapse = !isCollapse;
}
}
document.querySelectorAll(".flex-box__nav").forEach(function (val) {
val.onclick = clickHanlder();
});
</script>
</body>
</html>

how to use same jQuery function on multiple group of lists

I have Unordered list, and each item of the list has a list of images. I wrote a jQuery function to operate slider using prev and next. The function working write when there is only one list of images. Nonetheless, when I have list and each item has list of images when ever I clicked on any slider only the first slider is working regardless on which slider I clicked. my question is, How can I modify the jQuery function to operate only for the slider that I clicked on and not other sliders for other group of images.
Here is the html code:
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act" >
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>
Here is the jQuery function:
$(document).ready(function() {
$('.swipe-prev').click(function(){
console.log("Prev"); // Print "Prev" on click swipe-prev
var prevImg = $('img.active').prev('.result-image-act img');
if(prevImg.length == 0) {
prevImg = $('.result-image-act img:last');
}
$('img.active').removeClass('active');
prevImg.addClass('active');
});
$('.swipe-next').click(function() {
console.log("Next"); // Print "Next" on click swipe-next
var nextImg = $('img.active').next('.result-image-act img');
if(nextImg.length == 0) {
nextImg = $('.result-image-act img:first');
}
$('img.active').removeClass('active');
nextImg.addClass('active');
});
});

You may reduce everything to only one event handler.
$('.swipe-prev, .swipe-next').on('click', function (e) {
var op = ($(this).is('.swipe-prev')) ? 'prev' : 'next';
var firtOrlast = ($(this).is('.swipe-prev')) ? 'last' : 'first';
var imgList = $(this).closest('.result-row');
var currImg = imgList.find('.result-image-act img.active');
var nextImg = currImg[op]();
if (nextImg.length == 0) {
nextImg = imgList.find('.result-image-act img:' + firtOrlast);
}
currImg.removeClass('active');
nextImg.addClass('active');
});
.active {
padding: 3px;
border: 1px solid #021a40;
background-color: #ff0;
}
.swipe-wrap {
display: inline-flex;
}
.swipe-wrap > div {
padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p> ></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>

Your problem is coming from how you find the active image. There are presumably multiples, but you want to find the one related to whatever was clicked. Change lines like this:
$('img.active')
to something like:
$(this).closest("ul.results").find("img.active")
to get the img.active within the clicked ul.

Flexslider main image open in fancybox

I want to open main image in fancybox when click on main image in flexslider.
If possible that when click on main image and open it in fancybox with all thumbnail as like display in flexslider with prev and next button.
How to do it possible? Is there any parameter in flexslider or need to do customization?
Please help me. I mention code here.
Thanks
=> Code :
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox.css"/>
<script src="modernizr.js"></script>
<script src="jquery.flexslider.js"></script>
<style type="text/css">
#import "https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css";
body { font-family: avenir, sans-serif; }
#slider .slides img {
width: 450px;
height: 300px;
margin: 0 auto;
}
.container{
max-width: 50%;
margin : 0 auto;
}
#carousel .flex-active-slide img {
opacity: 1;
}
#carousel img {
opacity: 0.65;
}
.flex-direction-nav .flex-next { right: 0 !important; margin-right: -40px; }
.flex-direction-nav .flex-prev { left: 0 !important; margin-left: -40px; }
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; cursor: pointer;}
</style>
<script type="text/javascript">
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 70,
itemMargin: 10,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
$('#carousel li').click(function() {
$('#carousel li').removeClass('flex-active-slide')
$(this).addClass('flex-active-slide');
});
</script>
</head>
<body>
<!-- Include jQuery library and Flexslider script -->
<!-- Place somewhere in the <body> of your page -->
<div class="container">
<div id="slider" class="flexslider" onclick="func(this)">
<ul class="slides">
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<li>
<img src="7.jpg" />
</li>
<li>
<img src="8.jpg" />
</li>
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<li>
<img src="7.jpg" />
</li>
<li>
<img src="8.jpg" />
</li>
<li>
<img src="1.jpg" />
</li>
<li>
<img src="2.jpg" />
</li>
<li>
<img src="3.jpg" />
</li>
<li>
<img src="4.jpg" />
</li>
<li>
<img src="5.jpg" />
</li>
<li>
<img src="6.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</div>
</body>
</html>

fancyBox works with any slider/carousel, you just have to iniatialise using .selector option and you have to tweak this to suit your needs, e.g., this selector has to return visible links and has to exclude duplicates. Something like this:
$().fancybox({
selector : '.slides li:not(.clone) a'
});
Here are demos using
Slick - https://codepen.io/fancyapps/pen/pdbrjx
OwlCarousel2 - https://codepen.io/fancyapps/pen/mqvOoz
Swiper - https://codepen.io/fancyapps/pen/eWVyVg
flexslider - https://codepen.io/fancyapps/pen/QQdXwx

jQuery - Search results View - List & Grid

I am fairly new to jQuery and I am making a results page where the user can switch between list and grid view. It does seem to work but when I have a lot of results it seems to be buggy. Can anyone see why this may be?
CODEPEN DEMO
Any help would be much appreciated.
JS
$('.btn.grid').click(function() {
if (!$(this).hasClass("active")) {
$(this).addClass("active");
$('.results-wrapper .grid_12').removeClass("grid_12").addClass("grid_3");
$('.wrapper .results').addClass("grid-view-active");
if ($(".btn.list").hasClass("active")) {
$(".btn.list").removeClass("active");
$('.wrapper .results').removeClass("list-view-active");
}
}
});
$('.btn.list').click(function() {
if (!$(this).hasClass("active")) {
$(this).addClass("active");
$('.results-wrapper .grid_3').removeClass("grid_3").addClass("grid_12");
$('.wrapper .results').addClass("list-view-active");
if ($(".btn.grid").hasClass("active")) {
$(".btn.grid").removeClass("active");
$('.wrapper .results').removeClass("grid-view-active");
}
}
});
HTML
<span class="btn grid active">grid</span>
<span class="btn list">list</span>
<div class="wrapper">
<div class="results-wrapper">
<ul class="results">
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
<li class="grid_3">
<h1>Title</h1>
<img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/>
</li>
</ul>
</div>
</div>
CSS
.btn {
background: #ccc;
cursor: pointer;
display: inline-block;
height: 35px;
width: 35px;
}
.btn.active {
background: red;
}
li {
float: left;
height: 200px;
width: 200px;
}
li img {
max-width: 100%;
max-height: 100%;
}
.grid_3 {
width: 25%;
}
.grid_12 {
width: 100%;
}

var gridButton = $('.btn.grid');
var listButton = $('.btn.list');
var isGridActive = true;
gridButton.click(function() {
if(!isGridActive) {
toggleFunction();
}
});
listButton.click(function() {
if(isGridActive) {
toggleFunction();
}
});
var toggleFunction = function(){
listButton.toggleClass("active");
gridButton.toggleClass("active");
if(isGridActive) {
$('.results-wrapper .grid_3').removeClass("grid_3").addClass("grid_12");
$('.wrapper .results').addClass("list-view-active").removeClass("grid-view-active");
} else {
$('.results-wrapper .grid_12').removeClass("grid_12").addClass("grid_3");
$('.wrapper .results').addClass("grid-view-active").removeClass("list-view-active");
}
isGridActive = !isGridActive;
};
If anyone can make that if statement any better that would be excellent.

Categories