Ways to create two distinct "on click" actions for a single image to execute two distinct tasks

Clicking on an image will open a slider showing all images before filtering. Once filtered, only the selected images will be displayed in the slider.

<div class="gallery row" id="gallery" style="margin:0;">
  <!-- Grid column -->

  <div class="mb-3 pics animation all 2 col-md-4 col-sm-12">
    <img class="img-fluid" src="assets/images/11.jpg" alt="Card image cap" style="height:300px;" onclick="openModal();currentSlide(1)">
  </div>
  <!-- Grid column -->

  <!-- Grid column -->
  <div class="mb-3 pics animation all 1 col-md-4 col-sm-12">
    <img class="img-fluid" src="assets/images/111.jpg" alt="Card image cap" style="height:300px;" onclick="openModal();currentSlide(2)">
  </div>
  <!-- Grid column -->

  <!-- Grid column -->
  <div class="mb-3 pics animation all 1 col-md-4 col-sm-12">
    <img class="img-fluid" src="assets/images/131.jpg" alt="Card image cap" style="height:300px;" onclick="openModal();currentSlide(3)">
  </div>
  <!-- Grid column -->

  <!-- Grid column -->
  <div class="mb-3 pics animation all 2 col-md-4 col-sm-12">
    <img class="img-fluid" src="assets/images/141.png" alt="Card image cap" style="height:300px;" onclick="openModal();currentSlide(4)">
  </div>
  <!-- Grid column -->

  ...

javascripthtmlcss

Answer №1

Ever experimented with nesting two functions within a function?

function parent_function($argument){
      openModal();
      executeChildFunction($argument);
}

Also, in HTML context, 

<img class="img-fluid" ... onclick="parent_function(9);">

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

"Utilizing JSON.parse() to convert a string captured from a PythonShell back

Using PythonShell in Node to execute a Python script that generates a Python dict, such as: { "playedStatus": game['playedStatus'].encode('ascii'), "awayTeamAbb": game['awayTeamAbb'].encode('ascii'), "homeTeamAbb": ...

javascriptpythonjsonnode.jsjavascript-objects

Can a Unicode character be overwritten using a specific method?

Is there a way to display a number on top of the unicode character '♤' without using images? I have over 200 ♤ symbols each with a unique number, and using images would take up too much space. The characters will need to be different sizes, a ...

javascripthtmlcss

Learn how to retrieve data from the console and display it in HTML using Angular 4

Need help fetching data inside Angular4 HTML from ts variable. Currently only able to retrieve 2 data points outside the loop. Can anyone assist with pulling data inside Angular4? HTML: <tr *ngFor="let accept of accepts"> ...

javascriptangulartypescript

Creating a dynamic drop-down menu using a single database table in CodeIgniter

Table https://i.sstatic.net/yw7d0.jpg I need the district names to dynamically change based on the Category selection. For example, when I select Category 1 from the drop-down, only the district names under Category 1 should be displayed, and the same fo ...

javascriptphpjqueryajaxcodeigniter

What are some ways to enhance the functionality of the initComplete feature in Dat

$('#example').dataTable( { "initComplete": function(settings, json) { alert( 'DataTables has finished its initialisation.' ); } } ); Is there a way to extend the initComplete function for other languages? $.extend( true, $.f ...

javascriptjqueryjquery-pluginsdatatables

Retrieve information from a pair of models

Hey there, I need some help. Can someone please guide me on how to obtain the 'topics' array and append it to res.view()? I've tried multiple approaches but keep getting 'undefined' in the 'topics' array. Subjects.qu ...

javascriptmysqlnode.jssails.js

Unable to display material-ui icon when using a conditional ternary statement in React

I'm facing an issue where my app crashes when attempting to display a mui icon based on a certain condition. I suspect the problem lies in how I am using PriceCheckIcon within {}. Can someone provide assistance? <span style={ ...

javascriptreactjsmaterial-uiconditional-operator

Experiencing Strange Issues with Jquery Image Carousel... Assistance Needed!

I recently created a jquery slideshow using a tutorial I found at this link: While the slideshow is functioning correctly for the most part, there is a strange issue that occurs right at the beginning when displaying the first image. Initially, the first ...

javascriptjquerysliderslideshow

What is causing these divs to shift apart instead of staying next to each other when the browser window is resized?

I am facing an issue with two of my divs not staying next to each other when resizing the browser window. They align perfectly when the window is wide, but as soon as I resize it to a narrower resolution, the right div moves below the left one: http://jsfi ...

htmlcsscss-floatwidth

Having trouble applying CSS to multiple classes used in an AJAX call

I'm trying to utilize richfaces for some fast AJAX widgets, but I am encountering difficulties in setting CSS parameters for them. After inspecting the generated code, I found that the elements have the classes "rf-ds" and "rpds". Despite applying st ...

javacssajaxjsfrichfaces

Add an input element to a form fieldset by employing vue

In my form, I have a staged approach with 3 fieldsets that only appear when the "Next" button is clicked. Now, in the third fieldset, I need to add input elements based on keys extracted from an external json object. Data: data: () => ({ c ...

javascriptvue.js

Angular is throwing an error because it cannot find the definition for

Embarking on a tutorial journey to dive into Angular setup. Facing a persistent error in my code... Error: [$injector:undef] http://errors.angularjs.org/1.6.0/$injector/undef?p0=Bear Listing the order of files within the <head> tag in the html ...

javascriptangularjsmean-stack

How do I position an input box at the bottom of a split window using CSS?

I am grappling with maintaining the alignment of an input box underneath a chat window while using the float:left property. As there will be multiple chat windows and I want them to remain next to each other, I am uncertain about how to achieve this. Chec ...

css

The center alignment doesn't seem to function properly on mobile or tablet devices

I've designed a basic webpage layout, but I'm facing an issue with responsiveness on mobile and tablet devices. The problem seems to be related to the width: 100% property in my CSS, but I can't seem to pinpoint the exact solution. While tr ...

htmlcssmobilewidthcentering

The error message "mapboxgl is not defined" indicates that the mapboxgl variable

I have been encountering the following error message in the console, and despite spending hours trying to troubleshoot it, I have been unsuccessful in resolving the issue. Could someone assist me in fixing this problem? error image I am having difficulty ...

javascriptnode.jsexpresspugmapbox-gl

Having trouble with jQuery's 'OR' not functioning properly when iterating through mandatory input elements

In the process of creating a fallback for required HTML5 attributes for different input types, I encountered an issue with checking the ':checked' status of radio buttons and using the 'OR' || operator within the loop: if (self.val() = ...

javascriptjqueryinput

Sending an array encoded in JSON to jQuery

I'm attempting to send an array that I've created in PHP using json_encode(). The process involves running an AJAX request, as shown below: AJAX CALL: $.ajax({ type: "POST", url: "../includes/ajax.php?imagemeta=1", data: ...

javascriptphpjqueryajaxjson

Highlighting of tab CSS is not persistent when switching tabs or clicking elsewhere on the page

Using Bootstrap 4, a navigation tab is created. However, upon loading the page, the home tab is automatically loaded but not highlighted. Clicking on any tab will highlight it correctly, but once clicked anywhere else on the page, the highlight disappears. ...

htmlcssbootstrap-4tabs

Error message HMR Webpack was found to be invalid

When using Webpack, I keep encountering the following error message: Invalid HMR message, along with a lengthy JSON string. Unfortunately, I couldn't find any helpful resources to assist me in debugging this issue. Do you have any suggestions? I&apo ...

javascriptnode.jsnpmwebpackwebpack-hmr

What is the best way to trigger a jQuery function after adding a <div> element through Ajax loading?

When I use Ajax to append a <div>, the dynamic inclusion of jQuery functions and CSS for that particular <div> does not seem to work. The insertion is successful, but the associated jQuery functions and CSS do not load properly. How can this be ...

htmlcssjquery