1

I'm using lightGallery with cycle2 plugin and I have categories for my image and when I clicked any categories my images must change with clicked category how can I do that ? any example ?

my a[data-id] is category images parents and my li#id category names

I want to share with you my structure, here you are please:

$(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>

and if you want to see on codepen please click here

ani_css
  • 2,118
  • 3
  • 30
  • 73
  • 1
    You want images which `data-id` attribute match the clicked `li`'s `id` attribute to change? Based on your question you could also want to change the images category. – Clijsters Mar 26 '17 at 09:10
  • yes exactly I want to this – ani_css Mar 26 '17 at 09:46
  • I mean all my image has `data-id` and my li has `id` and if data-id match width id than show the match id or images (sorry about my english) – ani_css Mar 26 '17 at 09:47
  • I edited your question to make it more clear. What you want is to [handle an event](http://stackoverflow.com/questions/4323848/how-to-handle-button-click-events-in-jquery), [select images based on their attributes](http://stackoverflow.com/a/2487751/4068240) and change them. As it's not clear _how_ you want to change them I can't refer to anything. – Clijsters Mar 26 '17 at 10:28

1 Answers1

2

From your question it's unclear where your skill level is and either your problem is technical or conceptual. Let's try to cover both...

Your category system could be realized as follows:

First of all we have to listen to the click event and react on that.
As you are using jQuery the following will work:

$('.gallery-categories li').on('click', function(event) {
    var category = $(event.target).attr('id');
    console.debug(category + ' selected!');
});

From now on, every time a user clicks on a li underneath your .gallery-selector the event handler is invoked. Note that this function does not check whether id is set or not.

Now we want to select all elements matching your category:

// this happens in our event handler too
var $items = $('.mySlideShow a[data-id="' + category + '"]');

...Iterate over them and change something:

$items.each(function() {
    $(this).addClass('selected');
});

There we are:

$('.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');
    });
});

codepen

Clijsters
  • 4,031
  • 1
  • 27
  • 37
  • thanks for your help..my english is not enought to tell something..for example if I clicked naturel my naturel image will be open will thumbnail or if I clicked sports sports images will be open with thumbnails – ani_css Mar 26 '17 at 20:09
  • Sorry I don't understand your comment – Clijsters Apr 01 '17 at 22:04
  • I mean this example just give a border to carousel.my question was different..I have 3 categories and when I clicked my naturel categories than I want to show naturel images or if I clicked animals than animals images must be shown – ani_css Apr 02 '17 at 09:47
  • 1
    Yes you can change the bordered class to anything else, it's just an example indicating how to move on. Your question says "change", not "show". I won't write you the whole code for this. – Clijsters Apr 02 '17 at 09:51
  • thanks for everything I'm new on jquery and my english is bad thank you so much – ani_css Apr 02 '17 at 10:16