0

I really like this simple jquery gallery viewer that works on Blogger, but it will only display the first gallery on a page. I would like to make it work with several galleries, and i can assign a separate Id to each. Similar multiple Id questions on Stackoverflow suggest using document.getElementsByClassName or document.querySelectorAll, but i am unsure which to use in this script. Any pointers would be much appreciated.

<script type='text/javascript'>
//<![CDATA[
var gal = {
  init: function() {
    if (!document.getElementById || !document.createElement || !document.appendChild) return false;
    if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
    var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
    li[0].className = 'active';
    for (i = 0; i < li.length; i++) {
      li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
      li[i].title = li[i].getElementsByTagName('img')[0].alt;
      gal.addEvent(li[i], 'click', function() {
        var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
        for (j = 0; j < im.length; j++) {
          im[j].className = '';
        }
        this.className = 'active';
        document.getElementById('gallery-caption').innerHTML = this.title;
      });
    }
  },
  addEvent: function(obj, type, fn) {
    if (obj.addEventListener) {
      obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {
      obj["e" + type + fn] = fn;
      obj[type + fn] = function() {
        obj["e" + type + fn](window.event);
      }
      obj.attachEvent("on" + type, obj[type + fn]);
    }
  }
}
gal.addEvent(window, 'load', function() {
  gal.init();
});
//]]>
</script>

HTML
<div style="position:relative;">
<ul id="image-gallery">
<li><img src="IMAGE-URL1" /></li>
<li><img src="IMAGE-URL2" /></li>
<li><img src="IMAGE-URL3" /></li>
<li><img src="IMAGE-URL4" /></li>
<li><img src="IMAGE-URL5" /></li>
</ul>
</div>
Emiel Zuurbier
  • 19,095
  • 3
  • 17
  • 32
Graham Chapman
  • 1
  • That `obj.attachEvent` code syntax is ancient.... I am not sure where you are learning event handlers from, but it is outdated. – epascarello Sep 01 '20 at 13:10
  • I would recommend not using `//<![CDATA[` unless you're writing XML. https://stackoverflow.com/questions/66837/when-is-a-cdata-section-necessary-within-a-script-tag – evolutionxbox Sep 01 '20 at 13:12
  • 1
    It's not done with just replacing getelementbyid with getelementsbyclassname. You also have to rewrite the logic for showing next and previous image and so on. – cloned Sep 01 '20 at 13:12
  • Well it's a jquery library. So just use jQuery! Your code is not really clear because it only shows one gallery. – Wimanicesir Sep 01 '20 at 13:12
  • 1
    Why are you confused of using either `getElementsByClassName` or `querySelectorAll`? `getElementsByClassName` only gets elements with a certain class. `querySelectorAll` can do that too and more. – Emiel Zuurbier Sep 01 '20 at 13:16
  • 1
    Since you're using a jQuery library use jQuery code. You can obviously use vanilla Javascript like `getElementsByClassName` which will return elements with a certain specified class, or you can use `querySelectorAll` which will return elements with a certain class **or** in general a selector. Which can include classes, ids, tag names, etc. – Redseb Sep 01 '20 at 13:26
  • First thing that comes to my mind : if it's a jQuery gallery, why not use jQuery? You know, `$(".someClass")`, `$("#someID")` ? – Jeremy Thille Sep 01 '20 at 13:29
  • It is indeed an old script designed for use on for Blogger. As a novice i was hoping to modify it to work with more than one gallery, and learn something in the process. – Graham Chapman Sep 02 '20 at 09:09

0 Answers0