0
我的畫廊中有太多圖片，我想用「主體」替換「全部」過濾器並在負載上顯示它。 我已經嘗試過使用container.isotope filter ='。principal'，但是沒有在提貨時顯示，只有當我點擊principal時它才顯示過濾結果。同位素：替換一個新類別的所有過濾器
/* Portfolio Sorting */
jQuery(document).ready(function() {
\t (function ($) {
\t
\t
\t \t var container = $('section.portfolio_container');
\t \t
\t \t function getNumbColumns() {
\t \t \t var winWidth = $(window).width(),
\t \t \t \t columnNumb = 1;
\t \t \t
\t \t \t
\t \t \t if (winWidth > 1500) {
\t \t \t \t columnNumb = 6;
\t \t \t } else if (winWidth > 1200) {
\t \t \t \t columnNumb = 5;
\t \t \t } else if (winWidth > 900) {
\t \t \t \t columnNumb = 4;
\t \t \t } else if (winWidth > 600) {
\t \t \t \t columnNumb = 3;
\t \t \t } else if (winWidth > 300) {
\t \t \t \t columnNumb = 2;
\t \t \t }
\t \t \t
\t \t \t return columnNumb;
\t \t }
\t \t
\t \t
\t \t function setColumnWidth() {
\t \t \t var winWidth = $(window).width(),
\t \t \t \t columnNumb = getNumbColumns(),
\t \t \t \t postWidth = Math.floor(winWidth/columnNumb);
\t \t \t
\t \t \t container.find('.portfolio').each(function() {
\t \t \t \t $(this).css({
\t \t \t \t \t width : postWidth + 'px'
\t \t \t \t });
\t \t \t });
\t \t }
\t \t
\t \t $('.gallerySelector .gallerySelectorList a').click(function() {
\t \t \t var selector = $(this).attr('data-filter');
\t \t \t
\t \t \t $(this).parent().parent().find('> li.current').removeClass('current');
\t \t \t $(this).parent().addClass('current');
\t \t \t
\t \t \t container.isotope({
\t \t \t \t filter : selector
\t \t \t });
\t \t \t
\t \t \t setTimeout(function() {
\t \t \t \t reArrangeProjects();
\t \t \t }, 300);
\t \t \t
\t \t \t
\t \t \t return false;
\t \t });
\t \t
\t \t function reArrangeProjects() {
\t \t \t setColumnWidth();
\t \t \t container.isotope('reLayout');
\t \t }
\t \t
\t \t
\t \t container.imagesLoaded(function() {
\t \t \t setColumnWidth();
\t \t \t
\t \t \t
\t \t \t container.isotope({
\t \t \t \t itemSelector : 'article.portfolio',
\t \t \t \t layoutMode : 'masonry',
\t \t \t \t resizable : false
\t \t \t \t
\t \t \t });
\t \t });
\t \t
\t \t
\t
\t \t
\t
\t \t $(window).on('debouncedresize', function() {
\t \t \t reArrangeProjects();
\t \t \t
\t \t });
\t \t
\t
\t })(jQuery);
});
/* DebouncedResize Function */
\t (function ($) {
\t \t var $event = $.event,
\t \t \t $special,
\t \t \t resizeTimeout;
\t \t
\t \t
\t \t $special = $event.special.debouncedresize = {
\t \t \t setup : function() {
\t \t \t \t $(this).on('resize', $special.handler);
\t \t \t },
\t \t \t teardown : function() {
\t \t \t \t $(this).off('resize', $special.handler);
\t \t \t },
\t \t \t handler : function (event, execAsap) {
\t \t \t \t var context = this,
\t \t \t \t \t args = arguments,
\t \t \t \t \t dispatch = function() {
\t \t \t \t \t \t event.type = 'debouncedresize';
\t \t \t \t \t \t
\t \t \t \t \t \t $event.dispatch.apply(context, args);
\t \t \t \t \t };
\t \t \t \t
\t \t \t \t
\t \t \t \t if (resizeTimeout) {
\t \t \t \t \t clearTimeout(resizeTimeout);
\t \t \t \t }
\t \t \t \t
\t \t \t \t
\t \t \t \t execAsap ? dispatch() : resizeTimeout = setTimeout(dispatch, $special.threshold);
\t \t \t },
\t \t \t threshold : 150
\t \t };
\t })(jQuery);\t
#folio {
\t background:url(../images/gallery-quote.png) center 80px no-repeat #111;
\t padding-top:100px;
\t clear: left;
}
.portfolio_container {
\t position:relative;
\t display:block;
\t overflow:hidden;
\t width:100%;
}
.portfolio_container .portfolio {
\t position:relative;
\t display:block;
\t float:left;
\t overflow:hidden;
\t width:25%;
\t height:auto;
}
.portfolio_container .portfolio .media_box figure a img {
\t display:block;
\t margin-left: auto;
\t margin-right: auto;
}
.portfolio_container .portfolio .media_box .hover_effect {
\t top:0;
\t left:0;
}
.gallerySelector {
\t background: #222;
\t height: 44px;
\t width: 100%;
\t margin-top: 20px;
}
.gallerySelectorList {
\t margin:0;
\t width: 100%;
}
.gallerySelectorList li {
\t float: left;
\t margin:0;
\t list-style:none;
\t width: 20%;
\t text-align: center;
\t padding: 0;
}
.gallerySelectorList li:hover {
\t background: #83103e;
}
.gallerySelectorList li a {
\t display:block;
\t padding:11px 0;
\t color: #fff;
\t text-decoration: none;
\t margin: 0;
\t transition:background-color 0.3s ease, color 0.2s ease;
}
.gallerySelectorList li.current {
\t background: #7b133c;
}
.portfolio_container .portfolio {
width: 20%;
}
.fullwidth {
display: block;
max-width: 100%;
min-width: 100%;
}
#gallery h3 {
\t margin-bottom: 20px;
}
.project-title {
\t font-family: 'Oswald', sans-serif;
\t font-size: 12px;
\t text-transform: uppercase;
\t margin-top: 7px;
}
.project-description {
\t color: #868991;
\t font-size: 10px;
\t text-transform: uppercase;
\t font-weight: 600;
\t margin: 0 0 20px 0;
}
.columns .overlay-content.loupe {
\t width: 34px;
\t height: 34px;
\t background: url(../../../templates/images/loupe.png) 0px 0px no-repeat;
\t position: absolute;
\t top: 22%;
\t margin: -17px 0 0 -17px;
\t left: 50%;
\t z-index: 10;
}
.thumbLink {
\t display: block;
\t width: 100%;
}
.thumbImage {
\t float: left;
\t position: relative;
\t overflow: hidden;
\t display: block;
\t margin-bottom: 0px;
\t box-sizing: border-box;
\t text-align: center;
\t width: 100%;
\t height: 100%;
}
.thumbImage img{
transition: all 0.7s ease-in-out;
}
.thumbImage .thumbText h3 {
\t margin-bottom: 10px;
\t padding-top: 10px;
\t border-bottom: 1px solid #fff;
transition: all 1s ease-in-out;
}
.thumbImage .thumbText p {
\t margin-bottom: 10px;
\t color: #fff;
transition: all 1s ease-in-out;
}
.thumbImage .thumbTextWrap {
\t position: absolute;
\t top: 0;
height: 100%;
\t padding: 0 20px;
\t opacity: 0;
\t background: #7b133c;
\t text-align: center;
transition: all 1s ease-in-out;
}
.ie8 .thumbImage .thumbTextWrap {
\t display:none;
}
.thumbImage .thumbTextWrap:before {
\t content: '';
\t display: inline-block;
\t height: 100%;
\t vertical-align: middle;
\t margin-right: -0.5em; /* Adjusts for spacing */
}
.thumbText {
text-align: center;
\t transform: scale(0);
transition: all 0.7s ease-in-out;
\t display: inline-block;
\t vertical-align: middle;
\t width: 90%;
}
.thumbImage:hover img {
\t opacity: 0;
transform: scale(10);
}
.thumbImage:hover .thumbTextWrap {
\t opacity: 1;
}
.ie8 .thumbImage:hover .thumbTextWrap {
\t display: block;
}
.thumbImage:hover .thumbText {
\t transform: scale(1);
}
.thumbLink {
\t background:url(../images/icons/icon-magnify.png) center center no-repeat #fff;
\t width: 30px;
\t height: 30px;
\t border-radius: 15px;
\t opacity: 0.5;
\t margin: 0 auto;
}
.thumbLink:hover {
\t opacity: 1;
}
.portfolioBottom {
\t background: #222;
\t height: 44px;
\t width: 100%;
\t clear: left;
}<div id="folio" class="page section">
\t
\t <div class="container">
<div class="sixteen columns">
<h1>Portifólio</h1>
<h3><span class="small">Those who do</span> <span class="smallBold">not want to</span>
<br><span class="largeBold">imitate</span> <span class="large">anything,</span>
<br><span class="medium">produce</span><span class="mediumBold"> nothing.</span>
<br><span class="author">Salvador Dali</span></h3>
</div>
</div>
<div class="gallerySelector">
<ul class="gallerySelectorList">
<li class="current"><a data-filter="article.portfolio[data-category~='principal']" href="#">principal</a></li>
<li><a data-filter="article.portfolio[data-category~='redacao']" href="#">Redação</a></li>
<li><a data-filter="article.portfolio[data-category~='criacao']" href="#">Redação-Criação</a></li>
<li><a data-filter="article.portfolio[data-category~='social']" href="#">Social Media</a></li>
<li><a data-filter="article.portfolio[data-category~='video']" href="#">Audiovisual</a></li>
</ul>
</div>
<section class="portfolio_container">
\t \t \t <article class="portfolio" data-category="principal">
<section class="thumbImage">
<img src="images/gallery/t-rec1.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="thumbLink" href="images/gallery/rec1.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="rincipal">
<section class="thumbImage">
\t <img src="images/gallery/t-rec2.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="thumbLink" href="images/gallery/rec2.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="principal">
<section class="thumbImage">
<img src="images/gallery/t-rec3.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="thumbLink" href="images/gallery/rec3.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="redacao criacao">
<section class="thumbImage">
<img src="images/gallery/t-rec4.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="thumbLink" href="images/gallery/rec4.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="redacao criacao">
<section class="thumbImage">
<img src="images/gallery/t-rec5.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="thumbLink" href="images/gallery/rec5.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="redacao criacao">
<section class="thumbImage">
<img src="images/gallery/t-rec6.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="thumbLink" href="images/gallery/rec6.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="video">
<section class="thumbImage">
<img src="images/gallery/videothumb.png" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="thumbLink" href="http://youtu.be/3UkU2I7OVB4" rel="prettyPhoto" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="redacao criacao">
<section class="thumbImage">
<img src="images/gallery/t-rec7.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="thumbLink" href="images/gallery/rec7.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="redacao criacao">
<section class="thumbImage">
<img src="images/gallery/t-rec8.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
<a class="thumbLink" href="images/gallery/rec8.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
</div>
</div>
</section>