jQuery Carousel & 2D Transform Part 1

I get asked this question a lot from flash/javascript people. How do you make an image carousel? The question is flawed because there are many different types of image carousels, so I always ask for them to show me a link to the kind of carousel they’d like to create. I thought it would be interesting to show a hard-coded example of the inner workings behind the motion of one type of carousel…

This grabs images from flirckr with the search term “joseph muller brockman” :

This is the beginning of a common type of carousel. It makes use of polar coordinates for the circular motion… more important than that is that it makes use of the excellent 2D transform plugin for jQuery, which uses CSS3 tranformations or Matrix Filters in ie6+.

You can see all the code by right clicking the above demo and choosing view frame source, or you can continue reading:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
$(function() {
  var searchTerms = "joseph muller brockman";
  var sourceURL = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  var win = $(window);
  var images = [];
  var imageNum = 8;
  var radius = 200;
 
  var loc = {x: win.width() / 2, y: win.height() / 2};
 
  var TWO_PI = Math.PI * 2;
  var step = TWO_PI / imageNum;
  var vRadius = radius / 2;
  var scale = radius * 1.7;
 
  var body = $("body");
  var loop;
  var world = 0;
  var mouseX = 0,
      mouseY = 0;
 
  $(document).mousemove(function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
  });
 
  function radians(num) {
    return num * Math.PI / 180;
  }
 
  function imagesLoaded() {
    position();
    $(".thumb").css("position", "absolute").fadeIn();
    loop = setInterval(position, 30);
  }
 
  function position() {
    var xp, yp, offset, img;
    world += (radians(mouseX) - world) / 12;
    for (var i = 0; i < imageNum; i++) {
      offset = step * i;
      var theta = offset + world;
      xp = loc.x + radius * Math.cos(theta);
      yp = loc.y + vRadius * Math.sin(theta);
      var s = (yp - loc.y + radius) / scale;
      img = images[i];
      img.css({
        left: xp - img.data("halfWidth"),
        top: yp - img.data("halfHeight"),
        zIndex: parseInt(yp)
      })
      .transform({scaleX: s, scaleY: s});
    }
  }
 
  // variation on example from jQuery Docs
  $.getJSON(sourceURL, {tags: searchTerms, format: "json"}, function(data) {
    $.each(data.items, function(i, item) {
      if (i == imageNum) return false;
      var img = $("<img class='thumb'/>")
      .hide()
      .attr("src", item.media.m).appendTo(body)
      .load(function() {
        img.data("halfWidth", img.width() / 2).
        data("halfHeight", img.height() / 2);
        images.push(img);
        if (images.length == imageNum) imagesLoaded();
      });
    });
  });
});


 
 
 

6 Responses to “jQuery Carousel & 2D Transform Part 1”

  1. Phil Jones
    29. January 2011 um 08:31

    Unfortunately it doesn’t seem to work in Internet Explorer 7 on Windows XP.

  2. Zevan
    29. January 2011 um 10:29

    I’ll look into that. I’ve tested this 2D Transform Library in all the version of IE before, so its probably not working in IE for other reasons. Will boot up VirtualBox and take a look.

  3. Phil Jones
    30. January 2011 um 04:16

    Sorry, I should have said Internet Explorer 8, haven’t tested in 7.

  4. Zevan
    30. January 2011 um 06:02

    It didn’t really work in internet explorer at all 6 to 9. I had a minor javascript error and I found a weird bug in the 2D Transform plugin. I have it working about 95% correctly and will cover my solutions in an upcoming post. Thanks for letting me know that it didn’t work. I appreciate it.

  5. Luke Stanley
    7. October 2011 um 20:23

    I got this working pretty fast with iOS, on the iPad with hardware accelerated CSS transforms. There is one hitch though, in that the method for calculating the positions is slightly off, appearing unduly biased to the top left:
    full demo: http://fiddle.jshell.net/UBCqg/1/show/light/
    http://jsfiddle.net/UBCqg/1/
    Any thoughts? Thanks!

  6. Luke Stanley
    11. October 2011 um 20:46

    I think I posted a comment here with a link to a touch enabled version with CSS transform based positioning, but I don’t see it. Is it in moderation because it has links?

Leave a Reply

Spam protection by WP Captcha-Free