I have been working on this free template and it's very great, but on reaching the portfolio page, I encountered a snag. The HTML code is below:
<div class="item col-md-3 col-sm-4 col-xs-6" data-groups='["photography", "web", "video"]'>
<a href="#!portfolio-item-2.html" class="hover-overlay">
<img alt="Project 2" src="images/portfolio/preview/2.jpg" />
<div class="overlay background-90-a">
<div class="hidden-xs">
<p class="title heading-a">YouTube Video</p>
<p class="text-center heading-a"><strong>Excepteur sint lorem ipsum dolor sit amet consectetur.</strong></p>
<p class="text-center"><i class="fa fa-youtube-square heading-a"></i></p>
</div>
The part that talks about a <a ref...> refers to a HTML file (portfolio-item-2.html) that I cannot seem to find in the template documents.
What should I do?
You are using #! in href.
Try this:
<div class="item col-md-3 col-sm-4 col-xs-6" data-groups='["photography", "web", "video"]'>
<a href="portfolio-item-2.html" class="hover-overlay">
<img alt="Project 2" src="images/portfolio/preview/2.jpg" />
<div class="overlay background-90-a">
<div class="hidden-xs">
<p class="title heading-a">YouTube Video</p>
<p class="text-center heading-a"><strong>Excepteur sint lorem ipsum dolor sit amet consectetur.</strong></p>
<p class="text-center"><i class="fa fa-youtube-square heading-a"></i></p>
</div>
Run code snippetCopy snippet to answerHide results
Related
<!----- home banner ---->
<div class="home-slider">
<ngx-slick class="carousel" [config]="slideConfig">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<div class="banner">
<img class="img-responsive" src="{{ slide.img }}" alt="" width="100%">
</div>
</div>
</ngx-slick>
</div>
<!----==== 3 content ----==================--->
<div class="dis_content">
<div class="container">
<div class="col-md-4 text-center">
<i class="fa fa-google-wallet " aria-hidden="true"></i>
<h4>Discount System</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-codepen " aria-hidden="true"></i>
<h4>Free Delivery</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-circle-o-notch " aria-hidden="true"></i>
<h4>Support 24/7</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus.</p>
</div>
</div>
</div>
<!---====== 4 images =============------------>
<div class="ldy-page">
<div class="container-fluid">
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
</div>
</div>
<owl-carousel [options]="{items: 3, dots: false, navigation: false}" <!-- If images array is dynamically changing pass this array to [items] input -->
[items]="images"
<!-- classes to be attached along with owl-carousel class -->
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" *ngFor="let sliding of slidings;let i = index">
<div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}"></div>
</div>
</owl-carousel>
How to set the image and background image path in my page? I set the image on home.components.ts file. How to set the background image and image path in Angular 6?
[{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}] in ng:///AppModule/HomeComponent.html#73:38 (" class="item" *ngFor="let sliding of slidings;let i = index">
use it to wantet selector
[style.backgroundImage]="'url('+ imagSource +')'"
in css:
.item{
background-position: center;
background-repeat: no-repeat;
.
.
.
}
Below answer worked for angular 6.
In app.component.css
.image{
height:40em;
background-size:cover;
width:auto;
background-image:url('copied image address');
background-position:50% 50%;
}
Also in app.component.html simply add as below
<div class="image">
Your content
</div>
This way I was able to set background image in Angular 6.
I'm working from a Bootstrap template and want to change the "portfolio section". At the moment all the images loaded in HTML shows by default and then, once a heading is selected, the images are cleared and only the ones connected to that heading (data filter) is shown.
I only want to change the default behavior. By default, none of the images must show. And then, once a heading is selected the images load like explained above.
Here's the Javascript:
// portfolio filter
$(window).load(function() {
'use strict',
$portfolio_selectors = $('.portfolio-filter >li>a');
if ($portfolio_selectors != 'undefined') {
$portfolio = $('.portfolio-items');
$portfolio.isotope({
itemSelector: '.col-sm-3',
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;
});
}
});
and the HTML:
<section id="portfolio">
<div class="container">
<div class="row text-center">
<div class="col-sm-8 col-sm-offset-2">
<h2 class="title-one">Portfolio</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.</p>
</div>
</div>
<ul class="portfolio-filter text-center">
<li><a class="btn btn-default active" href="#" data-filter="*">All</a>
</li>
<li><a class="btn btn-default" href="#" data-filter=".html">Html</a>
</li>
<li><a class="btn btn-default" href="#" data-filter=".wordpress">Wordpress</a>
</li>
<li><a class="btn btn-default" href="#" data-filter=".joomla">Joomla</a>
</li>
<li><a class="btn btn-default" href="#" data-filter=".megento">Megento</a>
</li>
</ul>
<!--/#portfolio-filter-->
<div class="portfolio-items">
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/our-team/bella.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item jooma">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/our-team/constance.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item wordpress">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/our-team/francell.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item megento">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/4.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/5.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item wordpress">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/6.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/7.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item joomla">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/8.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/9.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item wordpress">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/10.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item joomla">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/11.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item megento">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/12.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/#portfolio-->
I fixed somethings in your code:
isotope not recognized so I removed it.
I replaced the way you were searching for the items to hide\show with:
$('.portfolio-item').not(selector).hide();
$('.portfolio-item'+selector).show();
// portfolio filter
$portfolio_selectors = $('.portfolio-filter >li>a');
if($portfolio_selectors!='undefined'){
$portfolio = $('.portfolio-items');
/*
$portfolio.isotope({
itemSelector : '.col-sm-3',
layoutMode : 'fitRows'
});
*/
$portfolio_selectors.on('click', function(){
$portfolio_selectors.removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$('.portfolio-item').not(selector).hide();
$('.portfolio-item'+selector).show();
return false;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="portfolio">
<div class="container">
<div class="row text-center">
<div class="col-sm-8 col-sm-offset-2">
<h2 class="title-one">Portfolio</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.</p>
</div>
</div>
<ul class="portfolio-filter text-center">
<li><a class="btn btn-default active" href="#" data-filter="*">All</a></li>
<li><a class="btn btn-default" href="#" data-filter=".html">Html</a></li>
<li><a class="btn btn-default" href="#" data-filter=".wordpress">Wordpress</a></li>
<li><a class="btn btn-default" href="#" data-filter=".joomla">Joomla</a></li>
<li><a class="btn btn-default" href="#" data-filter=".megento">Megento</a></li>
</ul><!--/#portfolio-filter-->
<div class="portfolio-items">
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/our-team/bella.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item jooma">
<div class="view efffect" >
<div class="portfolio-image">
<img src="images/our-team/constance.jpg" alt="">
</div>
<div class="mask text-center html">
<h3>.html</h3>
<h4> .html.html.html.html</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item wordpress">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/our-team/francell.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item megento">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/4.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/5.jpg" alt="">
</div> <div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item wordpress">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/6.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/7.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item joomla">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/8.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/9.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item wordpress">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/10.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item joomla">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/11.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item megento">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/12.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
</div>
</div>
</section> <!--/#portfolio-->
To clear all images by default when page loads using isotope you are suppose to set a dummy filter on isotope initiation. Check below snippet for example(check on full screen view to get a better understanding). Here I added filter: '.dummy' to hide all images by default.
// portfolio filter
$(window).load(function() {
'use strict',
$portfolio_selectors = $('.portfolio-filter >li>a');
if ($portfolio_selectors != 'undefined') {
$portfolio = $('.portfolio-items');
$portfolio.isotope({
itemSelector: '.col-sm-3',
layoutMode: 'fitRows',
filter: '.dummy'
});
$portfolio_selectors.on('click', function() {
$portfolio_selectors.removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$portfolio.isotope({
filter: selector
});
return false;
});
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.4/isotope.pkgd.min.js"></script>
<section id="portfolio">
<div class="container">
<div class="row text-center">
<div class="col-sm-8 col-sm-offset-2">
<h2 class="title-one">Portfolio</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.</p>
</div>
</div>
<ul class="portfolio-filter text-center">
<li><a class="btn btn-default active" href="#" data-filter="*">All</a></li>
<li><a class="btn btn-default" href="#" data-filter=".html">Html</a></li>
<li><a class="btn btn-default" href="#" data-filter=".wordpress">Wordpress</a></li>
<li><a class="btn btn-default" href="#" data-filter=".joomla">Joomla</a></li>
<li><a class="btn btn-default" href="#" data-filter=".megento">Megento</a></li>
</ul>
<!--/#portfolio-filter-->
<div class="portfolio-items">
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/our-team/bella.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item jooma">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/our-team/constance.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item wordpress">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/our-team/francell.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item megento">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/4.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/5.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item wordpress">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/6.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/7.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item joomla">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/8.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/9.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item wordpress">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/10.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item joomla">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/11.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item megento">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/12.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<i class="fa fa-link"></i>
<i class="fa fa-search-plus"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/#portfolio-->
I'm working on this one site page: http://simonenicosia.com/isotopeTest/
I'd like to reach this grid result:
https://i.stack.imgur.com/U99mf.jpg
but something is wrong. I don't know if it's about col dimension or js parameters...
portfolio.js
var container = jQuery('#portfolio-grid');
container.isotope({
itemSelector: '.portolio-item',
masonry: {
columnWidth: 100
}
});
HTML
<div id="portfolio-grid" class="portfolio-grid">
<!-- For Project Expander -->
<div class="start-nav"></div>
<!-- Project 1 -->
<div id="projects/pittura.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/pittura.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Pittura</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 2 -->
<div id="projects/evoluzioni.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/grafiche.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Evoluzioni pittoriche</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 3 -->
<div id="projects/3d.html" class="col-md-6 col-sm-12 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/resine.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Forme pittoriche<br>tridimensionali</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 4 -->
<div id="projects/steel.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/visi.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Steel</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 5 -->
<div id="projects/artdesign.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/loop.gif" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Art Design</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 6 -->
<div id="projects/musticatower.html" class="col-md-6 col-sm-12 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/scultura2.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Mustica Tower</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 7 -->
<div id="projects/unstoppable.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/land_rover.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Unstoppable spirit</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 8 -->
<div id="projects/timeline.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/nino.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Profilo</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 9 -->
<div id="projects/video.html" class="col-md-3 col-sm-6 portolio-item project-expander">
<div class="portfolio-img"><img src="assets/images/video.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Video Opere</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- Project 10 -->
<div class="col-md-3 col-sm-6 portolio-item">
<div class="portfolio-img"><img src="assets/images/installazioni.jpg" class="img-responsive" alt="" /></div>
<div class="portfolio-overlay"></div>
<div class="portfolio-details">
<h4>Contatti</h4>
<span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
</div>
</div>
<!-- For Project Expander -->
<div class="final-nav"></div>
</div>
I'm using Bootstrap 3 + Isotope v1.5.25
Solved! Using packery-mode https://packery.metafizzy.co/
var container = jQuery('#portfolio-grid');
container.isotope({
itemSelector: '.portolio-item',
packery: {
gutter: 0
}
});
HTML
<script src="assets/js/portfolio.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="assets/js/packery-mode.pkgd.min.js"></script>
Hi friends I try learning jquery but I get some issues,
red label below picture- when i clicked it toggle is opening but when I clicked second one again first div is opening
my html
<ul class="otel-filtre-fiyat-tab">
<li class="otel-views"><a href="#"><img src="http://anitur.streamprovider.net/images/otel-filtre/d2.png" alt="" class="memnuniyet-durum" />
<strong>88/100</strong>
<span class="otel-goruntuleme">274 Görüntüleme</span>
</a></li>
<li class="otel-prices"><a href="#">
<strong>Tüm Fiyatlar</strong>
<span class="otel-goruntuleme">Size Özel en uygun fiyatlar</span>
</a></li>
</ul>
</div><!--otel filtre ozellikler-->
<div class="clr"></div>
</div><!--otel tek liste-->
<div class="otel-filtre-tab">
<div class="otel-tab-icerik otel-full-detay">
<div class="otel-degerlendirme">
<div class="degerlendirme-baslik">Değerlendirme</div>
<div class="otel-tab-detay">
<div class="degerlendirme-not">
<div class="c100 p85 green">
<span>85%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div><!--dairesel genel değerlendirme-->
</div><!-- degerlendirme not -->
<div class="degerlendirme-yorum">
<div class="yorum-bar">
<div class="yorum-bilgi">
<p>
<span class="otel-yorum-kisi">Hakan2020</span>
<span class="otel-yorum-konum">Denizli,Türkiye</span>
<span class="otel-yorum-tarih">26 Eylül 2015</span>
</p>
</div><!-- yorum bilgi -->
<div class="otel-yorum-profil">
<img src="http://anitur.streamprovider.net/images/otel-filtre/profile.jpg" alt="" />
</div>
<div class="yorum-content">
<h3>“Özellikle, yeme içme kalitesi arayanlar için...”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque provident accusantium sint tempore! Fugiat debitis maxime eos? Devamını oku</p>
</div>
</div><!-- yorum bar-->
<div class="yorum-bar">
<div class="yorum-bilgi">
<p>
<span class="otel-yorum-kisi">Hakan2020</span>
<span class="otel-yorum-konum">Denizsiz,Türkiye</span>
<span class="otel-yorum-tarih">26 Eylül 2015</span>
</p>
</div><!-- yorum bilgi -->
<div class="otel-yorum-profil">
<img src="http://anitur.streamprovider.net/images/otel-filtre/profile.jpg" alt="" />
</div>
<div class="yorum-content">
<h3>“Özellikle, yeme içme kalitesi arayanlar için...”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque provident accusantium sint tempore! Fugiat debitis maxime eos? Devamını oku</p>
</div>
</div><!-- yorum bar-->
</div><!-- degerlendirme yorum -->
</div>
<div class="clr"></div>
</div><!-- otel degerlendirme-->
<h3>Genel Değerlendirme</h3>
<div class="otel-genel-degerlendirme">
<div class="tum-degerlendirmeler">
Tüm Değerlendirmeler
<h4>Tüm İzlenimler</h4>
<h4 class="degerlendirme">%77 Çok İyi <span>2524 yoruma göre</span></h4>
</div><!--tum degerlendirmeler-->
<div class="diger-degerlendirmeler">
<ul class="tab-degerlendirme">
<li>%35 Çiftler</li>
<li>%35 Aile</li>
<li>%35 İş Seyahati</li>
<li>%35 Yalnız Gezginler</li>
</ul><!--tab menuler-->
<div class="tab-degerlendirme-icerik">
<div class="tab-filtre-icerik" id="ciftler">
<div class="demo-show2">
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 1 'in içeriği</div>
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 2 'in içeriği</div>
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 3 'in içeriği</div>
</div>
<!--<div id="progressbar-durum">
<div></div>
</div>-->
</div>
<div class="tab-filtre-icerik" id="aile">aile..
%35
</div>
<div class="tab-filtre-icerik" id="is-seyahati">iş seyahati..</div>
<div class="tab-filtre-icerik" id="yalniz-gezginler-bg">yalnız gezginler..</div>
</div><!-- tab icerik kismi-->
</div><!--diger degerlendirmeler-->
</div><!-- otel genel değerlendirme-->
</div><!-- tab icerik-->
<div class="otel-tab-icerik otel-fiyat-detay-icerik">otel içerik 2..</div><!-- tab icerik -->
</div><!-- otel filtre tab -->
toggle.js
$(document).ready(function(){
$(".otel-views a").on("click",function(){
$(".otel-full-detay:first").slideToggle();
return false;
});
});
what was my mistake ?
and codepen link:
http://codepen.io/cowardguy/pen/rxdpLp
You need to use other selector to reach your needed element. First you need to climb up in dom tree with .parent() or similar selector and then go down to your element in dom tree with .children() or .find() or other similar selector.
This is your working example:
$(".otel-views a").on("click",function(){
$(this).parents('.otel-tekli-listeleme').find('.otel-full-detay').slideToggle();
return false;
});
Here's fixed codepen
I'm using the Cycle JS 2 jQuery plugin but it doesn't seem to be sliding correctly when clicking the "Prev" or "Next" buttons.
Update: I am trying to get it to slide all 4 sections at once, hence that is why 4 sections using col-sm-3 are contained within each .item block.
CodePen: http://codepen.io/gutterboy/pen/MaZyZx
HTML:
<div id="main-slider" class="slider">
<div class="item row">
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://runnersfeed.com/wp-content/uploads/2011/12/curry.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.newsmax.com/Newsmax/files/44/44b1645b-3804-408d-9c64-f68c8f45bc74.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.interbasket.net/news/wp-content/uploads/Lebron-James-Miami-Heat.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.gannett-cdn.com/-mm-/ac1394dbdcca6a36cbf486633b129cd813095ac3/r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2012/11/26/usp-nba_-san-antonio-spurs-at-toronto-raptors-4_3.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
</div>
<!-- Item Ends -->
<div class="item row">
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://i.usatoday.net/sports/_photos/2011/07/11/NBA-lockout-allows-players-to-look-overseas-9V7G6NL-x-large.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://static6.businessinsider.com/image/5241a14b6bb3f7c368ab8319/nba-players-might-wear-bizarre-nickname-jerseys-in-2013.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://bingemagazine.com/wp-content/uploads/2014/02/BINGEMagazine-DennisRodman.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.gannett-cdn.com/-mm-/ac1394dbdcca6a36cbf486633b129cd813095ac3/r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2012/11/26/usp-nba_-san-antonio-spurs-at-toronto-raptors-4_3.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
</div>
<!-- Item Ends -->
<div class="control">
Prev |
Next
</div>
</div>
CSS:
.slider {
margin: 20px;
}
.content-wrap {
display: block;
//height: 400px;
text-decoration: none;
}
.image {
height: 175px;
overflow: hidden;
img {
height: 100%;
}
}
.details {
padding: 20px 10px;
background-color: #fff;
color: #000;
h4 {
font-size: 18px;
font-weight: bold;
}
.sub-title {
font-size: 16px;
}
.text {
font-size: 14px;
}
}
.control {
padding-top: 50px;
text-align: center;
}
JS:
$(document).ready(function() {
$('#main-slider').cycle({
paused: true,
autoHeight: 'calc',
slides: '> .item',
fx: 'scrollHorz',
next: '.control .next',
prev: '.control .prev',
sync: true
});
});
What am I doing wrong here?
I have a sneaky suspicion it has something to do with using Bootstrap columns on the items inside the slides, but not sure how to fix it.