Задача
При первом посещении моей страницы проектов и фильтрации результатов все работает отлично. Но по какой-то причине в Chrome каждый раз, когда я фильтрую второй раз, все изображения исчезают (устанавливается непрозрачность 0).
Страница портфолио
Кажется, я не могу понять, где это происходит, и тот факт, что это происходит только в Chrome, делает его еще более запутанным.
Вот код jqueryJquery:
if (jQuery().quicksand) {
(function($) {
$.fn.sorted = function(customOptions) {
var options = {
reversed: false,
by: function(a) {
return a.text();
}
};
$.extend(options, customOptions);
$data = jQuery(this);
arr = $data.get();
arr.sort(function(a, b) {
var valA = options.by($(a));
var valB = options.by($(b));
if (options.reversed) {
return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
} else {
return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
}
});
return $(arr);
};
})(jQuery);
jQuery(function() {
var read_button = function(class_names) {
var r = {
selected: false,
type: 0
};
for (var i=0; i < class_names.length; i++) {
if (class_names[i].indexOf('selected-') == 0) {
r.selected = true;
}
if (class_names[i].indexOf('segment-') == 0) {
r.segment = class_names[i].split('-')[1];
}
};
return r;
};
var determine_sort = function($buttons) {
var $selected = $buttons.parent().filter('[class*="selected"]');
return $selected.find('a').attr('data-value');
};
var determine_kind = function($buttons) {
var $selected = $buttons.parent().filter('[class*="selected"]');
return $selected.find('a').attr('data-value');
};
var $preferences = {
duration: 500,
adjustHeight: 'auto'
}
var $list = jQuery('#items');
var $data = $list.clone();
var $controls = jQuery('.selector');
$controls.each(function(i) {
var $control = jQuery(this);
var $buttons = $control.find('a');
$buttons.bind('click', function(e) {
var $button = jQuery(this);
var $button_container = $button.parent();
var button_properties = read_button($button_container.attr('class').split(' '));
var selected = button_properties.selected;
var button_segment = button_properties.segment;
if (!selected) {
$buttons.parent().removeClass();
$button_container.addClass('selected');
var sorting_type = determine_sort($controls.eq(1).find('a'));
var sorting_kind = determine_kind($controls.eq(0).find('a'));
if (sorting_kind == 'all') {
var $filtered_data = $data.find('li');
} else {
var $filtered_data = $data.find('li.' + sorting_kind);
}
var $sorted_data = $filtered_data.sorted({
by: function(v) {
return $(v).find('strong').text().toLowerCase();
}
});
$list.quicksand($sorted_data, $preferences, function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); });
}
e.preventDefault();
});
});
});
}
HTML
Ниже HTML, который я использую на своей странице. Я смотрел на это снова и снова, и все, кажется, хорошо.
<ul class="selector">
<li><a data-value="all" href="#">All</a></li>
<li><a data-value="web" href="#">Web</a></li>
<li><a data-value="print" href="#">Print</a></li>
<li><a data-value="uni" href="#">University Projects</a></li>
</ul>
<div class="clear"> </div>
<ul id="items" class="glow gallery">
<!-- Villas on great bay -->
<li data-id="id1" class="web">
<a class="group" href="#thevillas"><img src="images/projects/thevillas/thumb.jpg" alt="Website: The Villas on Great Bay" /></a>
<p>The Villas on Great Bay<br /><span>Beachfront Villa Web Page, 2010</span></p>
</li>
<!-- GEDsxm -->
<li data-id="id2" class="web">
<a class="group" href="#GEDsxm"><img src="images/projects/gedsxm/thumb.jpg" alt="Website: GEDsxm.com" /></a>
<p>GED SXM<br /><span>Academic Online training Site, 2009</span></p>
</li>
<!-- Weightlifting -->
<li data-id="id3" class="print uni">
<a rel="weightlifting" class="group" title="Logo Design for the new Weightlifting club at FSU" id="single_image" href="images/projects/weightlifting/1.jpg"><img src="images/projects/weightlifting/thumb.jpg" alt="Logo for FSU Weightlifting Club" /></a>
<a rel="weightlifting" style="display:none" class="group" title="Logo Design for the new Weightlifting club at FSU" id="single_image" href="images/projects/weightlifting/2.jpg"></a>
<p>FSU Weightlifting<br /><span>Logo Design, 2009</span></p>
</li>
<!-- Sintelligence Logo -->
<li data-id="id11" class="print">
<a class="group" title="Sintelligence Logo" href="images/projects/sintel/1.jpg"><img src="images/projects/sintel/thumb.jpg" alt="Sintelligence Logo" /></a>
<p>Sintelligenceo<br /><span>Logo Design, 2006</span></p>
</li>
<!-- Egyptian Night -->
<li data-id="id4" class="print uni">
<a class="group" title="Poster for TCC's International Student Services" href="images/projects/egypt/1.jpg"><img src="images/projects/egypt/thumb.jpg" alt="An Egyptian Night Poster" /></a>
<p>TCC's Intl. Student Services<br /><span>An Egyptian Night Poster, 2009</span></p>
</li>
<!-- ISS Magazine Ad -->
<li data-id="id5" class="print uni">
<a class="group" title="ISS Magazine Add" href="images/projects/isoad/1.jpg"><img src="images/projects/isoad/thumb.jpg" alt="ISS Magazine Ad" /></a>
<p>TCC's Intl. Student Services<br /><span>Featured Magazine Ad, 2009</span></p>
</li>
<!-- Alacarte ad 1 -->
<li data-id="id6" class="print">
<a class="group" title="Kitchens Alacarte Newspaper Add" href="images/projects/alacarte/ad1/1.jpg"><img src="images/projects/alacarte/ad1/thumb.jpg" alt="Alacarte Newspaper Ad" /></a>
<p>Kitchens Alacarte<br /><span>Newspaper Ad, 2010</span></p>
</li>
<!-- Alacarte ad 2 -->
<li data-id="id7" class="print">
<a class="group" title="Kitchens Alacarte Newspaper Add v2" href="images/projects/alacarte/ad2/1.jpg"><img src="images/projects/alacarte/ad2/thumb.jpg" alt="Alacarte Newspaper Ad" /></a>
<p>Kitchens Alacarte<br /><span>Newspaper Ad, 2010</span></p>
</li>
<!-- FPSI -->
<li data-id="id8" class="print uni">
<a class="group" title="Florida Public Safety Institute Logo Drafts" href="images/projects/fpsi/1.jpg"><img src="images/projects/fpsi/thumb.jpg" alt="FPSI Logo Drafts" /></a>
<p>Florida Public Safety Institute<br /><span>Logo Drafts, 2009</span></p>
</li>
<!-- Helicopter -->
<li data-id="id9" class="print">
<a rel="heli" class="group" title="Leeward Islands Helicopters Post Card Front" id="single_image" href="images/projects/helicopter/1.jpg"><img src="images/projects/helicopter/thumb.jpg" alt="Leeward Islands Helicopters Post Card Front" /></a>
<a rel="heli" style="display:none" class="group" title="Leeward Island Helicopters Post Card Back" id="single_image" href="images/projects/helicopter/2.jpg"></a>
<p>Leeward Islands Helicopters<br /><span>Post Cards, 2009</span></p>
</li>
<!-- ISS Logo -->
<li data-id="id10" class="print uni">
<a class="group" title="International Student Services Logo" href="images/projects/iss/1.jpg"><img src="images/projects/iss/thumb.jpg" alt="ISS Logo" /></a>
<p>International Student Services Logo<br /><span>Logo Design, 2010</span></p>
</li>
<!-- VDL Poster -->
<li data-id="id12" class="print">
<a class="group" title="Superbowl Party Poster" href="images/projects/vdl/1.jpg"><img src="images/projects/vdl/thumb.jpg" alt="Superbowl Party Poster" /></a>
<p>Superbowl Party Poster<br /><span>Logo Design, 2009</span></p>
</li>
</li>
</ul>
Обновлен:
Я подумал, что это может помочь добавить, что если я никогда не посещал сайт, прежде чем он работает нормально в первый раз в Chrome. Но после обновления изображения снова исчезают.