我正在使用lightGallery和cycle2 plugin我的图片类别，当我点击任何类别时，我的图片必须更改点击类别我该怎么办？任何一个例子？
我的a[data-id]是类别图片父母和我的li#id类别名称
我想与你分享我的结构，欢迎你来到这里：
$(document).ready(function() {
$('.mySlideShow').cycle({
pauseOnHover: true,
pager: "#single-pager",
log:false,
pagerTemplate: "<img src='{{src}}' width=48 height=48>",
slides: ">a"
});
$(".mySlideShow").lightGallery({
exThumbImage: "data-exthumbimage",
download: false,
thumbnail: true,
loadYoutubeThumbnail: true,
youtubeThumbSize: 'default',
loadVimeoThumbnail: true,
vimeoThumbSize: 'thumbnail_medium',
});
}).single-gallery {
position: relative;
width: 900px;
}
.mySlideShow {
height: 494px;
background: #000;
overflow: hidden;
}
#single-pager img {
width: 49.3px;
border: 1px solid #fff;
cursor: pointer;
margin: 2px;
}
.gallery-categories {
position: absolute;
z-index: 20000;
left: 0;
top: 10%;
list-style: none;
padding: 0;
}
h1 {
color: #FFF;
padding: 0;
margin: 0;
font-size: 16px;
text-align: center;
}
.gallery-categories li {
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-weight: bold;
padding: 4px;
margin: 2px;
display: inline-block;
cursor: pointer;
}<link href="https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css" rel="stylesheet" />
<div class="single-gallery" id="single-gallery">
<div class="single-gallery-carousel">
<div class="slideshow-area">
<div class="mySlideShow">
<a data-src="https://sachinchoolur.github.io/lightGallery/static/img/11.jpg" data-exthumbimage="https://sachinchoolur.github.io/lightGallery/static/img/11.jpg" data-id="naturel">
<img data-poster="https://sachinchoolur.github.io/lightGallery/static/img/11.jpg" src="https://sachinchoolur.github.io/lightGallery/static/img/11.jpg">
</a>
<a class="video" href="https://vimeo.com/1084537" data-src="img/assets/otel-detay-slide-1.jpg" data-exthumbimage="img/assets/otel-detay-slide-1.jpg" data-id="naturel">
<img src="img/assets/otel-detay-slide-1.jpg" />
</a>
<a data-src="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg" data-exthumbimage="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg"
data-id="naturel">
<img data-poster="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg" src="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg">
</a>
<a data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-id="animals">
<img class="lazy" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
</a>
<img class="lazy" src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg">
</a>
<a data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg"
data-id="sports">
<img class="lazy" src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
</a>
<a data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg"
data-id="sports">
<img class="lazy" src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
</a>
<a data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-id="animals">
<img class="lazy" src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg">
</a>
<a data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg"
data-id="sports">
<img class="lazy" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg">
</a>
</div>
<!-- cycle slideshow-->
</div>
<div id="single-pager" class="center external"></div>
</div>
<div class="gallery-categories">
<h1>Select a Categories</h1>
<ul>
<li id="sports">Sports</li>
<li id="animals">Animals</li>
<li id="naturel">Naturel</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.min.js"></script>
答案 0 :(得分：2)
从你的问题来看，目前还不清楚你的技能水平在哪里，你的问题是技术问题还是概念问题。让我们尝试涵盖两个......
您的类别系统可以按如下方式实现：
首先，我们必须听取点击事件并对此作出反应 当您使用jQuery时，以下内容将起作用：
$('.gallery-categories li').on('click', function(event) {
var category = $(event.target).attr('id');
console.debug(category + ' selected!');
});
从现在开始，每次用户点击li下面的.gallery-selector时，都会调用事件处理程序。请注意，此函数不会检查是否设置了id。
现在我们要选择与您的类别匹配的所有元素：
// this happens in our event handler too
var $items = $('.mySlideShow a[data-id="' + category + '"]');
...迭代他们并改变一些事情：
$items.each(function() {
$(this).addClass('selected');
});
我们有：
$('.gallery-categories li').on('click', function(event) {
var category = $(event.target).attr('id');
var $items = $('.mySlideShow a[data-id="' + category + '"]');
$items.each(function() {
$(this).addClass('selected');
});
});