0

I have build a view with a HTML-list were all my images are listed. Goal is to create a JQuery Cycle with those images, but for some reason, my custom Javascript isn't working...

Here is the HTML generated by Drupal:

<div class="homepage-slider">
  <ul>
    <li class="views-row views-row-1 views-row-odd -views-row-first>
      <div class="views-field views-field-field-front-slider-image">
        <div class="field-content">
          <img src="image.jpg" />
        </div>
      </div>
    </li>
    <li class="views-row views-row-2 views-row-even>
      <div class="views-field views-field-field-front-slider-image">
        <div class="field-content">
          <img src="image.jpg" />
        </div>
      </div>
    </li>
    <li class="views-row views-row-3 views-row-odd -views-row-last>
      <div class="views-field views-field-field-front-slider-image">
        <div class="field-content">
          <img src="image.jpg" />
        </div>
      </div>
    </li>
  </ul>
</div>

And here is my custom Javascript I wrote:

(function ($) {
    Drupal.behaviors.initFrontPageSlider = {
        attach: function(context, settings) {
            $('body').once('initFrontPageSlider', function() {
                $('.homepage-slider').cycle({
                    fx: 'fade' 
                });
            });
        }
    }
}(jQuery));

But for some reason, my image-list isn't picking up my javascript. What's missing on this?

17
  • why dont you use the views slideshow module instead. Jan 17, 2013 at 11:01
  • That doesn't fit my needs. I need my Cycle to be customized in a way the module doesn't provide...
    – Michiel
    Jan 17, 2013 at 11:02
  • have you tried putting it in the window load function? Jan 17, 2013 at 11:04
  • $(window).bind('load', function() { instead of $('body').once('initFrontPageSlider', function() { Jan 17, 2013 at 11:07
  • 1
    Maybe I'm being dumb, but aren't you suppose to call .cycle() on the <ul> element instead of the parent div? If you call it on div.homepage-slider then cycle will try to cycle the children (<ul>) and because there's only 1 child element it doesn't progress further.
    – Beebee
    Jan 17, 2013 at 11:59

2 Answers 2

3

If you want to cycle the <li>'s then you need to call .cycle() on the <ul> element. At the moment looks like you're trying to cycle the <ul> elements inside the <div class="homepage-slider">. If there's only 1 child element cycle doesn't progress further since there's nothing to cycle.

1
  • 1
    $('.homepage-slider ul') worked perfect!! Thanks a lot!
    – Michiel
    Jan 17, 2013 at 12:09
1

The jquery cycle needs to define the tag that the child is going to use this is set by defining data-cycle-slides="tag".

So in your example it should be data-cycle-slides="li"
This should be placed in the tag that wraps the li in this case it is ul so the ul should be <ul data-cycle-slides="li"> or you could place the slideshow class also within this like <ul class="homepage-slider" data-cycle-slides="li">

In the first case the it would be $('.homepage-slider ul').cycle({ and in the second case it should be $('.homepage-slider').cycle({

EDIT : This one is for cycle2 and might not be correct in the said question. I guess the as Clive mentioned $('.homepage-slider ul').cycle({` should be enough.

For reference

5
  • For the record, I didn't vote this one down. Do you have a JSFiddle to make your point?
    – Michiel
    Jan 17, 2013 at 11:52
  • 2
    jQuery Cycle has never needed an explicit definition of data-cycle-slides to work, $('.homepage-slider ul').cycle({ is sufficient. The reference you linked to is for Cycle2 (different script) which I'm sure the OP would have mentioned had he been using it
    – Clive
    Jan 17, 2013 at 11:54
  • sorry for that @Clive I guess I overlooked that point Jan 17, 2013 at 12:00
  • yes @Clive is right you just need the $('.homepage-slider ul').cycle({ and not the data data-cycle-slides="li" Jan 17, 2013 at 12:02
  • I didn't even know there was a cycle2 actually, thanks for pointing it out :)
    – Clive
    Jan 17, 2013 at 12:05

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.