在這一點上，我幾乎得到了我想要的，但有一個錯誤在我的代碼和我看不到它從哪裏來。
我選擇的解決方案是引入一個新的MyCat類，我的修改試圖確保只有當圖像對應於當前類別時才存在此類，並且jquery考慮了此類。
下面是對這個錯誤的描述： 這種情況發生在我第一次使用x圖像過濾某個類別時，瀏覽它們並離開最後一幅圖像的導航。 然後我過濾一個小於x圖像的類別，讓我們說y。 現在，當我點擊圖像時，我沒有得到任何圖像，或者在某些情況下圖像不好），我需要點擊上一圖像鏈接（y-x）次才能得到正確的圖像。請注意，此時系統穩定下來，因爲現在下一個圖像鏈接不可用。
我希望如果不讓我知道我的描述是可以理解的。 我不知道是否有更優雅的方式來做到這一點，但因爲它幾乎可行，請讓我知道，如果你看到可以解釋錯誤的東西。
下面是我修改了兩個重要文件的代碼：
gallery.php：
...
<?php if((!empty($this->lead_items) || (!empty($this->intro_items))) && $this->params->get('show_filter')): ?>
<div class="filters">
<ul id="filters" class="unstyled">
<li><a href="#" data-filter="*" class="selected"><?php echo JText::_('TPL_COM_CONTENT_GALLERY_FILTER_SHOW_ALL'); ?></a></li>
<?php
foreach ($galleryCategories as $key => $value) :
?>
<li><a class="" href="#"data-filter=".<?php echo special_chars_replace($value); ?>"><?php echo ucwords(str_replace("_"," ",$value)); ?></a></li>
<?php endforeach; ?>
</ul>
<div class="clearfix"></div>
</div>
<?php endif; ?>
...
<div class="row-fluid">
<ul id="isotopeContainer" class="gallery items-row cols-<?php echo (int) $this->columns;?>">
<?php
$valgtr = array();
$keysgtr = array_keys($this->intro_items);
shuffle($keysgtr);
foreach($keysgtr as $keygtr) $valgtr[] = $this->intro_items[$keygtr];
foreach ($valgtr as $key => &$item) :
?>
<?php
$key = ($key - $leadingcount) + 1;
$rowcount = (((int) $key - 1) % (int) $this->columns) + 1;
if ($rowcount == 1) : ?>
<?php endif; ?>
<li class="gallery-item <?php echo special_chars_replace(strtolower(str_replace(" ","_",$item->category_title))); ?>">
<?php
$this->item = &$item;
echo $this->loadTemplate('item');
...
<script type="text/javascript">
jQuery(document).ready(function() {
(function($){
$(window).load(function(){
var $cols = <?php echo $this->columns; ?>;
var $container = $('#isotopeContainer');
$item = $('.gallery-item')
$item.outerWidth(Math.floor($container.width()/$cols));
$container.isotope({
animationEngine: 'best-available',
animationOptions: {
queue: false,
duration: 800
},
containerClass : 'isotope',
containerStyle: {
position: 'relative',
overflow: 'hidden'
},
hiddenClass : 'isotope-hidden',
itemClass : 'isotope-item',
resizable: true,
resizesContainer : true,
transformsEnabled: !$.browser.opera // disable transforms in Opera
});
if($container.width() <= '767'){
$item.outerWidth($container.width());
$item.addClass('straightDown');
$container.isotope({
layoutMode: 'straightDown'
});
} else {
$item.removeClass('straightDown');
$container.isotope({
layoutMode: 'fitRows'
});
}
$(window).resize(function(){
$item.outerWidth(Math.floor($container.width()/$cols));
if($container.width() <= '767'){
$item.outerWidth($container.width());
$item.addClass('straightDown');
$container.isotope({
layoutMode: 'straightDown'
});
} else {
$item.outerWidth(Math.floor($container.width()/$cols));
$item.removeClass('straightDown');
$container.isotope({
layoutMode: 'fitRows'
});
}
});
});
})(jQuery);
});
</script>
<?php if($this->params->get('show_filter')): ?>
<script type="text/javascript">
jQuery(document).ready(function() {
(function($){
$(window).load(function(){
var $container = $('#isotopeContainer');
// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
if(selector == "*"){
$(".touchGalleryLink").addClass("MyCat");
} else {
$(".touchGalleryLink").removeClass("MyCat");
$(".touchGalleryLink").each(function() {
var tmpvar = $(this).parent().parent().attr('class').split(" ",2);
if(tmpvar[1] == selector.substr(1)){
$(this).addClass("MyCat");
}
});
}
jQuery('a.touchGalleryLink.MyCat').touchTouch();
return false;
});
$("#filters a:first").trigger("click");
var $optionSets = $('#filters li'),
$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('#filters');
$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;
});
});
})(jQuery);
});
</script>
<?php endif; ?>
touch.gallery.js：
(function($){
/* Private variables */
var overlay = $('<div id="galleryOverlay">'),
slider = $('<div id="gallerySlider">'),
prevArrow = $('<a id="prevArrow"></a>'),
nextArrow = $('<a id="nextArrow"></a>'),
overlayVisible = false;
/* Creating the plugin */
$.fn.touchTouch = function(){
var placeholders = $([]),
index = 0,
items = this;
gtritems = items;
$.each(gtritems, function() {
if(!$(this).hasClass("MyCat")){
$(this).remove();
}
});
console.log(gtritems);
// Appending the markup to the page
overlay.hide().appendTo('body');
slider.appendTo(overlay);
// Creating a placeholder for each image
gtritems.each(function(){
placeholders = placeholders.add($('<div class="placeholder">'));
});
$("#gallerySlider").empty();
// Hide the gallery if the background is touched/clicked
slider.append(placeholders).on('click',function(e){
if(!$(e.target).is('img')){
hideOverlay();
}
});
// Listen for touch events on the body and check if they
// originated in #gallerySlider img - the images in the slider.
$('body').on('touchstart', '#gallerySlider img', function(e){
var touch = e.originalEvent,
startX = touch.changedTouches[0].pageX;
slider.on('touchmove',function(e){
e.preventDefault();
touch = e.originalEvent.touches[0] ||
e.originalEvent.changedTouches[0];
if(touch.pageX - startX > 10){
slider.off('touchmove');
showPrevious();
}
else if (touch.pageX - startX < -10){
slider.off('touchmove');
showNext();
}
});
// Return false to prevent image
// highlighting on Android
return false;
}).on('touchend',function(){
slider.off('touchmove');
});
// Listening for clicks on the thumbnails
gtritems.on('click', function(e){
e.preventDefault();
// Find the position of this image
// in the collection
index = gtritems.index(this);
console.log(this);
showOverlay(index);
showImage(index);
// Preload the next image
preload(index+1);
// Preload the previous
preload(index-1);
});
// If the browser does not have support
// for touch, display the arrows
if (!("ontouchstart" in window)){
overlay.append(prevArrow).append(nextArrow);
prevArrow.click(function(e){
e.preventDefault();
showPrevious();
});
nextArrow.click(function(e){
e.preventDefault();
showNext();
});
}
// Listen for arrow keys
$(window).bind('keydown', function(e){
if (e.keyCode == 37){
showPrevious();
}
else if (e.keyCode==39){
showNext();
}
});
/* Private functions */
function showOverlay(index){
// If the overlay is already shown, exit
if (overlayVisible){
return false;
}
// Show the overlay
overlay.show();
setTimeout(function(){
// Trigger the opacity CSS transition
overlay.addClass('visible');
}, 100);
// Move the slider to the correct image
offsetSlider(index);
// Raise the visible flag
overlayVisible = true;
}
function hideOverlay(){
// If the overlay is not shown, exit
if(!overlayVisible){
return false;
}
// Hide the overlay
overlay.hide().removeClass('visible');
overlayVisible = false;
}
function offsetSlider(index){
// This will trigger a smooth css transition
slider.css('left',(-index*100)+'%');
}
// Preload an image by its index in the items array
function preload(index){
setTimeout(function(){
showImage(index);
}, 1000);
}
// Show image in the slider
function showImage(index){
// If the index is outside the bonds of the array
if(index < 0 || index >= gtritems.length){
return false;
}
// Call the load function with the href attribute of the item
loadImage(gtritems.eq(index).attr('href'), function(){
placeholders.eq(index).html(this);
});
}
// Load the image and execute a callback function.
// Returns a jQuery object
function loadImage(src, callback){
var img = $('<img>').on('load', function(){
callback.call(img);
});
img.attr('src',src);
}
function showNext(){
// If this is not the last image
if(index+1 < gtritems.length){
index++;
offsetSlider(index);
preload(index+1);
}
else{
// Trigger the spring animation
slider.addClass('rightSpring');
setTimeout(function(){
slider.removeClass('rightSpring');
},500);
}
}
function showPrevious(){
// If this is not the first image
if(index>0){
index--;
offsetSlider(index);
preload(index-1);
}
else{
// Trigger the spring animation
slider.addClass('leftSpring');
setTimeout(function(){
slider.removeClass('leftSpring');
},500);
}
}
};
})(jQuery);