Bu yüzden, çevrimiçi bulduğum bir şablondan yola çıkarak bir site oluşturuyorum, istediğim şekilde çalışmasını sağlamak için herhangi bir yardımı takdir ediyorum. Şu anda birden fazla küçük resim arasında sıralama yapmanıza izin veren filtrelerle kurulmuştur. Ancak, şu anda tüm "filtreler" olarak işlev gören bağlantıların yerine, tüm küçük resimlerin gösterileceği div yerine geçmesini istiyorum.Tek bir sayfa sitesinde bir Div İçeriğini Değiştirin
Burada jQuery'ye bakıp, div içeriğini değiştirmeyi ve div'ları gizlemeyi ve bunları tıklatmayla göstermeyi de dahil olmak üzere div içeriğini değiştirin. Yaptığım hiçbir şey işe yaramıyor. Ben alır div bir filtre tıkladığınızda Sonra geçerli bir div adında "designprojects" içinde UL ve sarmak, İdeal
<!-- 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>
: Burada
HTML örneğidir içinde proje bilgisi olan yeni bir tane ile değiştirilir. Ben "Tüm Projeler" Ben tıklayıp tam ekran yapabilirsiniz küçük resimler (görmek istiyorum tıkladığınızda,.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;
});
}
}
Özetlemek gerekirse: Burada
sitesi filtreleri işlevini yapmak için kullandığı güncel Java Geçerli işlev, ayrıca bu varsayılan olmasını istiyorum).Bir proje adına tıkladığımda, projeyle ilgili bir paragrafla değiştirilecek tüm küçük resimleri ve tam ekrana genişletmek için tıklatılabilecek ek küçük resimleri içeren div olmasını istiyorum.
Benim şu anki ilerleme jQuery'nin .html() işlevinde www.codyshipman.com