所以我一直在根据我在网上找到的模板构建一个网站,如果有任何帮助,我将不胜感激。目前,它设置了过滤器,允许你对多个缩略图进行排序。然而,我希望当前充当"过滤器"的链接取代所有缩略图显示的div。
我在这里搜索了jQuery,以替换div
内容,包括替换div的内容,隐藏div并在单击时显示它们。不过,我似乎什么都不管用。
理想情况下,我会将当前的UL
封装在一个名为"designprojects"的div
中,然后当我单击一个过滤器时,div会被一个包含项目信息的新过滤器所替换。
以下是该网站用于实现过滤器功能的当前HTML和Javascript:
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;
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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
替换为关于项目的段落,以及可以单击以扩展到全屏的其他缩略图。
我目前的进展可以在www.codyshipman.com
查看jQuery的.html()
函数。如果要替换<div>
元素的内容,请将新内容作为参数传递给该<div>
元素的.html(newContentAsString)
函数。查看文档以了解更多信息。