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)

Improve this question
2
  • 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, 2016 at 22:14
  • I see. Well that gives me cleaner code at least. Thanks for the tip!
    – Sage
    Sep 1, 2016 at 23:11

1 Answer 1

Reset to default
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.

Improve this answer
1
  • Mistakes are not always a bad thing, as you can learn from them :)
    – No Sssweat
    Sep 2, 2016 at 0:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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