0
I’m working on a bootstrap template called CORLATE. In the Photo Gallery, I need to take that all-All option and leave only the categories. The problem is that when you load the page, even taking out All it pulls back all the images, and in case it would need to be straight to the items in the first category.
https://www.themezy.com/free-website-templates/185-corlate-free-responsive-bootstrap-template
Can anyone help me? Please!!! Attachment follow the codes and above the full template link.
jQuery(function($) {'use strict',
//#main-slider
$(function(){
$('#main-slider.carousel').carousel({
interval: 8000
});
});
// accordian
$('.accordion-toggle').on('click', function(){
$(this).closest('.panel-group').children().each(function(){
$(this).find('>.panel-heading').removeClass('active');
});
$(this).closest('.panel-heading').toggleClass('active');
});
//Initiat WOW JS
new WOW().init();
// 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;
});
});
// Contact form
var form = $('#main-contact-form');
form.submit(function(event){
event.preventDefault();
var form_status = $('<div class="form_status"></div>');
$.ajax({
url: $(this).attr('action'),
beforeSend: function(){
form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
}
}).done(function(data){
form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
});
});
//goto top
$('.gototop').click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("body").offset().top
}, 500);
});
//Pretty Photo
$("a[rel^='prettyPhoto']").prettyPhoto({
social_tools: false
});
});/*************************
********* Portfolio CSS ******
**************************/
#portfolio_page {
margin-top: 115px;
padding-bottom: 0;
}
.portfolio-items,
.portfolio-filter {
list-style: none outside none;
margin: 0 0 40px 0;
padding: 0;
}
.portfolio-filter > li {
display: inline-block;
}
.portfolio-filter > li a {
background: none repeat scroll 0 0 #FFFFFF;
font-size: 14px;
font-weight: 400;
margin-right: 20px;
text-transform: uppercase;
transition: all 0.9s ease 0s;
-moz-transition: all 0.9s ease 0s;
-webkit-transition: all 0.9s ease 0s;
-o-transition: all 0.9s ease 0s;
border: 1px solid #F2F2F2;
outline: none;
border-radius: 3px;
}
.portfolio-filter > li a:hover,
.portfolio-filter > li a.active{
color:#fff;
background: #c52d2f;
border: 1px solid #c52d2f;
box-shadow: none;
-webkit-box-shadow: none;
}
.portfolio-items > li {
float: left;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.portfolio-item {
margin: 0;
padding:0;
}
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
title = "Portfolio"
url = "/portfolio"
layout = "default"
==
<section id="portfolio">
<div class="container">
<div class="center">
<h2>Portfolio</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 active" 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" 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="{{ 'assets/images/portfolio/recent/item1.png'|theme }}" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme</a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="{{ 'assets/images/portfolio/full/item1.png'|theme }}" 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="{{ 'assets/images/portfolio/recent/item2.png'|theme }}" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme</a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="{{ 'assets/images/portfolio/full/item2.png'|theme }}" 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="{{ 'assets/images/portfolio/recent/item3.png'|theme }}" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme</a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="{{ 'assets/images/portfolio/full/item3.png'|theme }}" 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="{{ 'assets/images/portfolio/recent/item4.png'|theme }}" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme</a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="{{ 'assets/images/portfolio/full/item4.png'|theme }}" 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="{{ 'assets/images/portfolio/recent/item5.png'|theme }}" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme</a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="{{ 'assets/images/portfolio/full/item5.png'|theme }}" 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="{{ 'assets/images/portfolio/recent/item6.png'|theme }}" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme</a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="{{ 'assets/images/portfolio/full/item6.png'|theme }}" 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="{{ 'assets/images/portfolio/recent/item7.png'|theme }}" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme</a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="{{ 'assets/images/portfolio/full/item7.png'|theme }}" 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="{{ 'assets/images/portfolio/recent/item8.png'|theme }}" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Business theme</a></h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="{{ 'assets/images/portfolio/full/item8.png'|theme }}" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
</div>
</div>
</div>
</section><!--/#portfolio-item-->
Need to load script/css bootstrap and jquery-ui for running, and I have tested this standard, follow http://www.codeply.com/go/MChm7miyb9
– KingRider