我正在使用我編輯過的免費響應式網頁模板來爲朋友製作一個小型投資組合網站。我遇到的問題是,當我在Fancybox窗口中選擇特定的圖庫和視圖時,它將繼續點擊所有圖像,而不是單擊該特定圖庫中的圖像。在fancybox中存在同位素過濾問題
我一直在尋找並找到這個解決方案(https://groups.google.com/forum/#!topic/fancybox/ncVsViD2v9o),但我沒有真正掌握JavaScript知識,所以我不確定這是否適用於我或者如何將其應用到模板的代碼中。我已經包含和HTML的一部分我相信這是下面的相關JS:
HTML
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">Photography</li>
<li><a href="#filter" data-option-value="*" class="selected">All Images</a>
</li>
<li><a href="#filter" data-option-value=".people">People</a>
</li>
<li><a href="#filter" data-option-value=".places">Places</a>
</li>
<li><a href="#filter" data-option-value=".things">Things</a>
</li>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 people">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="John" href="_include/img/work/full/people-01-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/people-01.jpg" alt="Print Number 1–10">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 things">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Garden Wall" href="_include/img/work/full/things-07-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/things-07.jpg" alt="Print Number 1–22">
</li>
<!-- End Item Project -->
JS
BRUSHED.filter = function() {
if ($('#projects').length > 0) {
var $container = $('#projects');
$container.imagesLoaded(function() {
$container.isotope({
// options
animationEngine: 'best-available',
itemSelector: '.item-thumbs',
layoutMode: 'fitRows'
});
});
// filter items when filter link is clicked
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[key] = value;
if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
// changes in layout modes need extra logic
changeLayoutMode($this, options)
} else {
// otherwise, apply new options
$container.isotope(options);
}
return false;
});
}
}
任何有識之士將不勝感激,請讓我知道如果我需要提供任何信息。
謝謝!
嗨戴夫,我不能重現您提供的代碼的問題。你有一個活的鏈接?我看到的一件事是,你必須爲Fancybox的每個「畫廊」賦予不同的名稱。試試'data-fancybox-group =「gallery-01」'和'data-fancybox-group =「gallery-02」'等等。 –
嗨Louys,謝謝你回到我身邊。這是該網站的當前測試版本:http://www.susanemiller.com/brushed/index.html –