Is there a way to hide articles with empty images?
<article data-stars="<?php echo $StarRating[6];?>" name="<?php echo $Price[6];?>" class="box">
<img width="270" height="160" alt="" src="<?php echo $img[6][1];?>"></a>
<div>Content</div>
</article>
I am sorting these articles using two jQuery filters: Price Filter:
tjq(document).ready(function() {
tjq("#price-range").slider({
range: true,
min: 0,
max: 3000,
values: [ 1, 2000 ],
slide: function( event, ui ) {
tjq(".min-price-label").html( "€" + ui.values[ 0 ]);
tjq(".max-price-label").html( "€" + ui.values[ 1 ]);
$('article[data-price]').each(function() {
var dPrice = $(this).attr('data-price');
if ( dPrice < ui.values[ 0 ] || dPrice > ui.values[ 1 ] )
$(this).hide();
else
$(this).show();
});
}
});
And the Star rating filter
$('input[type=checkbox]').click(function(e){
$("input[type=checkbox]").each(function(){
grabVal = $(this).val();
if(!$(this).is(":checked")){
$("article[data-stars='"+grabVal+"']").hide();
}else{
$("article[data-stars='"+grabVal+"']").show();
}
});
if(!$("input[type=checkbox]").is(":checked")){
$("article").show();
}
});
Finally, for more control over the display of articles, you can use the Show less/more filter:
$(document).ready(function () {
$('#hotel-list article:gt(4)').hide();
$('#loadMore').click(function () {
$('#hotel-list article:hidden:lt(2)').show();
});
$('#showLess').click(function () {
$('#hotel-list article').not(':lt(4)').hide();
});
});
Would appreciate assistance in creating a filter to hide articles with empty images.