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
Related
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 have used bootstrap material carousel. It works fine when I load image statically.Like:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">First Event</h3>
<p>This is our first event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(16).jpg" alt="Second slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Second Event</h3>
<p>This is our second event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Third Event</h3>
<p>This is our third event.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
But when I load images from database i.e dynamically, carousel's images splits in block view and carousel doesn't works anymore. Like when I load in this way:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
{{#each events}}
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="/uploads/{{file}}" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">{{title}}</h3>
<p>{{description}}</p>
</div>
</div>
{{/each}}
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
When I load in this way images are seen in block view one after another instead of carousel.
I can see those images but not as a carousel. I mean I am getting images from back end but they are not displayed well.
For kind information I have used node js and handlebars as template engine.
What is wrong here? I am new to node and sorry if it was a simple question.
The class active is included in all slides, that's why all of them are visible.
FIrst for all, remove the class active in the slides, and with jQuery you can: $('.carousel-item:first-child').addClass('active').
https://api.jquery.com/first-child-selector/
This will add the class active for the first node .carousel-item finded.
Hope it helped.
Cheers.
I'm doing a site and in browser layout, smooth-scroll works perfectly but in mobile layout when I click in a link it doesn't leave me in the right place. Always much lower. Why?
I have reviewed the code and documentation of Smooth Scroll but I can not find anything wrong.
Here is my code:
https://codepen.io/ZeR0ByTe/pen/wrbMRZ
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- ESTILOS CSS -->
<link href="css/estilo.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/blueimp-gallery.min.css">
<!-- scroll -->
<script src="js/smooth-scroll.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
</script>
</link>
</link>
</link>
</meta>
</meta>
</head>
<body>
<header class="d-none d-md-block" >
<div id="sliderFotos" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#sliderFotos" data-slide-to="0" class="active"></li>
<li data-target="#sliderFotos" data-slide-to="1"></li>
<li data-target="#sliderFotos" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url(img/bg-4.jpg">
<div class="carousel-caption d-none d-md-block">
<div class="row">
<div class="col-4 d-flex">
<img class="img-fluid align-self-center logo wow bounceIn" data-wow-duration="1s" src="img/logoSB.png" width="300" height="300" alt="">
</div>
<div class="col-8">
<div class="jumbotron wow bounceIn" data-wow-duration="1s">
<h1 class="display-2 bg-warning">Bienvenidos!</h1>
<p class="lead">Aca iría un primer mensaje de presentación a la página, noticia u otra cosa.</p>
<hr class="m-y-md">
<p>Y se puede complementar con otro texto acá, pero más corto.</p>
<p class="lead">
<a class="btn btn-warning btn-lg" href="#servicio" role="button"><i class="fa fa-arrow-down fa-lg mr-2"></i>Más info
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url(img/bg-7.jpg">
<div class="carousel-caption d-none d-md-block">
<h3>ALGÚN MENSAJE 2</h3>
<p>Descripción 2do mensaje.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url(img/bg-5.jpg">
<div class="carousel-caption d-none d-md-block">
<h3>ALGÚN MENSAJE 3</h3>
<p>Descripción 3er mensaje.</p>
</div>
</div>
</div>
<!-- CONTROLES SLIDER -->
<a data-scroll-ignore class="carousel-control-prev" href="#sliderFotos" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a data-scroll-ignore class="carousel-control-next" href="#sliderFotos" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-xl navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="#">
SBGuardavidas
</img>
</a>
<button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto text-center">
<a class="nav-item nav-link active" data-scroll href="#">
Inicio
</a>
<a class="nav-item nav-link" data-scroll href="#nosotros">
Nosotros
</a>
<a class="nav-item nav-link" href="#">
Publicidad
</a>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="" id="navbarDropdownMenuLink">
Eventos
</a>
<div aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" data-scroll href="#conciencia">
PROYECTO +CONCIENCIA
</a>
<a class="dropdown-item" data-scroll href="#">
Antorchada
</a>
<a class="dropdown-item" data-scroll href="#">
Competencias
</a>
</div>
</li>
<a class="nav-item nav-link" data-scroll href="#galeria">
Galería
</a>
<a class="nav-item nav-link" data-scroll href="#contacto">
Contacto
</a>
</ul>
<div class="d-flex flex-row justify-content-center">
<a class="mr-2 mx-2" href="#">
<i class="fa fa-2x fa-facebook-official" aria-hidden="true"></i>
</a>
<a class="" href="#">
<i class="fa fa-2x fa-instagram" aria-hidden="true"></i>
</a>
</div>
</div>
</nav>
<!-- FIN NAVBAR -->
<!-- NOTICIAS -->
<section class=" d-flex justify-content-center align-content-center flex-wrap iconos" >
<div class="container-fluid" >
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="" id="servicio" >
SIEMPRE A TU SERVICIO
</h2>
<hr>
</div>
</div>
</div>
<div class="container my-5">
<div class="row ">
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.2s">
<div class="">
<i class="fa fa-5x fa-binoculars text-danger sr-icons">
</i>
<h3>
Seguridad
</h3>
<p class="text-muted">
A tu cuidado en la playa, continuamente vigilando.
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.4s">
<div class="service-box">
<i class="fa fa-5x fa-handshake-o text-danger fa-fw">
</i>
<h3>
Confianza
</h3>
<p class="text-muted">
Trabajamos en equipo para un mejor resultado.
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.6s">
<div class="service-box">
<i class="fa fa-5x fa-globe text-danger sr-icons">
</i>
<h3>
Medio Ambiente
</h3>
<p class="text-muted">
Protegemos, concientizamos y educamos.
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.8s">
<div class="service-box">
<i class="fa fa-5x fa-heart text-danger sr-icons">
</i>
<h3>
Pasión
</h3>
<p class="text-muted">
Amamos lo que hacemos.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- FIN NOTICIAS -->
<!-- NOSOTROS -->
<div class="container-fluid nosotros d-flex justify-content-center align-items-center" >
<div class="row">
<div class="col-sm-12">
<h2 class="text-center" id="nosotros">
NOSOTROS
</h2>
<hr>
<p class="lead text-center">
Conocenos un poco más...
</p>
</div>
<div class="col-sm-12 col-md-6 p-4">
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias iste explicabo consectetur mollitia aperiam unde dolor molestias quasi, fuga ipsam incidunt fugiat, quia molestiae eveniet. Aspe
</p>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias iste explicabo consectetur mollitia aperiam unde dolor molestias quasi, fuga ipsam incidunt fugiat, quia molestiae eveniet. Aspe
</p>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias iste explicabo consectetur mollitia aperiam unde dolor molestias quasi, fuga ipsam incidunt fugiat, quia molestiae eveniet. Aspe
</p>
</div>
<div class="col-sm-12 col-md-6 p-4">
<img alt="" class="img-fluid" src="img/equipo.jpg">
</img>
</div>
</div>
</div>
<!-- FIN NOSOTROS -->
<!-- +CONCIENCIA -->
<div class="container-fluid" >
<div class="row ">
<div class="col-sm-12 col-md-6 d-flex justify-content-center align-items-center conciencia-izquierda ">
<img alt="" class="img-fluid" width="400" height="400" src="img/logoSB.png">
</img>
</div>
<div class="col-sm-12 col-md-6 d-flex justify-content-center align-items-center flex-wrap conciencia-derecha">
<h2 class="" id="conciencia">
PROYECTO +CONCIENCIA
</h2>
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, temporibus, animi. Nesciunt fugit unde voluptates cum, aut, quia, doloribus laborum inventore quam nemo repudiandae veniam? Sapiente tempora iusto suscipit quae at eligendi nobis odit voluptatibus quos perspiciatis, assumenda deserunt modi enim minima numquam facilis quis dignissimos, molestias veniam culpa amet!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem et cumque, aliquid. Magnam sapiente aliquam repellat dolorum harum,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas dignissimos aut dolorum aliquam minus, rerum.
</p>
</div>
</div>
</div>
</div>
<!-- FIN CONCIENCIA -->
<!-- GALERIA -->
<div class="container-fluid galeria d-flex align-items-center">
<div class="row ">
<div class="col-md-12">
<h2 class="text-center text-white" id="galeria">
GALERÍA
</h2>
<hr>
<p class="lead text-center text-white">
Un poco de nuestros momentos...
</p>
</div>
<!-- The container for the list of example images -->
<div id="links" class="text-center p-2">
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
</div>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
</div>
</div>
</div>
</div>
<!-- FIN GALERIA -->
<!-- SPONSORS -->
<div class="container-fluid bg-warning sponsors d-none d-lg-block">
<div class="row">
<div class="col-12">
<h2 class="text-center text-white">MARCAS QUE NOS APOYAN</h2>
<hr>
<p class="lead text-center text-white">
Cada temporada confían en nosotros...
</p>
<div class="col-12 owl-carousel owl-theme">
<div class="item my-3">
<img class="" src="img/partner-1.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="" src="img/partner-2.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="" src="img/partner-3.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="" src="img/partner-1.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="img-fluid center-block" src="img/partner-2.png" alt="Effacy partner">
</div>
</div>
</div>
</div>
</div>
<!-- FIN SPONSORS -->
<!-- CONTACTO -->
<div class="container" >
<div class="row d-flex justify-content-center align-content-center contacto">
<div class="col-12">
<h2 class="text-center" id="contacto">CONTACTO</h2>
<hr>
<p class="lead text-center mb-5">
Comunicate con nosotros ante cualquier duda.
</p>
</div>
<div class="row justify-content-center">
<!-- MENSAJE DE ENVIO Y ERROR PHP -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Mensaje enviado correctamente.</strong> En poco tiempo te respodemos. ¡Muchas gracias!
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Error, hubo un problema.</strong> Intentalo otra vez. ¡Muchas gracias!
</div>
<!-- FIN MENSAJE DE ENVIO Y ERROR PHP -->
</div>
<!-- FORM LADO IZQUIERDO -->
<div class="col-md-12 col-lg-4">
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Nombre">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="E-mail">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-mobile fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Celular">
</div>
</div>
<!-- FORM LADO DERECHO -->
<div class="col-md-12 col-lg-8">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-commenting fa-fw"></i></span>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="6" placeholder="Escriba su mensaje..."></textarea>
</div>
</div>
<button type="submit" class="btn btn-success align-s"><i class="fa fa-paper-plane fa-lg mr-2"></i>Enviar</button>
<button type="reset" class="btn btn-danger align-s"><i class="fa fa-trash-o fa-lg mr-2"></i>Borrar</button>
<!-- BOTON MOSTRAR MAPA DE SB -->
<button id="mapa" type="button" class="btn btn-lg btn-block btn-warning mt-5" data-toggle="modal" data-target="#mostrarMapa">Mapa de San Bernardo</button>
<!-- MODAL MAPA DE SB -->
<div class="modal fade" id="mostrarMapa" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabelLarge">Mapa de San Bernardo - Horarios ENERO / FEBRERO</h4>
</div>
<div class="modal-body">
<img class="img-fluid" src="img/mapa2.png">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- FIN CONTACTO -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/blueimp-gallery.js"></script>
<script src="js/jquery.blueimp-gallery.js"></script>
<script>$(document).ready(function(){
// Animacion Scroll (animate.css)
new WOW().init();
// SmoothScroll
var scroll = new SmoothScroll('a[href*="#"]', {
// Speed & Easing
speed: 2000, // Integer. How fast to complete the scroll in milliseconds
offset: 0, // Integer or Function returning an integer. How far to offset the scrolling anchor location in pixels
easing: 'easeInOutQuart', // Easing pattern to use
});
// COMIENZO CARROUSEL
$(".owl-carousel").owlCarousel({
items:8,
loop: true,
margin: 30,
autoplayTimeout:1500,
center: true,
autoplay: true,
autoplayHoverPause:true,
autowidth: false,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:8,
nav:true,
}
}
});
$('.navbar-nav>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
$('.navbar-nav>.dropdown>.dropdown-menu>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
});
// comienzo isotope
// fin isotope
</script>
</body>
</html>
-(Sorry for my english)
-(Tablet layout is not ready yet)
Thanks!
Finally a friend could solve the problem, so I share the solution in case someone else serves him.
I have removed the JS library SmoothScroll and also the code to start it.
// SmoothScroll
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 2000,
offset: 0,
easing: 'easeInOutQuart', // Easing pattern to use
});
And I replace for this:
$('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
// Remove links that don't actually link to anything
.click(function(event) {
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
var scrollTop = target.offset().top - $('.sticky-top').height();
$('html, body').animate({
scrollTop: scrollTop
}, 1000)
}
}
});
The code above is adapted to what I needed, but it was based on this:
https://css-tricks.com/snippets/jquery/smooth-scrolling/
Thanks and sorry again for my english.
I manage to solve this by using a different offset value when the window width is on mobile
const options = {
speed: 500,
speedAsDuration: true,
offset: window.innerWidth < 768 ? 400 : 90
}
new SmoothScroll('a[href*="#"]', options);
The problem seems to be that in mobile the library requires a higher offset value, maybe because the elements are not exactly the same dimensions than on desktop.
Hope this could help you or someone.
Greetings
i am creating Testimonial For my project, I want to show only 3 Face indicators and remaining hide on click Left and right Control it should appear by replacing 3rd Face indicator and same goes for auto play,
Any Suggestions for newbie it would be useful
Thanks
JSFiddle
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner text-center">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
</li>
</ol>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script>
$(document).ready(function() {
//carousel options
$('#quote-carousel').carousel({
pause: true,
interval: 20000,
});
});
</script>
Do you want like this?
jQuery("#quote-carousel").on('slide.bs.carousel', function (event, fromIndex, toIndex) {
var active = jQuery(event.target).find('.carousel-inner > .item.active');
var from = active.index();
var next = jQuery(event.relatedTarget);
var to_slide= next.index();
if (to_slide>2) {
var hide_slide = parseInt(to_slide) - 3;
jQuery('.carousel-indicators li[data-slide-to="'+to_slide+'"]').css({"display":"inline-block"});
jQuery('.carousel-indicators li[data-slide-to="'+hide_slide+'"]').css({"display":"none"});
} else{
var hide_slide = parseInt(to_slide) + 3;
jQuery('.carousel-indicators li[data-slide-to="'+to_slide+'"]').css({"display":"inline-block"});
jQuery('.carousel-indicators li[data-slide-to="'+hide_slide+'"]').css({"display":"none"});
}
});
fiddle link
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;
});