JavaScript - multiple argument function, which is a string for multiple image gallery

Question

I have function like this which enables gallery by his ID:

    document.getElementById('galleryID').onclick = function (event) {
         event = event || window.event;
         var target = event.target || event.srcElement,
             link = target.src ? target.parentNode : target,
             options = {index: link, event: event},
             links = this.getElementsByTagName('a');
         bg.Gallery(links, options);
     };

But the problem is when I have multiple gallerys in one document:

id="gallery01", id="gallery02", id="gallery03" ... up to id="gallery11".

Now I multiplayed code of gallery script 11 times with different ID:

document.getElementById('gallery01').onclick = function (event) { ... document.getElementById('gallery02').onclick = function (event) { ... document.getElementById('gallery03').onclick = function (event) { ...

up to ...

document.getElementById('gallery11').onclick = function (event) { ...

I wish to have one JS function not 11. How can I do this ?

I would like to use regular expressions but my combinations didn't work. I think it would be very nice solution if it could be done like this - using regullar exp in place where is 'galleryID'.

Kirankumar Dafda · Answer 1 · 2016-04-27T13:52:18.610

0

Try to add event with the function call like this

<div class="gallery" id="gallery1" onclick="getGalleryDetailFor(event)">
<div class="gallery" id="gallery2" onclick="getGalleryDetailFor(event)">

Edited

<script>
function getGalleryDetailFor(event)
{
  event = event || window.event;
  var target = event.target || event.srcElement,
  link = target.src ? target.parentNode : target,
  options = {index: link, event: event},
  links = this.getElementsByTagName('a');
  bg.Gallery(links, options);
}
</script>

New Updated

<div class="gallery" id="gallery1" onclick="getGalleryDetailFor('gallery1')">Gallery 1</div>
<div class="gallery" id="gallery2" onclick="getGalleryDetailFor('gallery2')">Gallery 2</div>

JavaScript

function getGalleryDetailFor(ids)
{
   document.getElementById(ids).addEventListener('click',function (event)
   {
      event = event || window.event;
      var target = event.target || event.srcElement,
      link = target.src ? target.parentNode : target,
      options = {index: link, event: event},
      links = this.getElementsByTagName('a');
      bg.Gallery(links, options);  
  }); 
}

edited Apr 27 '16 at 13:52

answered Apr 27 '16 at 10:45

Kirankumar Dafda

2,354
5
29
56

I done sth. like this and it didn't work. `function getGalleryID(ids) { document.getElementById(ids).onclick = function (event) {... }; }` – DDos Schwagins Apr 27 '16 at 10:57
No, after this you only have to write the code inside the function which you have here in - > `{... };` and without curly braces – Kirankumar Dafda Apr 27 '16 at 11:03
It still don't work. I will add whole function in my question above. – DDos Schwagins Apr 27 '16 at 11:11
I'm affraid that solution doesn't work. I made changes which You suggested but when I click on image I can only see new document view with clean image like JS didn't start. – DDos Schwagins Apr 27 '16 at 11:35
Have you changed onclick function with event like `getGalleryDetailFor(event)` on click of image ? – Kirankumar Dafda Apr 27 '16 at 11:57
Please have a look this question http://stackoverflow.com/questions/7846268/javascript-click-event-handler-how-do-i-get-the-reference-to-the-clicked-item and its answer – Kirankumar Dafda Apr 27 '16 at 12:01
Your sollution is the closest to my needs but when I apply it id doesn't work. I even used Your var names, etc. and still goes without any effect. I see sth. like this: `links = this.getElementsByTagName('a');` which is the main argument of the function in original: `document.getElementById('links').onclick = function (event) { ...` but when i change it for example using name `linksNN` it still works. – DDos Schwagins Apr 27 '16 at 12:32
Try to get all alerts with the attributes of an elements like `alert(event.target); alert(event.target.src); alert(event.target.parentNode); alert(event.srcElement);` with your function then mine and try find out where it is differentiate the output. – Kirankumar Dafda Apr 27 '16 at 13:17
No there is no single error in console exept one but it is connected with GoogleMaps. – DDos Schwagins Apr 27 '16 at 13:33
The alerts are the same first is `[object HTMLImageElement]` and then 2 URLs to my image (probably thumb and origin image) and then the same like first one `[object HTMLImageElement]` but when I use my code there is showing image in slider and when Yours there is image without JS "fireworks". – DDos Schwagins Apr 27 '16 at 13:39
So we should have to use ids of gallery anyhow, i'll let you know if I found any other solution – Kirankumar Dafda Apr 27 '16 at 13:43
The trick is how to pass gallery ID to the function in script `document.getElementById('galleryID')` when user click on gallery image and call her code :/ – DDos Schwagins Apr 27 '16 at 13:55
Please look update code, I think it completes your requirement – Kirankumar Dafda Apr 27 '16 at 13:55
You have to match both the functions mine and yours and check that what is the different between both that output. – Kirankumar Dafda Apr 28 '16 at 11:16
Alerts are the same for both methods - Yours and mine. – DDos Schwagins Apr 28 '16 at 12:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/110593/discussion-between-kirankumar-and-user3799089). – Kirankumar Dafda Apr 29 '16 at 05:25

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

I have two thinks: First you can add class and use like

    getElementsByClassName('gallery').forEach(function(galery){
        gallery.function (event) { ...
    })

Or make array with all id with you want use and use forEach like

    ['id1','id2','id3'....].forEach(idName=>{
            document.getElementById(idName).onclick = function (event)         { ...
    })

edit:

mayby you should check somthing like: Find all elements based on ids using regex on jQuery selector

edited May 23 '17 at 12:32

Community

1
1

answered Apr 27 '16 at 10:54

Dominik Kajzar

124
1
11

It wouldn't "fire" 11 gallerys at the same time ? galleryID should be catchet from click when user choose someone. – DDos Schwagins Apr 27 '16 at 11:04
No it won't be fire all galery at the same time. More details how works event in js you can find here: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick in event body be carefully with use "this" property. – Dominik Kajzar Apr 27 '16 at 11:09

score 0 · Answer 3 · answered Apr 27 '16 at 11:08

0

You can define a general type, for example "ui-gallery" and add class to each of the elements you want to bind this event to:

<div id="gallery1" class="ui-gallery"></div>

<script>
// with multiple handlers for different gallery elements
var handlersPool = {
    "default" => function(event) { ... },
    "gallery1" => function(event) { ... },
    "gallery2" => function(event) { ... },
    ...
}
var uiGalleries = document.getElementsByClassName("ui-gallery");
for (i = 0; i < uiGalleries.length; i++) {
    var el = uiGalleries[i];
    el.onclick = handlersPool[el.id] || handlersPool.default;
}
</script>

answered Apr 27 '16 at 11:08

Andrej Burcev

355
2
7

But this solution multiply JS functions code which I'm trying to avoid. – DDos Schwagins Apr 27 '16 at 11:39
If you use the same function for all of the galleries, then remove all functions except the "default" from handlersPool – Andrej Burcev Apr 27 '16 at 11:57

JavaScript - multiple argument function, which is a string for multiple image gallery

3 Answers3

Edited

New Updated