How can we optimize the category system for our carousel display?

I discovered the amazing combination of using lightGallery along with the cycle2 plugin. My images are categorized, and I would like them to dynamically change when a category is clicked. Can anyone provide an example on how to achieve this?

The categories for my images are denoted by a[data-id], which represent the image parents, and li#id represents the category names.

Below is the code structure that I am working with:

$(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://sach...
javascriptjqueryhtmlcss

Answer №1

It seems there may be some uncertainty regarding your skill level and whether your issue is technical or conceptual. Let's tackle both aspects...

Implementing your category system:

To begin, we need to listen for the click event and respond accordingly.
If you are utilizing jQuery, the following code snippet will suffice:

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

Now, whenever a user clicks on an li within your .gallery-selector, the event handler will be triggered. It is important to note that this function does not verify if the id is defined.

Next, let's select all elements corresponding to the chosen category:

// This step is also part of our event handler
var $items = $('.mySlideShow a[data-id="' + category + '"]');

...We iterate through these elements and make adjustments:

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

Voilà!

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

Check out the code on CodePen

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on choosing JSON data to show on an HTML page

I am working with JSON data from a specific URL and I need to display only the information related to France on an HTML page. However, I am unsure of how to achieve this. Can someone please assist me? Here is my JavaScript code: // API Fetch Call const ...

javascripthtmljsonapi

Tips for sending a String[] to my Angular 2 HTML template

In the export class of my component, I have a string array variable declared like this; barChartLabel:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; To display t ...

javascripthtmlcssangular

CSS - Make the entire div clickable while leaving a specific area non-clickable

I have a block containing some information. Within this div is a hidden button labeled .remove. Clicking on the main block will take you to another page, while hovering over the div will reveal the button. However, clicking the button also navigates you aw ...

jqueryhtmlcss

Difficulty encountered in aligning items within neighboring table cells vertically

Currently, I am facing a styling issue with a few table rows. In this particular screenshot: https://i.sstatic.net/FcmJW.png The cells in the blue and red circles are part of a table row (with a height of 50px). Both are set to "vertical-align:top". The ...

htmlcssvertical-alignment

Is there a way to utilize OpenLayers to showcase various icons for distinct features all within one layer?

Being new to Openlayers/JS and fairly inexperienced with programming in general, there may be other issues in my code that I'm unaware of. I am currently using the latest version of Openlayers (5.3.0). My application sends GeoJson formatted data via ...

javascriptajaxgisgeojsonopenlayers-5

What is the best way to configure $.Scroll for iOS and Tablets?

Struggling with setting scroll in jQuery / JavaScript and unsure how to utilize viewport for iOS and tablet PC's. Any guidance on using $.Scroll for design / Animation purposes would be greatly appreciated. Cheers, Here's my progress so far: ...

javascriptjqueryioscross-browsertablet

Apply a translucent background color to an image element using CSS

Is there a way to create an overlay div using my HTML markup without adding any additional code? I want to add a dark overlay with opacity over the image, but I'm limited in what I can use. background: rgba(0, 0, 0, 0.5); Here is the current marku ...

htmlcssimageoverlay

Dealing with a Promise and converting it into an array: a step-by-step

I am encountering difficulties progressing with my Promise returned from the getPostedPlaces() function. After executing getAll(), an Array is displayed as shown below. Although the array appears to be correct, I am unsure how to make the getAll() function ...

javascriptarraysreactjsasync-awaites6-promise

The button in the flex container is not wide enough due to center alignment

For my project, I implemented a CSS grid layout consisting of 20 rows and 20 columns (5% of screen for each cell). One particular page includes a button that initially fit within grid columns 5-8 and rows 6-9 without any issues. However, I wanted to center ...

htmlcssflexbox

CSS based on Media Query width is not being applied after content has been rewritten by an AJAX call

Check out this website (created using Zurb Foundation Framework) where, on screens wider than 425px, there is a row of books displayed on a background image resembling a bookshelf within a specific div element. However, when viewing the page on a phone o ...

cssajaxmedia-queries

Does jQuery Ajax forget the code it creates?

Recently, I started exploring the world of Ajax with jQuery and PHP. The code snippet below successfully inserts HTML code into a container (a div named nav sub). However, when attempting to run a similar code on the dynamically generated HTML, jQuery see ...

ajaxjquery

The Ajax loading panel functions properly on Firefox, but it seems to be ineffective on Chrome. Does anyone have any insights into the reason

Recently, I came across a helpful ajax loading panel at Here is the code snippet that I have been using: jQuery('#map').showLoading(); var request = OpenLayers.Request.POST({ url: "service.asmx/DeleteStopPoint", data: "{'TripId&ap ...

jqueryajaxcross-browser

Secure Object-Oriented PHP Project

I am currently working on a "secure" project to solidify my understanding of Object-Oriented Programming. Here is a snippet from the code: safe.php <?php class lockbox{ public $isLocked = true; public $isClosed = true; p ...

phphtmloop

Retrieve information from a .json file using the fetch API

I have created an external JSON and I am trying to retrieve data from it. The GET request on the JSON is functioning correctly, as I have tested it using Postman. Here is my code: import "./Feedback.css"; import { useState, useEffect } from " ...

javascriptreactjsjsonreact-hooks

Retrieve the most recent information based on the ID from an object by utilizing timestamps within Angular 6

I have an array of objects stored in the 'component' variable component=[{id:1,date:'20-10-2020'},{id:1,date:'13-01-2020'},{id:2,date:'30-03-2020'}] Within this array, there are 2 objects with the same 'id&apos ...

javascriptangularfilter

Updating the FormArray index using Angular's `removeAt(i)` function does not reflect changes in the DOM

I initially suspected that there was an issue with my implementation, but it appears that the code I used to create a dynamic FormArray should be working, as indicated in this question I posted. However, when I integrate it into my project, the remove func ...

javascriptangulartypescriptangular-reactive-forms

Is Cookie-session the most ideal choice for React applications?

My NodeJS application currently authenticates users through a third-party app. Once the app retrieves user data, a cookie is generated and sent to the client for React to access the user data from that Cookie. Should I stick with using cookies or consi ...

javascriptnode.jssecurityexpresssession-cookies

React Styles not functioning properly with the use of template literals

What could be causing the malfunction of this inline style? Upon checking my console, I received the following error message: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + ' ...

javascriptreactjs

Accessing a JSON array from PHP script with the help of jQuery

Recently, I delved into the world of jQuery and PHP by attempting to pass variables from Javascript to a PHP script using $.ajax. Despite my lack of expertise in this area, I managed to write some code that kind of worked. However, today I encountered a n ...

phpjqueryjsonajax

The distortion of Blender animation becomes apparent once it is imported into three.js

I've been working on a project where I'm incorporating animations into a scene using a combination of blender and three.js. It took me several hours of trial and error to finally get the model and animation successfully imported into three.js. I ...

javascriptanimationthree.jsblender