SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Mootools Carousel Problem!

    Hi there

    The carousel I'm using on my site is skipping an image when I click on the 'next' arrow ie. #1 > #3 > #5 > #7.... The 'prev' arrow just isn't working fullstop.

    I'm a total novice at Javascript, so I'm at a total loss as to how I can fix this.

    Here's my site:
    http://stuseddon.co.uk/

    Here's my javascript:
    Code JavaScript:
    window.addEvent('domready', function() {
      $$('.images').each(function(div) {
        var images = div.getElements('img');
     
        if(images.length > 1) {
          images.each(function(img, i) {
            img.set('morph', {duration: 500, link: 'cancel'});
     
            if(i > 0) {
              img.setStyle('opacity', 0);
            }
          });
     
          var e = images.length * 1000;
     
          var prev = new Element('a', {'class': 'prev'}).inject(div);
          var next = new Element('a', {'class': 'next'}).inject(div);
     
          var arrows = $$(prev, next);
          arrows.setStyle('opacity', 0).set('morph', {duration: 100, link: 'cancel'});
     
          div.addEvents({
            mouseenter: function() {
              arrows.morph({opacity: 0.33});
            },
            mouseleave: function() {
              arrows.morph({opacity: 0});
            }
          });
     
          arrows.addEvents({
            mouseenter: function() {
              this.morph({opacity: 1});
            },
            mouseleave: function() {
              this.morph({opacity: 0.33});
            }
          });
     
          prev.addEvent('click', function() {
            e--;
     
            images.morph({opacity: 0});
            images[e % images.length].morph({opacity: 1});
          });
     
          next.addEvent('click', function() {
            e++;
     
            images.morph({opacity: 0});
            images[e % images.length].morph({opacity: 1});
          });
     
          div.addEvent('click', function(e) {
            if($(e.target).get('tag') != 'a') {
              next.fireEvent('click');
            }
          });
     
          div.addEvent('selectstart', function(e) {
            e.stop();
          });
        }
        else {
          div.setStyle('cursor', 'default');
        }
      });
    });

    Please help! Thanks in advance.

  2. #2
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All resolved now.
    The JQuery was clashing with Mootools!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •