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'.

Andrej Burcev · Accepted Answer · 2016-04-27 11:08:02Z

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, 2016 at 11:08

Andrej Burcev

3632 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DDos Schwagins Over a year ago

But this solution multiply JS functions code which I'm trying to avoid.

Andrej Burcev Over a year ago

If you use the same function for all of the galleries, then remove all functions except the "default" from handlersPool

Community · Accepted Answer · 2017-05-23 12:32:56Z

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, 2017 at 12:32

CommunityBot

11 silver badge

answered Apr 27, 2016 at 10:54

Dominik Kajzar

1241 silver badge11 bronze badges

2 Comments

DDos Schwagins Over a year ago

It wouldn't "fire" 11 gallerys at the same time ? galleryID should be catchet from click when user choose someone.

Dominik Kajzar Over a year ago

No it won't be fire all galery at the same time. More details how works event in js you can find here: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/… in event body be carefully with use "this" property.

Kirankumar Dafda · Accepted Answer · 2016-04-27 13:52:18Z

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, 2016 at 13:52

answered Apr 27, 2016 at 10:45

Kirankumar Dafda

2,3845 gold badges32 silver badges59 bronze badges

16 Comments

DDos Schwagins Over a year ago

I done sth. like this and it didn't work.

function getGalleryID(ids)             {                document.getElementById(ids).onclick = function (event) {...          };             }

Kirankumar Dafda Over a year ago

No, after this you only have to write the code inside the function which you have here in - > {... }; and without curly braces

DDos Schwagins Over a year ago

It still don't work. I will add whole function in my question above.

DDos Schwagins Over a year ago

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.

Kirankumar Dafda Over a year ago

Have you changed onclick function with event like getGalleryDetailFor(event) on click of image ?

|

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

2 Comments

Edited

New Updated

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Edited

New Updated

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related