I had a static page with a fixed set of images used in data-filtering. The code that worked is this :
<div class="gallerySelector">
<ul class="gallerySelectorList">
<li class="current"><a data-filter="article.portfolio" href="#">All</a></li>
<li><a data-filter="article.portfolio[data-category~='illustration']" href="#">Events</a></li>
<li><a data-filter="article.portfolio[data-category~='photography']" href="#">Entertainment</a></li>
<li><a data-filter="article.portfolio[data-category~='branding']" href="#">Weddings</a></li>
<li><a data-filter="article.portfolio[data-category~='video']" href="#">Video</a></li>
</ul>
</div>
<article class="portfolio" data-category="photography">
<section class="thumbImage">
<img src="images/gallery/gallery-02-thumb.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<a class="thumbLink" href="images/gallery/gallery-02.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."><i class="icon-search"></i></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="video">
<section class="thumbImage">
<img src="images/gallery/gallery-03-thumb.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.</p>
<a class="thumbLink" href="http://vimeo.com/24169968" rel="prettyPhoto" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."><i class="icon-search"></i></a>
</div>
</div>
</section>
</article>
Now I want to load images dynamically from the folder. So I wrote a PHP and ajax code and correctly got all the proper filenames in result. But I dont understand how to add these result in data filter. This is my current code.
<div class="gallerySelector">
<ul class="gallerySelectorList">
<li class="current"><a data-filter="article.portfolio" href="#">All</a></li>
<li><a data-filter="article.portfolio[data-category~='illustration']" href="#">Events</a></li>
<li><a data-filter="article.portfolio[data-category~='photography']" href="#">Entertainment</a></li>
<li><a data-filter="article.portfolio[data-category~='branding']" href="#">Weddings</a></li>
<li><a data-filter="article.portfolio[data-category~='video']" href="#">Video</a></li>
</ul>
</div>
<section class="portfolio_container">
<script type = "text/javascript">
$.ajax({
type: 'POST',
url: 'getThumbs.php',
data: {'folderName' : 'images/gallery/events/thumbs/'},
success: function(msg){
var result = JSON.parse(msg);
var data_html = "";
for(var i in result) {
var $newItems = '<section class="thumbImage"><img src="'+result[i]+'" alt="" class="fullwidth"></section>';
$("#article.portfolio[data-category~='illustration']").append($newItems).isotope('insert', $newItems);
}
}
});
</script>
</section>
How can I make the data-filter dynamic ?
<script type = "text/javascript">
$.ajax({
type: 'POST',
url: 'getThumbs.php',
success: function(msg){
$('.gallerySelectorList').html(msg).show();
}
}
});
</script>
Done using :
var $newElement = $(subHtml);
$('.portfolio_container').isotope('insert', $newElement);
Reference : http://isotope.metafizzy.co/v1/docs/adding-items.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.