Custom data attributes with multiple elements

Question

I'm trying to make a custom data attributes on my website in lightbox. I just made it for one element in Javascript and it works fine but I want to make it works in multiple elements.

How it works now: I have "a" element with id="image-1" and I want to make that javascript will recognise id image-2,3,4... and show correct data from custom attributes. Note that I can't use onclick because it makes that lightbox stops work.

Here is HTML:

<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    <div  class="thumbnail grid-wrapper thumbnail-single">
        <a id="image-1" href="img/photo2.jpeg" data-tags="<li>t31232est</li> <li>test</li>" data-fb="http://test1.pl" data-tt="http://test2.pl" data-gplus="http://te23432st3.pl"  data-lightbox="roadtrip" data-title="This is a caption. This is a caption This is a caption This is a caption"><img src="img/photo2.jpeg" class="img-responsive" alt="..."></a>
    </div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    <div  class="thumbnail grid-wrapper thumbnail-single">
        <a id="image-2" href="img/photo3.jpg" data-tags="<li>test</li> <li>test</li>" data-fb="http://test55.pl" data-tt="http://test253342.pl" data-gplus="http://tes32423t3.pl"  data-lightbox="roadtrip" data-title="This is a caption. This is a caption This is a caption This is a caption"><img src="img/photo3.jpg" class="img-responsive" alt="..."></a>
    </div>
</div>

Here is JS:

var global = document.getElementById('image-1');
var tagList = global.getAttribute('data-tags');
var facebook = global.getAttribute('data-fb');
var twitter = global.getAttribute('data-tt');
var gplus = global.getAttribute('data-gplus');

$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><ul class="tag-list">' + tagList +'</ul><br/><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer">' +
        '<ul class="social-list"><li><a href="' + facebook + '"><img src="img/fb_circle_white.png" class="img-responsive"></a></li><li><a href="' + twitter + '"><img src="img/tt_circle_white.png" class="img-responsive"></a></li><li><a href="' + gplus + '"><img src="img/gplus_circle_white.png" class="img-responsive"></a></li></ul><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));

I'm trying to make it works on Lightbox Plugin (http://lokeshdhakar.com/projects/lightbox2/)

UPDATE

I just used function in onclick and when I'm testing it, it shows correct IDs. But still can't put it into getElementByID as a string.

id="image-1" onclick="GetID(this.id)"

window.GetID = function(elem_id){
    alert(elem_id);
  }

  var global = document.getElementById(GetID());
  var tagList = global.getAttribute('data-tags');
  var facebook = global.getAttribute('data-fb');
  var twitter = global.getAttribute('data-tt');
  var gplus = global.getAttribute('data-gplus');

UPDATE 2:

Almost done. I've made my variables global. Console log shows correct ID and other data attribs. Problem is when I'm trying to put result into html in javascript. Here is example.

<ul class="social-list"><li><a href="' + facebook + '"><img src="img/fb_circle_white.png" class="img-responsive"></a></li>

+ current JS:

id="image-1" onclick="window.GetID(this.id)"

  var global;
  var tagList;
  var facebook;
  var twitter;
  var gplus;

  window.GetID = function(elem_id){
    console.log(elem_id);
    global = document.getElementById(elem_id);
    console.log(global);
    tagList = global.getAttribute('data-tags');
    console.log(tagList);
    facebook = global.getAttribute('data-fb');
    console.log(facebook);
    twitter = global.getAttribute('data-tt');
    console.log(twitter);
    gplus = global.getAttribute('data-gplus');
    console.log(gplus);
  }

+ image of console response.

Reverence

I don't see your code not recognizing the second anchor element. What is the intended functionality? – Exiguous

I don't know how to make it without using click(). Maybe there is a chance to get id by using OnClick() in HTML and push it into variable and us it as ElementId? – Reverence

Well push is a function of Array.prototype so I'd say there is no way to push it into a variable per se, but exactly what you just described is possible, within the "onclick" function use the this keyword and it refers to the element on which the event is called. – Exiguous

and how I can use it in javascript file and assign it into getElementById(). ? – Reverence

You need to spend some time learning how to conceptualize Javascript before you continue to try to develop in it.. If you don't know how to utilize the information I've given you it implies a deeper lack of understanding that needs to be dealt with if you're going to do any developing without someone holding your hand – Exiguous

"How can I use it" - it what? The this keyword? Type this. "how can I use it in javascript file" - which Javascript file? The one you're presumably writing all of this code in? Is that really presumable? Type the code into the .js file you have open in your text editor. "and assign it into" - the closest thing to 'assigning' something 'into' something else would be the = operator. As far as assigning a property 'into' a function, though it's conceptually possible for a function to have local variables, that is almost certainly not what you need. – Exiguous

You didn't understand me. I've managed that alert in function shows correct ids. But still can't put the result of onclick function into getElementById. Code added above in main post – Reverence

try adding window.GetID(this.id) instead of GetID(this.id) - as it stands you're calling element.GetID(element.id) which isn't a function. – Exiguous

Almost done. Console shows correct ID and attribs. But still when I'm trying to put it into HTML it returns undefined. Added update in main post. Thanks for your time and help in understanding that! – Reverence

What is returning undefined? I don't see it on the console – Exiguous

In Update 2 I've pasted the line where I added "facebook" variable into HTML. HTML is generate in JavaScript file. And It returns undefined. I added another screen. – Reverence

Try adding a function call in the href = line that returns the value of the facebook variable, maybe that would work? – Exiguous

You might also look up jquery data. It might be a better fit that trying to set a bunch of attributes on an element. – Phosphine

There is problem with global variables. Still didn't make it works outside function. – Reverence

Answer 1

A good solution would be to get the id attribute of 'a' element when clicking it put it in a var and use it to get data attributes.

Assuming 'a' elements are inside a div '#container' here is my solution

$('#container a').click(function(){
    var image_id    =   '#' + $(this).attr('id');
    var tagList     =   $(image_id).data('tags');
    var facebook    =   $(image_id).data('fb');
    var twitter     =   $(image_id).data('tt');
    var gplus       =   $(image_id).data('gplus');
});

Olwena

Answer 2

not sure if I am understanding correctly. But if the id of the divs are consistent, meaning image-1, image-2, image-3,... and so on, you could use and expression selector and loop through the number of elements in that array to add/append your dynamic html inside those divs without using a click event to get the id. Ex -

var array_of_divs = $("div[id^=image-]") // this gives you an array of all the element having the id starting with 'image-'

further you can loop though the length of this array and add your dynamic html based on the id of the parent : ("image-"+counter_variable])

let me know if this helps.

Claribelclarice