i am having a problem first this is the code that i am working on
<section id="portfolio">
<div class="container">
<div class="center">
<h2>Products</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<ul class="portfolio-filter text-center">
<li><a class="btn btn-default " href="#" data-filter="*">All Works</a></li>
<li><a class="btn btn-default" href="#" data-filter=".bootstrap">Creative</a></li>
<li><a class="btn btn-default" href="#" data-filter=".html">Photography</a></li>
<li><a class="btn btn-default active" href="#" data-filter=".wordpress">Web Development</a></li>
</ul><!--/#portfolio-filter-->
<div class="row">
<div class="portfolio-items">
<div class="portfolio-item apps col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item1.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item1.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item joomla bootstrap col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item2.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item2.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item bootstrap wordpress col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item3.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item3.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item joomla wordpress apps col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item4.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item4.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item joomla html bootstrap col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item5.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item5.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item wordpress html apps col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item6.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item6.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item wordpress html col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item7.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item7.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item wordpress html bootstrap col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item8.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item8.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
</div>
</div>
</div>
</section><!--/#portfolio-item-->
as u can see it's a portfolio page and it's has random images and as u click on of the data-filter it will show u the images of that section ,but i am having a problem that when i reload the page ,all the images jump into the page and how many images i put all of them will appear ,and that's not good ,what i want to do is that for example if i reload the page only and automatically the "Creative images" tab images only appear ,i am strugling on how to do that this is my javascript code
// portfolio filter
$(window).load(function(){'use strict';
var $portfolio_selectors = $('.portfolio-filter >li>a');
var $portfolio = $('.portfolio-items');
$portfolio.isotope({
itemSelector : '.portfolio-item',
layoutMode : 'fitRows'
});
$portfolio_selectors.on('click', function(){
$portfolio_selectors.removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$portfolio.isotope({ filter: selector });
return false;
});
});
any reply it will be very helpful thanks in advance.
Demo
filter: '.bootstrap' in the initialization will hide all other div's. filter option can be used while initializing isotope.
// portfolio filter
var $portfolio_selectors = $('.portfolio-filter >li>a');
var $portfolio = $('.portfolio-items');
$portfolio.isotope({
itemSelector: '.portfolio-item',
layoutMode: 'fitRows',
filter: '.bootstrap'
});
$portfolio_selectors.on('click', function () {
$portfolio_selectors.removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$portfolio.isotope({
filter: selector
});
return false;
});
Related
I'm looking for a way to add a new bootstrap 4 accordion when I click on button. Anybody could you please help me on that? And moreover, code should be implemented in Jquery. That too, I don't know whether it is possible or not to add new accordion dynamically in jquery.
<script>
$(document).ready(function(){
$('#addAccordion').click( function() {
var newDiv = "<div class='card'> <div class='card-header'> <a class='card-link' data-toggle='collapse' href='#collapseOne'>
Collapsible Group Item #1</a>
</div>
<div id='collapseOne' class='collapse show' data-parent='#accordion'>
<div class='card-body'>Lorem ipsum dolor sit amet,</div> </div> </div>";
$('.display').append(newDiv);
});
});
</script>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet,
</div>
</div>
</div>
</div>
<div class="display"> </div>
<button id="addAccordion">Add new accordion</button>
With this you can add dynamic accordion also open and close accordion dynamically
let id = 0
$('#addAccordion').click(() => {
id++
var test = "<div class='card'> <div class='card-header'> <a class='card-link' data-toggle='collapse' href='#collapse"+id+"'>" +
"Collapsible Group Item "+id+"</a> </div> <div id='collapse"+id+"' class = 'collapse' data-parent = '#accordion' ><div class='card-body'> Lorem ipsum dolor sit amet, </div> </div> </div>";
$('.display').append(test);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet,
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
consectetur adipisicing
</div>
</div>
</div>
</div>
<div class="display"> </div>
<button id="addAccordion" type="button">Add new accordion</button>
please vote answer as a useful if this is a solution, thank you in advance.
You just need to use backtick instead of inverted comma actually there was syntax error where you define var newDiv
Working Code:-
$(document).ready(function(){
$('#addAccordion').click( function() {
var newDiv = `<div class='card'> <div class='card-header'> <a class='card-link' data-toggle='collapse' href='#collapseOne'>
Collapsible Group Item #1</a>
</div>
<div id='collapseOne' class='collapse show' data-parent='#accordion'>
<div class='card-body'>Lorem ipsum dolor sit amet,</div> </div> </div>`;
$('.display').append(newDiv);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet,
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
consectetur adipisicing
</div>
</div>
</div>
</div>
<div class="display"> </div>
<button id="addAccordion">Add new accordion</button>
I Want to know why we use the intersection observer API. I want to load my page sections in an interval. Does it affect the page speed or not?
Below is my code. I'm confused why I'm using this when it has no effect on speed or any other things. I have an array of sections and a loader while threshold call.
Please explain to me why we are using this API while it has no advantage
const featureds = document.querySelectorAll(".featured");
const options = {
root: null,
threshold: 0.25,
rootMargin: '0px'
};
const observer = new IntersectionObserver(function(entries,observer) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
}
console.log(entry);
});
}, options);
featureds.forEach(featured => {
observer.observe(featured);
});
<div class="container featured 1">
<div class="row">
<div class="col-12">
<!-- <h4 class="team-name"></h4> -->
<h3 class="team-expert"><span>Feature Posts</span></h3>
<div class="feature-post">
<div class="container">
<div class="owl-carousel team-slider nospace group team">
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book1.png" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book2.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book5.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book3.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book7.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- feature posts ends -->
<!-- popular posts starts -->
<div class="container featured 2">
<div class="row">
<div class="col-12">
<!-- <h4 class="team-name"></h4> -->
<h3 class="team-expert"><span>Popular Posts</span></h3>
<div class="popular-post">
<div class="container">
<div class="owl-carousel team-slider nospace group team">
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book8.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book2.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book5.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book3.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book7.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to use an image inside a tab on bootstrap to hyperlink into a different panel/tab. For instance, in the code below, I want to hyperlink the first image in the all tab to open the tab/panel Branding. Is this possible? So far I tried to use an anchor tag of the panel Id but it's not working.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container mt-5">
<!--Section: Content-->
<section class="dark-grey-text text-center">
<style>
.md-pills .nav-link.active {
background-color: #3f51b5;
}
</style>
<!-- Section heading -->
<h3 class="font-weight-bold mb-4 pb-2">Our best projects</h3>
<!-- Section description -->
<p class="text-muted w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quas, eos officia maiores ipsam ipsum dolores reiciendis ad voluptas, animi obcaecati adipisci sapiente mollitia. </p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-12">
<!-- Nav tabs -->
<ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">
<li class="nav-item">
<a class="nav-link active font-weight-bold" data-toggle="tab" href="#panel31" role="tab">ALL</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">BRANDING</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">PACKAGING</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">PRINT DESIGN</a>
</li>
</ul>
</div>
<!--First column-->
</div>
<!--First row-->
<!--Tab panels-->
<div class="tab-content">
<!--Panel 1-->
<div class="tab-pane fade show in active" id="panel31" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade" id="panel32" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project5.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade" id="panel33" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project3.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project6.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 3-->
<!--Panel 4-->
<div class="tab-pane fade" id="panel34" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project7.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 4-->
</div>
<!--Tab panels-->
</section>
</div>
Basically you need to wrap your featured images with anchor tags, and on their clicks, find those nav links inside the nav tabs and trigger their clicks.
First, add an ID for those nav tab links you want those images to trigger the clicks for. Later I can wrap the images with anchor tags and set their href to javascript:document.getElementById().click(); to trigger nav link's clicks.
I've tried to use javascript:document.querySelector(a[href="#xxx"]).click(); but for some reason that didn't work out.
<!-- Nav tabs -->
<ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">
<li class="nav-item">
<a class="nav-link active font-weight-bold"
data-toggle="tab" href="#panel31" role="tab">
ALL
</a>
</li>
<li class="nav-item">
<a id="branding-tab-link"
class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">
BRANDING
</a>
</li>
<li class="nav-item">
<a id="packaging-tab-link"
class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">
PACKAGING
</a>
</li>
<li class="nav-item">
<a id="print-design-tab-link"
class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">
PRINT DESIGN
</a>
</li>
</ul>
And then the rest is just to wrap featured images with anchor tags and set their hrefs:
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<a href="javascript:document.getElementById('branding-tab-link').click();">
<div />
<p />
</a>
</div>
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a href="javascript:document.getElementById('packaging-tab-link').click();">
<div />
<p />
</a>
</div>
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a href="javascript:document.getElementById('print-design-tab-link').click();">
<div />
<p />
</a>
</div>
You can also write some custom jQuerys and bind image clicks to trigger nav tab link clicks. I just thought people might like achieving this without writing any additional JavaScripts separately.
demo: https://jsfiddle.net/davidliang2008/q9ztuv4w/8/
Scoll to the top after click?
Yea it's possible, but now instead of inline JavaScript, it makes more sense to write some custom JavaScripts to listen to the clicks, triggers nav link and do the scrolling.
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<a data-nav-link-id="#branding-tab-link" href="#" class="reference-link">
<div />
<p />
</a>
</div>
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a data-nav-link-id="#packaging-tab-link" href="#" class="reference-link">
<div />
<p />
</a>
</div>
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a data-nav-link-id="#print-design-tab-link" href="#" class="reference-link">
<div />
<p />
</a>
</div>
$(function() {
$('a.reference-link').click(function(){
// Get the nav link id from data attribute
let navLinkId = $(this).data('nav-link-id');
// Simulate the click on nav link
$(navLinkId).trigger('click');
// Scroll the document body to the top
$(body).scrollTop();
// Disable original click event on the reference-link
return false;
});
});
demo: https://jsfiddle.net/davidliang2008/q9ztuv4w/20/
This is the way to navigate to a tab by clicking any as requested:
https://jsfiddle.net/contactmikebray/Ldhpnqwg/
Summary:
Bootstrap uses jQuery so you can take advantage of the .click() event that is provided. Listen for an click on all image elements (can be replaced with other selectors). When an image is clicked, prop the tab show event.
<script type="text/javascript">
$(document).ready(function() {
$("img").click(function() {
$('.nav a[href="#panel32"]').tab('show');
})
});
</script>
Similar to:
Changing active Bootstrap 3 tab using jQuery
I am working on an html page where i have div element and also a inner div element. In the inner div element there is a image element. The main and inner div are 2 in numbers.
<div class="owl-stage-outer">
<div class="owl-item" style="width: 1903px;"><div class="header-single-slider">
<figure>
<img src="assets/img/sliders/slider01.jpg" alt="">
<figcaption>
<div class="content">
<div class="container inner-content text-left">
<h1 style="display: block;" class="fadeInUp animated">We Build Your<br><span>Business</span> IDEA</h1>
<p style="display: block;" class="fadeInDown animated">There are many variations of passages of Lorem Ipsum available but the majority have suffered injected humour dummy now.</p>
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</figcaption>
</figure>
</div></div>
<div class="owl-item active" style="width: 1903px;"><div class="header-single-slider">
<figure>
<img src="assets/img/sliders/slider02.jpg" alt="">
<figcaption>
<div class="content">
<div class="container inner-content text-left">
<h1 style="display: block;" class="fadeInUp animated">We Build Your<br><span>Business</span> IDEA</h1>
<p style="display: block;" class="fadeInDown animated">There are many variations of passages of Lorem Ipsum available but the majority have suffered injected humour dummy now.</p>
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</figcaption>
</figure>
</div></div>
</div>
Here the main div whose class is 'owl-item' is used 2 times and the inner div whose class is 'header-single-slider' is also used 2 times. When the program runs The main div whose class is 'owl-item', its class changes to 'owl-item acitve' means this class is active now and second div class remain as 'owl-item'. after some seconds the second div will becomes active and its class becomes'owl-item active' and first will remain inactive and its class will be 'owl-item'
I want to find the image src of that div whose class is 'owl-item active'. For this i used the following query:
alert($('.owl-item active').children('div').children("img").attr('src'));
But it is showing alert message as 'Undefined'. How to solve this?
You didn't select your active owl-item correctly.
You can simply use
$('.owl-item.active>div>figure>img').attr('src')
If you're sure you only have one img in your div, just use '.owl-item.active img' instead.
console.log($('.owl-item.active>div>figure>img').attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="owl-stage-outer">
<div class="owl-item" style="width: 1903px;">
<div class="header-single-slider">
<figure>
<img src="assets/img/sliders/slider01.jpg" alt="">
<figcaption>
<div class="content">
<div class="container inner-content text-left">
<h1 style="display: block;" class="fadeInUp animated">We Build Your<br><span>Business</span> IDEA</h1>
<p style="display: block;" class="fadeInDown animated">There are many variations of passages of Lorem Ipsum available but the majority have suffered injected humour dummy now.</p>
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
<div class="owl-item active" style="width: 1903px;">
<div class="header-single-slider">
<figure>
<img src="assets/img/sliders/slider02.jpg" alt="">
<figcaption>
<div class="content">
<div class="container inner-content text-left">
<h1 style="display: block;" class="fadeInUp animated">We Build Your<br><span>Business</span> IDEA</h1>
<p style="display: block;" class="fadeInDown animated">There are many variations of passages of Lorem Ipsum available but the majority have suffered injected humour dummy now.</p>
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
You forgot a . before active
$('.owl-item.active img').attr('src')
You can use find method.
console.log($('.owl-item.active').find('figure>img').attr('src'));
I want to do Bootstrap 3 carousel with image change when mouse cursor will be on thumbnail under carousel.
Now I've got something like this, I've got carousel and thumbnails under it, in bootstrap normally image changes with time , I want this if it's possible to change with time and when you point your mouse to thumbnail under carousel image will change also.
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="900x500" >
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#666" alt="900x500" >
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="900x500"
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<div class="container thumbs">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="display: inline;" alt=""> </a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://www.vpwallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-10.png" style="display: inline;" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://www.vpwallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-10.png" style="display: inline;" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://www.vpwallpapers.com/wp-content/uploads/2013/11/Cat-Wallpaper-10.png" style=" display: inline;" alt="">
</a>
</div>
</div>
</div>
and bootply:
http://bootply.com/104037
Thanks for your help , best regards.
There is this option called number which you can use to slide to a specific image. See link
.carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an
array).
All you need to get index value of the hovered thumb and pass that as the option to carousel.
$('.thumbnail').on('mouseover',function(){
var slide_to = $('.thumbnail').index($(this));
$('.carousel').carousel(slide_to);
});
See Demo