Bug Software

... jQuery plugins ... flash 3D carousel ...

Flash 3D Carousel

At Bug Software we like jQuery and we like Flash! So we thought we could combine them to to create some really cool stuff.

Everyone likes a nice picture gallery but Javascript only provides limited animation capabilities. Bug Software thought why don't we have a play with Flash 10's new 3D features and bundle it into a jQuery plugin with all its advantages.

Simple clean code

No need to include any messy inline Flash/JavaScript.

              <html>
<head>
<script src="/js/jquery-1.4.1-min.js" type="text/javascript"></script>
<script src="/js/swfobject.js" type="text/javascript"></script>
<script src="/js/jquery.tooltip.pack.js" type="text/javascript"></script>
<script src="/js/jquery.uniqueId.js" type="text/javascript"></script>
<script src="/js/jquery.carousel3D.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery("div.flashCarousel3D").carousel3D();
});
</script> 
</head>

<body>
<div class="flashCarousel3D"> 
  <ul> 
    <li><a href="/img/img1.gif"/>Image label 1</a></li> 
    <li><a href="/img/img2.png"/>Image label 2</a></li> 
    <li><a href="/img/img3.jpg"/>Image label 3</a></li> 
    <li><a href="/img/img4.gif"/>Image label 4</a></li> 
    <li><a href="/img/img5.jpg"/>Image label 5</a></li> 
    <li><a href="/img/img6.png"/>Image label 6</a></li> 
    <li><a href="/img/img7.gif"/>Image label 7</a></li> 
    <li><a href="/img/img8.jpg"/>Image label 8</a></li> 
  </ul> 
</div> 
</body>
</html>
	
            

jQuery plugin page

Download

jquery.carousel3D.js V0.9.6

Example 1 'Standard Setup'

Here is a very simple demonstration of 'Carousel 3D'.

  • Hey, we can do tooltips!
  • Hey, we can do tooltips!
  • Hey, we can do tooltips!
  • Hey, we can do tooltips!
  • Hey, we can do tooltips!
  • Hey, we can do tooltips!
  • Hey, we can do tooltips!
  • Hey, we can do tooltips!

Example 2 'Phases of the Moon'

If we fiddle a few options and change the images we can do this:

  • New Moon
  • Waxing Crescent
  • First Quarter
  • Waxing Gibbous
  • Full Moon
  • Waning Gibbous
  • Last Quarter
  • Waning Crescent

Example 3 'Flickr image search'

In this example we integrate the carousel with Flickrs image API.

Feedback (1 comments)

Please post any feedback, live examples, bugs, features and change requests here.

  1. Awesome - Chris Ontherocks

    2010-03-06 22:30:14

    It looks amazing, I'm gonna try it.

Top Trackbacks

  1. http://plugins.jquery.com/project/SuperCarousel3D4950 referals (first recorded: 2010-02-09 09:40:00)
  2. http://coliss.com/articles/build-websites/operation/javascript/jquery-plug...407 referals (first recorded: 2010-02-09 10:19:21)
  3. http://www.ajaxline.com/best-jquery-carousels-plugins71 referals (first recorded: 2010-07-14 20:40:19)
  4. http://e13.pl/blog/2010/03/03/webowe-karuzele-rozeznanie/48 referals (first recorded: 2010-03-05 12:05:25)
  5. http://www.google.com/url?sa=D&q=http://bugsoftware.co.uk/jQuery/Flash3DCa...9 referals (first recorded: 2010-04-14 18:43:26)
  6. http://www.google.co.id/search?hl=en&client=firefox-a&rls=org.mozilla:en-G...5 referals (first recorded: 2010-02-09 11:14:04)
  7. http://192.168.99.164/test_shiozaki/sample.html5 referals (first recorded: 2010-03-11 05:51:53)
  8. http://achiachi.blogspot.com/2010/02/jquery331.html5 referals (first recorded: 2010-04-02 10:06:24)
  9. http://www.google.de/url?sa=t&source=web&ct=res&cd=3&ved=0CBYQFjAC&url=htt...4 referals (first recorded: 2010-02-11 11:16:05)
  10. http://www.google.co.il/search?q=jQuery+Flash+3DCarousel&ie=utf-8&oe=utf-8...4 referals (first recorded: 2010-03-08 08:26:21)

© Bug Software Limited 2009 - 2010

...this site is based on Bug Software's PHP / XML / XSLT framework