I have an owl carousel that has a toggle button displayed above it. In the carousel there is a boys set of golf clubs and a girls set of golf clubs. I want users to be able to toggle between the 2 sets but I am a beginner at javascript/jquery. Can someone point me in the right direction to achieve this? Thank you.
<section>
<div class="input-wrap">
<input id="input-7" checked="" type="checkbox">
<label for="input-7">Select</label>
</div>
</section>
<div class="col-xs-12">
<div class="row containerCarousel">
<div class="col-lg-8 col-md-8 col-sm-12 col-lg-offset-2 col-md-offset-2">
<div id="home-carousel" class="owl-carousel homeCarousel">
<div class="slide">
<a href="#">
<img src="images/FB/Bag-Bl#2x.jpg?$staticlink$" alt="gapr chart" class="img-responsive boy"/>
<img src="images/FB/Bag-Pnk#2x.jpg?$staticlink$" alt="gapr chart" class="img-responsive girl"/>
</a>
<h3>01. WHOLE BAG</h3>
</div>
</div>
</div>
</div>
</div>
It's just 1 carousel but I'm trying to incorporate a toggle switch to display a new set of images.
I suggest you to use data-* attributes and the jQuery .data() method then. And use only one image per .slide... Then toggle the src.
$("#boyGirlToggle").on("click",function(){
// Button's text
if($(this).text() == "Boys"){
$(this).text("Girls");
dataAttr = "girls";
}else{
$(this).text("Boys");
dataAttr = "boys";
}
// Change image src.
$(".slide img").each(function(){
$(this).attr("src",$(this).data(dataAttr));
});
}).trigger("click");
$("#home-carousel").owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<section>
<div class="input-wrap">
<input id="input-7" checked="" type="checkbox">
<label for="input-7">Select</label>
</div>
</section>
<br>
<button id="boyGirlToggle">Girls</button><br>
<br>
<div class="col-xs-12">
<div class="row containerCarousel">
<div class="col-lg-8 col-md-8 col-sm-12 col-lg-offset-2 col-md-offset-2">
<div id="home-carousel" class="owl-carousel homeCarousel">
<div class="slide">
<a href="#">
<img data-boys="https://via.placeholder.com/200x200?text=boys1" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls1"/>
</a>
<h3>01. IMAGE</h3>
</div>
<div class="slide">
<a href="#">
<img data-boys="https://via.placeholder.com/200x200?text=boys2" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls2"/>
</a>
<h3>02. IMAGE</h3>
</div>
<div class="slide">
<a href="#">
<img data-boys="https://via.placeholder.com/200x200?text=boys3" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls3"/>
</a>
<h3>03. IMAGE</h3>
</div>
<div class="slide">
<a href="#">
<img data-boys="https://via.placeholder.com/200x200?text=boys4" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls4"/>
</a>
<h3>04. IMAGE</h3>
</div>
<div class="slide">
<a href="#">
<img data-boys="https://via.placeholder.com/200x200?text=boys5" alt="gapr chart" class="img-responsive boy" data-girls="https://via.placeholder.com/200x200?text=girls5"/>
</a>
<h3>05. IMAGE</h3>
</div>
</div>
</div>
</div>
</div>
Have a look in full page mode... ;)
Related
i have this good loking box grid
However, after adding a data filter and toggling between filters, the images appear in the same exact location and size as the grid that I designed. Is it feasible to have a data filter that displays all filtered images in one size?
this is my grid code
<div class="container">
<div class="text-center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="bootstrap">BootStrap</button>
<button class="btn btn-default filter-button" data-filter="bootstrax">BootStrax</button>
<button class="btn btn-default filter-button" data-filter="purecss">Pure CSS</button>
</div>
<div class="container container-box">
<style>
.container-box{
width: 600px; }
</style>
<div class="row">
<div class="col-12"><img width="600" class="img-fluid pb-3 filter bootstrax "
src="./images/01.jpg" alt=""></div>
</div>
<div class="row g-3">
<div class="col-4"><img width="200" class="img-fluid filter bootstrap"
src="./images/02.jpg" alt=""></div>
<div class="col-4"><img width="200" class="img-fluid filter purecss"
src="./images/03.jpg" alt=""></div>
<div class="col-4"><img width="200" class="img-fluid filter bootstrax"
src="./images/04.jpg" alt=""></div>
</div>
</div>
</div>
$(document).ready(function() {
$(".filter-button").click(function(e) {
var value = $(this).attr("data-filter");
if (value == "all") {
$(".filter").show("1000");
} else {
$(".filter").filter("." + value).show("3000");
$(".filter").not("." + value).hide("3000");
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
Is it possible to achieve that outcome in js, css, and html? Alternatively, if somebody has a better suggestion, please enlighten me.
You can simply use isotop js library by adding the following cdn to your script area :
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.min.js"></script>
You can still have the nested gallery structure and use the data filter by using isotope, also the filtered images will show properly one beside the other, and of course you will still have the same grid structure that will not be affected.
<div class="container text-center pt-5">
<div class="row">
<div class="col-md-12">
<div class="filters">
<h4>Featured categories</h4>
<ul>
<li data-filter=".idea">Furniture <img class="dot" src="./images/dot.svg"
alt=""></li>
<li data-filter=".ui">lighting <img class="dot" src="./images/dot.svg"
alt=""></li>
<li data-filter=".ux">Accessories <img class="dot" src="./images/dot.svg"
alt=""></li>
<li data-filter=".code">Tailor-made objects <img class="dot"
src="./images/dot.svg" alt=""></li>
<li class="is-checked fp" data-filter="*">All</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="rows grid data-isotope='{ "itemSelector": ".grid-item", "masonry":
{ "columnWidth": 200 } }'">
<div class="col-md-12 grid-item code">
<img class="img-fluid" src="./images/01.jpg" alt="">
</div>
<div class="col-md-4 grid-item ux ">
<img class="img-fluid img-grid" src="./images/02.jpg" alt="">
</div>
<div class="col-md-4 grid-item ui">
<img class="img-fluid img-grid" src="./images/03.jpg" alt="">
</div>
<div class="col-md-4 grid-item idea">
<img class="img-fluid img-grid" src="./images/04.jpg" alt="">
</div>
<div class="col-md-4 grid-item ux ">
<img class="img-fluid img-grid" src="./images/02.jpg" alt="">
</div>
<div class="col-md-4 grid-item ui">
<img class="img-fluid img-grid" src="./images/03.jpg" alt="">
</div>
<div class="col-md-4 grid-item idea">
<img class="img-fluid img-grid" src="./images/04.jpg" alt="">
</div>
<div class="col-md-4 grid-item ux ">
<img class="img-fluid img-grid" src="./images/02.jpg" alt="">
</div>
<div class="col-md-4 grid-item ui">
<img class="img-fluid img-grid" src="./images/03.jpg" alt="">
</div>
<div class="col-md-4 grid-item idea">
<img class="img-fluid img-grid" src="./images/04.jpg" alt="">
</div>
</div>
</div>
and use the following script as well
var $grid = $('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows',
});
// change is-checked class on buttons
var $buttonGroup = $('.filters');
$buttonGroup.on( 'click', 'li', function( event ) {
$buttonGroup.find('.is-checked').removeClass('is-checked');
var $button = $( event.currentTarget );
$button.addClass('is-checked');
var filterValue = $button.attr('data-filter');
$grid.isotope({ filter: filterValue });
});
Best of luck
I have a problem with owl carousel and till now I don't have any ideas how to fix it.
So on the image 1 you can see the normal behaviour of the slider. On the second one you will see the extended functionality of it. The idea is very simple, when user click on the element, he should expand it, but when the element is expanded all other element goes to 2 rows and I don't want to happen.
Image 1
Image 2
also Source code of one element
<div class="element box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs, sales sheets, proposals, scenario illustrations, brochures, posters, custom displays for trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
also will share and jquery code
$(".owl-carousel").owlCarousel({
margin:10,
loop: true,
autoWidth: true,
items:3,
rewind: true,
autoplay: true,
responsiveClass:true,
});
$('.work').each(function(i, el) {
$parent = $(el);
$('.element', $parent).each(function(i, item) {
$element = $(item)
$element.on('click', function(e) {
$current = $(this)
console.log($current)
if ($('.parent', $current).hasClass('hidden')) {
$('.parent', $current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius', 10)
$('.child', $current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent', $current).removeClass('visible').addClass('hidden');
$current.css('border-radius', 20)
$('.child', $current).removeClass('hidden');
}
})
})
})
dears friends.
I found this photo gallery ins this site: http://playgallery.siteseguro.ws/
I would like to use it but the play and pause button don't get anywhere. The buttons are not working and I don't see any code to make this work.
Is it possible to make this work? Below is the optimized code:
<html>
<head>
<link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-bootstrap.css"/>
<link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-style.css"/>
<link rel='stylesheet' id='fontawesome-css' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' />
</head>
<body>
<div class="col-slick-4">
<div class="slick-gallery">
<div class="slick-slider carousel-child" id="child-carousel" data-for=".carousel-parent" data-arrows="true" data-loop="false" data-dots="false" data-swipe="true" data-items="4" data-xs-items="4" data-sm-items="4" data-md-items="4" data-lg-items="5" data-slide-to-scroll="1">
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s1.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s2.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s3.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s4.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s5.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s6.jpg"/>
</div>
</div>
</div>
</div>
<div class="slick-controls">
<div class="slick-controls-pause"><span class="fa fa-pause"></span></div>
<div class="slick-controls-play"><span class="fa fa-play"></span></div>
</div><br><br>
<div class="slick-slider carousel-parent" data-arrows="false" data-loop="false" data-dots="false" data-swipe="true" data-items="1" data-child="#child-carousel" data-for="#child-carousel" data-lightgallery="group">
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s1.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s2.jpg" height="480" /></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s3.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s4.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s5.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s6.jpg" alt="" height="480"/></div>
</div>
</div>
</div> <!-- /col-slick-4 -->
<script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-core.min.js"></script>
<script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-script.js"></script>
</body>
</html>
you would have to add some jquery
$('.slick-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
pauseOnDotsHover:false,
autoplaySpeed:500,
dots: false,
arrows: false,
infinite: true
});
$('#pause').click(function() {
$('.slick-slider').slick('slickPause');
});
$('#play').click(function() {
$('.slick-slider').slick('slickPlay');
});
And then edit your buttons to have an id of pause and play respectively and remove the a tag
<div class="slick-controls">
<div class="slick-controls-pause slick-play"><span id="pause" class="fa fa-pause"></span></div>
<div class="slick-controls-play slick-play"><span id="play" class="fa fa-play"></span></div>
</div><br><br>
If you want to keep the pointer on hover. Instead of using an a tag. Use cursor: pointer; on your .slick-play
I am working on a site which has been created using Angular. On the homepage I have a Service Box that contains icons which redirects us to different pages. Currently when I click on service box icon it displays the service box:
Now Whenever I click outside of it, it does not close. I am not using jQuery in my project. I have seen many answers for AngularJs but none worked.
Here is my code for service-box.component.html:
<button mat-icon-button (click)="opened = !opened">
<mat-icon>apps</mat-icon>
</button>
<div class="box" [class.opened]="opened">
<div class="tip">
<div class="border"></div>
<div class="foreground"></div>
</div>
<div class="services">
<div class="row">
<a href="https://blog.fossasia.org">
<div class="col">
<div class="img">
<img src="assets/images/blog.png" alt="Fossasia">
</div>
<span>Blogs</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search">
<div class="col">
<div class="img">
<img src="assets/images/github.png" alt="Fossasia">
</div>
<span>Github</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search/issues">
<div class="col">
<div class="img">
<img src="assets/images/bug.png" alt="Fossasia">
</div>
<span>Bug Report</span>
</div>
</a>
</div>
</div>
<hr />
<div class="services">
<div class="row">
<a href="https://fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/fossasia_logo_55x22.png" width="55" height="22" alt="Fossasia">
</div>
<span>FOSSASIA</span>
</div>
</a>
<a href="https://phimp.me">
<div class="col">
<div class="img">
<img src="assets/images/phimpme_64x64.png" width="50" height="50" alt="Phimpme">
</div>
<span>Phimpme</span>
</div>
</a>
<a href="https://susper.com/">
<div class="col">
<div class="img">
<img src="assets/images/susper_60x16.png" width="60" height="16" alt="Susper">
</div>
<span>Susper</span>
</div>
</a>
</div>
<div class="row">
<a href="https://chat.susi.ai/">
<div class="col">
<div class="img">
<img src="assets/images/susi_60x12.png" width="60" height="12" alt="Susi.AI">
</div>
<span>Susi.AI</span>
</div>
</a>
<a href="https://pslab.fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/pslab_64x68.png" width="50" height="50" alt="PSLab">
</div>
<span>PSLab</span>
</div>
</a>
<a href="https://eventyay.com/">
<div class="col">
<div class="img">
<img src="assets/images/eventyay.png" width="60" height="18" alt="Eventyay">
</div>
<span>Eventyay</span>
</div>
</a>
</div>
</div>
</div>
service-box.component.ts contains only a public variable opened set to false by default.
I have tried to wrap up whole code of service-box.component.html in a div and used (focusout) event like this:
<div id="side-menu" (focusout)="opened=false">
//Rest of code as in service-box.component.html
</div>
But doing this disables the links in service box.
Any suggestion will be of great help.
You seem to be using #angular/material and therewith the CDK. You should try the CDK's Overlay package.
The overlay package provides a way to open floating panels on the screen.
By setting the attribute hasBackdrop, the overlay will create a backdrop element (= everything outside of your component) and with it a backdropClick #Output event, to which you could bind the closing of your "Service Box".
I'm a novice coder and working on a personal website and was really hoping to use the isotope filter function in the portfolio section of my site. I've been having trouble with it however and was wondering if anyone might be able to provide guidance? I'm not sure whether it's my html or jquery at this point. Very much appreciated!
Thank you,
Joanna
HTML:
<!--PORTFOLIO-->
<section id="portfolio-section" class="text-left">
<div class='container'>
<div class="row">
<div class="col-md-12">
<div class="portfolio">
<div class='container'>
<div class="page-header text-center wow fadeInDown" data-wow-delay="0.4s">
<h2>Portfolio</h2>
<h4>Increasing the accessibility & usefulness of data to decision-makers</h4>
</div>
</div>
<div class="portfolio_content_area">
<div class="portfolio_menu">
<center>
<ul id="filters">
<li class="active_prot_menu"><img src='images/data.png' height='13'> Data Visualisation & Reporting ▪ </li>
<li><img src='images/course.png' height='14'> Coursework ▪ </li>
<li><img src='images/art.png' height='14'> Artwork</li>
</ul>
</center></div>
<div class="portfolio_content" id="portfolio">
<div class='row' id="portfolio">
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="datavis">
<img src="images/1-dv.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/tableau.html" target="_blank"><img src='images/data_white.png' height='17'><h1>LensShift</h1>
<p>Data visualisation of the depth and breadth of the LensShift Taxonomy.<br>By collaborating with my colleagues, I ensure the quality of data is appropriate for effective and creative visualisation.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="datavis">
<img src="images/2-siobn.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/SIOBN_Michaelmas17-18_Impact_Report.pdf" target="_blank"><img src='images/data_white.png' height='17'><h1>SIOBN</h1>
<p>Monitoring & evaluating the Social Impact Oxford Business Network's (SIOBN) initiatives. Providing ongoing reporting to stakeholders on the relevance of activities.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/3-BSC.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/3-bsc.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Skoll Academy</h1>
<p>Strategic consulting project with Big Society Capital investigating social investment models to address domestic violence in the UK.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/4-EY.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/4-EY.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Leadership</h1>
<p>A case study on the motivation and integration of EY's GigNow workforce.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="course">
<img src="images/5-MedData.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="portfolio/5-MedData.html" target="_blank"><img src='images/course_white.png' height='21'><h1>Global Health Challenge</h1>
<p>A case study on using MedData™ to lower the burden of chronic diseases.</p></a></details>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 nopadding">
<div class="pcontainer"><div class="art">
<img src="images/6-insta.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="https://www.instagram.com/joannamakescards_/" target="_blank"><img src='images/art_white.png' height='22'><h1>Art</h1>
<p>Stationery, Design, Lettering</p></a></details>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
</section>
jQuery:
$(window).load(function() {
$('.portfolio_menu ul li').click(function(){
$('.portfolio_menu ul li').removeClass('active_prot_menu');
$(this).addClass('active_prot_menu');
});
var $container = $('#portfolio');
$container.isotope({
itemSelector: '.col-sm-4',
layoutMode: 'fitRows'
});
$('#filters').on( 'click', 'a', function() {
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });
return false;
});
});