6
私はオンラインで見つけたテンプレートに基づいてサイトを構築しています。現在、複数のサムネイルを並べ替えるためのフィルタを備えています。しかし、私は現在、 "フィルター"として機能しているリンクを、すべてのサムネイルが表示されているdivに置き換えて欲しいと思っています。Divのコンテンツを単一のページのサイトに置き換えます
divのコンテンツを置き換え、divの内容を置き換え、divを非表示にしてクリックで表示するなど、jQueryを検索しました。しかし、私は動作するように見えるものはありません。私はdiv要素が取得するフィルタをクリックすると、理想的には、私はその後、div名前の「designprojects」で現在ULをラップしたい
<!-- 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">Projects</li>
<li><a href="#filter" data-option-value="*" class="selected">All Projects</a></li>
<li><a href="#filter" data-option-value=".StarbucksCSR">Starbucks CSR Project</a></li>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul class="thumbs">
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 StarbucksCSR">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Project Title" href="_include/img/work/full/url.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/url.jpg" alt="Project info">
</li>
<!-- End Item Project -->
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</div>
：ここ
は、HTMLの例です。プロジェクト情報が入った新しいものに置き換えられました。ここで
は、サイトがフィルタ機能を作るために使用する現在のJavaです：要約すると
.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;
});
}
}
、私は私がクリックして全画面表示を行うことができますサムネイルを見たい「すべてのプロジェクト」をクリックしたときに（現在の関数、これもデフォルトにしたい）。
プロジェクト名をクリックすると、すべてのサムネイルがプロジェクトに関する段落に置き換えられ、がクリックされ、クリックしてフルスクリーンに拡大することができる別のサムネイルが必要になります。
私の現在の進行状況は、jQueryの.html()機能でwww.codyshipman.com