Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
why dont you use the views slideshow module instead. –  Mohammed Shameem Jan 17 '13 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 '13 at 11:02
    
have you tried putting it in the window load function? –  Mohammed Shameem Jan 17 '13 at 11:04
    
$(window).bind('load', function() { instead of $('body').once('initFrontPageSlider', function() { –  Mohammed Shameem Jan 17 '13 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 '13 at 11:59
show 12 more comments

2 Answers 2

up vote 3 down vote accepted

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.

share|improve this answer
1  
$('.homepage-slider ul') worked perfect!! Thanks a lot! –  Michiel Jan 17 '13 at 12:09
add comment

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

share|improve this answer
    
For the record, I didn't vote this one down. Do you have a JSFiddle to make your point? –  Michiel Jan 17 '13 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 '13 at 11:54
    
sorry for that @Clive I guess I overlooked that point –  Mohammed Shameem Jan 17 '13 at 12:00
    
yes @Clive is right you just need the $('.homepage-slider ul').cycle({ and not the data data-cycle-slides="li" –  Mohammed Shameem Jan 17 '13 at 12:02
    
I didn't even know there was a cycle2 actually, thanks for pointing it out :) –  Clive Jan 17 '13 at 12:05
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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