2

I'm using this javascript to create a 'zaccordion' on my Drupal 8 site. However, it's not working. My 'slideshow' just appears as a bulleted list of images.

Here's what I've got so far:

A block on my page with the following content:

<ul id="slideshow">
<li>image</li>
<li>image</li>
</ul>

I've also got the required javascript files from the download link (above) in themename/js. I've also got my own instantiation of the zaccordion in another js file in that same folder and it targets #slideshow like so:

(function ($) {
  $(document).ready(function() {
    $("#slideshow").zAccordion({
      settings here
    });
  });
})(jQuery);

Then, in my libraries.yml file I have this:

zaccordion:
  header: true
  version: 1.x
  js:
    js/jquery.zaccordion.min.js: { }
    js/jquery.zaccordion.js: { }
    js/zaccordionUsage.js: { }
  dependencies:
    - core/jquery

I put that in the 'header' because it wasn't working in the footer. I can confirm the files are being pulled into the page because I see links to the scripts in the <head> of the html.

Finally, I have the javascript library being placed into the page with this call near the top of page--front.html.twig:

{{ attach_library('themename/zaccordion') }}

Are all these settings correct?

I have this same slideshow functionality working easily on a Jekyll site I created so I assume it's something to do with the way my block is trying to reference the javascript files or something.

Note: yes, I have JavaScript aggregation unchecked (Performance > Aggregate Javascript)

  • You only need to load js/jquery.zaccordion.min.js: { } the minified version. There is no need to load the unminified version js/jquery.zaccordion.js: { } you're basically loading the same script twice. The unminited version is for development use, since it's easy to read. The minified version is for production use, as it removes all the white spaces and compacts the code making the file size smaller. – No Sssweat Sep 1 '16 at 22:14
  • I see. Well that gives me cleaner code at least. Thanks for the tip! – Sage Sep 1 '16 at 23:11
2

The dumbest of all possible mistakes was the answer. I had a <div> wrapping my insertion of the page block, like so:

{% if page.slideshow %}
{{ attach_library('themename/zaccordion') }}
    <div class="col-xs-12" id="slideshow">
        {{ page.slideshow }}
    </div>
{% endif %}

I thought if I put the attach_library line there it would load it 'closer' to the actual code needing it (don't try to understand what I was thinking). At any rate, I noticed that I have an id="slideshow" here as well. So I had TWO id="slideshow" - one on this <div> and another on the <ul> in the block...that was causing the slideshow not to work. So I just changed the id of this <div> to something else and it worked.

  • Mistakes are not always a bad thing, as you can learn from them :) – No Sssweat Sep 2 '16 at 0:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.