<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color">
<!-- Navbar brand -->
<a id="main-navbar" class="navbar-brand tour st-2" href="#" title="Step two" data-index="1">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<!-- Links -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</nav>
<!--/.Navbar-->
<!--Popover list-->
<div style="display: none" class="my-0 py-0 popover-content">
<p class="popover-text">some text.</p>
<hr />
<button class="btn btn-sm btn-primary mx-0 prev disabled" data-index="0">Prev</button>
<button class="btn btn-sm btn-primary mx-0 next" data-index="0">Next</button>
<button class="btn btn-flat btn-sm float-right close">Close</button>
</div>
<div style="display: none" class="my-0 py-0 popover-content">
<p class="popover-text">some text.</p>
<hr />
<button type="submit" class="btn btn-sm btn-primary mx-0 prev" data-index="1">Prev</button>
<button type="submit" class="btn btn-sm btn-primary mx-0 next" data-index="1">Next</button>
<button class="btn btn-flat btn-sm float-right close">Close</button>
</div>
<div style="display: none" class="my-0 py-0 popover-content">
<p class="popover-text">some text.</p>
<hr />
<button type="submit" class="btn btn-sm btn-primary mx-0 prev" data-index="2">Prev</button>
<button type="submit" class="btn btn-sm btn-primary mx-0 next" data-index="2">Next</button>
<button class="btn btn-flat btn-sm float-right close">Close</button>
</div>
<div style="display: none" class="my-0 py-0 popover-content">
<p class="popover-text">some text.</p>
<hr />
<button type="submit" class="btn btn-sm btn-primary mx-0 prev" data-index="3">Prev</button>
<button type="submit" class="btn btn-sm btn-primary mx-0 next disabled" data-index="3">Next</button>
<button class="btn btn-flat btn-sm float-right close">Close</button>
</div>
<!--Popover list-->
<main>
<section>
<div class="container">
<h1 class="text-center my-4">Bootstrap Tour</h1>
<div class="row justify-content-center">
<div class="col-md-3 text-center">
<button class="btn btn-danger start-demo tour st-1" title="Step one" data-index="0">Watch Demo <i
class="fas fa-eye"></i></button>
</div>
</div>
<hr />
<h4 class="text-center my-4">Cascading Cards</h4>
<div class="row my-4">
<div class="col-md-4">
<!-- Card Wider -->
<div class="card card-cascade wider">
<!-- Card image -->
<div class="view view-cascade overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/photo6.jpg"
alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div id="step-3" class="card-body card-body-cascade text-center tour st-3" title="Step three" data-index="2">
<!-- Title -->
<h4 class="card-title"><strong>Alison Belmont</strong></h4>
<!-- Subtitle -->
<h5 class="blue-text pb-2"><strong>Graffiti Artist</strong></h5>
<!-- Text -->
<p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque
laudantium, totam rem aperiam. </p>
<!-- Linkedin -->
<a class="px-2 fa-lg li-ic"><i class="fab fa-linkedin-in"></i></a>
<!-- Twitter -->
<a class="px-2 fa-lg tw-ic"><i class="fab fa-twitter"></i></a>
<!-- Dribbble -->
<a class="px-2 fa-lg fb-ic"><i class="fab fa-facebook-f"></i></a>
</div>
</div>
<!-- Card Wider -->
</div>
<div class="col-md-4">
<!-- Card Narrower -->
<div class="card card-cascade narrower">
<!-- Card image -->
<div class="view view-cascade overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"
alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body card-body-cascade">
<!-- Label -->
<h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
<!-- Title -->
<h4 class="font-weight-bold card-title">Cheat day inspirations</h4>
<!-- Text -->
<p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi.</p>
<!-- Button -->
<a class="btn btn-unique">Button</a>
</div>
</div>
<!-- Card Narrower -->
</div>
<div class="col-md-4">
<!-- Card Regular -->
<div class="card card-cascade">
<!-- Card image -->
<div class="view view-cascade overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body card-body-cascade text-center">
<!-- Title -->
<h4 class="card-title"><strong>Billy Coleman</strong></h4>
<!-- Subtitle -->
<h6 class="font-weight-bold indigo-text py-2">Web developer</h6>
<!-- Text -->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex,
recusandae. Facere modi sunt, quod quibusdam.
</p>
<!-- Facebook -->
<a type="button" class="btn-floating btn-small btn-fb"><i class="fab fa-facebook-f"></i></a>
<!-- Twitter -->
<a type="button" class="btn-floating btn-small btn-tw"><i class="fab fa-twitter"></i></a>
<!-- Google + -->
<a type="button" class="btn-floating btn-small btn-dribbble"><i class="fab fa-dribbble"></i></a>
</div>
</div>
<!-- Card Regular -->
</div>
</div>
<hr>
<h4 class="text-center my-4">Gallery</h4>
<div class="row">
<!-- Grid row -->
<div class="gallery my-3" id="gallery">
<!-- Grid column -->
<div class="mb-3 pics animation all 2">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg"
alt="Card image cap">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="mb-3 pics animation all 1">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg"
alt="Card image cap">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="mb-3 pics animation all 1">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain2.jpg"
alt="Card image cap">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div id="step-4" class="mb-3 pics animation all 2 tour st-4" title="Step four" data-index="3">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"
alt="Card image cap">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="mb-3 pics animation all 2">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="mb-3 pics animation all 1">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain3.jpg"
alt="Card image cap">
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</div>
</section>
</main>
.gallery {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 33%;
-moz-column-width: 33%;
column-width: 33%; }
.gallery .pics {
-webkit-transition: all 350ms ease;
transition: all 350ms ease; }
.gallery .animation {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
@media (max-width: 450px) {
.gallery {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-width: 100%;
-moz-column-width: 100%;
column-width: 100%;
}
}
@media (max-width: 400px) {
.btn.filter {
padding-left: 1.1rem;
padding-right: 1.1rem;
}
}
$(function () {
// Custom whitelist to allow for using HTML tags in popover content
var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList
myDefaultWhiteList.button = [];
var stOne = "This is button wich allow you to start our Demo.";
var stTwo = "Here you can find navbar wich allow to navigate via site";
var stThree = "This is card panel. As you can see we have a lot of kind of cards.";
var stFour = "Some pretty photo from our gallery";
var comments = [stOne, stTwo, stThree, stFour];
var elements = [
".st-1",
".st-2",
".st-3",
".st-4"
]
var $startDemo = $(".start-demo");
var $popoverContent = $(".popover-content");
var $tours = $(".tour");
for (var i = 0; i < $tours.length; i++) {
$popoverContent.eq(i).find(".popover-text").text(comments[i]);
$tours.eq(i).popover({
trigger: "manual",
html: true,
content: function () {
var index = $(this).attr("data-index");
var $el = $popoverContent.eq(index).html();
return $el;
}
});
}
function giveListeners(index) {
var $next = $(".next");
var $prev = $(".prev");
var $close = $(".close");
$close.off("click").on("click", function () {
$tours.popover("hide");
});
$next.off("click").on("click", function () {
$(elements[index]).popover("hide");
$(elements[index + 1]).popover("show");
giveListeners(index + 1);
smothScroll($(elements[index+1]));
});
$prev.off("click").on("click", function () {
$(elements[index]).popover("hide");
$(elements[index - 1]).popover("show");
giveListeners(index - 1);
smothScroll($(elements[index-1]));
});
}
$startDemo.on("click", function () {
$("body").scrollspy({ target: "#step-4" });
$(elements[0]).popover("show");
giveListeners(0);
});
var SMOOTH_SCROLL_DURATION = 600;
function smothScroll($el) {
$("body,html").stop();
var elAttr = "#"+$el.attr('id');
if (typeof elAttr !== typeof undefined && elAttr.indexOf('#') === 0) {
var offset = $(this).attr('data-offset') ? $(this).attr('data-offset') : 0;
var setHash = $(this).parentsUntil('.smooth-scroll').last().parent().attr('data-allow-hashes');
$('body,html').animate({
scrollTop: $(elAttr).offset().top - offset
}, SMOOTH_SCROLL_DURATION);
if (typeof setHash !== typeof undefined && setHash !== false) {
history.replaceState(null, null, elAttr);
}
return false;
}
}
});