Ahmed Nuaman

builder of internets ~ developer of dreams ~ tamer of Dachshunds

Posts Tagged “carousel”

• A Simple WordPress Carousel Plugin

  Monday, May 9th, 2011

  I recently wrote a custom plugin for WordPress that created a carousel. I then decided to open source it, so, here it is: https://github.com/ahmednuaman/ahmeds-wordpress-carousel

  Simply download it, stick it into your wp-content/plugins folder and off you go!

  Tags: carousel ~ jquery ~ PHP ~ plugin ~ wordpress
  Posted in Development ~ JavaScript ~ PHP

  ---

• Quite Possibly the Easiest (and Smallest?) jQuery Carousel

  Monday, February 7th, 2011

  Here’s a quickie: a nice and small jQuery carousel…

  Take some list items:

  <div id="carousel">
  <ul>
      <li>Hello!</li>
      <li>Why hello again?</li>
      <li>We need to stop meeting like this...</li>
  </ul>
  </div>

  And apply some CSS:

  ul,
  li
  {
      margin: 0;
      padding: 0;
  }
  #carousel
  {
      display: block;
      position: relative;
      width: 400px;
      height: 250px;
      overflow: hidden;
  }
  #carousel ul
  {
      display: block;
      width: 5000px;
      height: 250px;
  }
  #carousel li
  {
      display: block;
      float: left;
      width: 400px;
      height: 250px;
      background: #0080FF;
      color: #FFFFFF;
      font-size: 12pt;
  }

  And finally sprinkle with some JS:

  $( document ).ready( function()
  {
      var t   = $( '#carousel' );
      var m   = $( 'li', t ).length;
      var w   = $( 'li:first', t ).outerWidth();
      var i   = 0;
  
      setInterval( function()
      {
          if ( i >= m )
          {
              i   = 0;
          }
  
          $( 'ul', t ).animate({
              'margin-left'   : i * w * -1 + 'px'
          }, 1000, 'easeInOutQuint' );
  
          i++;
      }, 3000 );
  });

  And voila:

  Tags: carousel ~ CSS ~ JavaScript ~ jquery ~ simple ~ small
  Posted in CSS ~ Development ~ HTML ~ JavaScript

  ---

• Introducing 1Click2Fame.com

  Tuesday, August 4th, 2009

  Here it is, this is what I’ve been working on for the past two months! It’s the new web site for 1Click2Fame.com where, and I quote, “finding fame is the name of the game”.

  It’s owned by the company Enrich Productions and I was bought in to build them a Flash video player and also little bits of Flashy stuff here and there including the home page carousel and the competition count-down timer. More stuff to follow!

  The player uses the “ChromelessViewPlayer()” class I’ve got up on my Github so there’s nothing stopping you from writing your own!

  It’s quite a neat player, even if I say so myself. Not only does it play video, but you can vote through it (and when it comes to rounds you need to be authenticated to vote, so it handles that too, in situ), share and embed the video and also load further videos from the end-frame in situ.

  Here’s a little preview:

  So check out 1Click2Fame.com and tell me what you think!

  Tags: 1click2fame ~ Actionscript 3 ~ as3 ~ carousel ~ Flash ~ flv ~ player ~ video ~ videoplayer
  Posted in Actionscript 3 ~ APIs ~ CSS ~ Design ~ Development ~ Flash ~ JavaScript

  ---

• Why I like the AS3DS Library

  Tuesday, June 23rd, 2009

  This is a quick article about why I like the AS3 Data Structures For Game Developers. I first came across this library when I was looking at effective ways of making carousels, for example, the current carousel on my portfolio uses the library. I’m probably not using it to its full potential, but it’s very good for what I am using it for.

  Imagine the situation: you want to create a carousel (much like the carousel on my portfolio) where by you are loading in images, moving them from the right to the left and then allowing the user to flick through them too.

  The way most people do this is by using arrays to store the references to the display items and cycling through them, like so:

  package
  {
      import flash.display.Graphics;
      import flash.display.Sprite;
      import flash.utils.setTimeout;
     
      import gs.TweenLite;
      import gs.easing.Strong;
  
      [SWF( width="580", height="400", frameRate="30", backgroundColor="#FFFFFF" )]
     
      public class App extends Sprite
      {
          private var boxes:Array                                 = [ ];
          private var current:Number                              = 0;
          private var stageHeight:Number                          = 400;
          private var stageWidth:Number                           = 580;
         
          public function App()
          {
              for ( var i:Number = 0; i < 20; i++ )
              {
                  drawBox();
              }
             
              start();
          }
         
          private function drawBox():void
          {
              var box:Sprite = new Sprite();
              var graphics:Graphics = box.graphics;
              var colour:uint = Math.random() * 0xFFFFFF;
             
              graphics.beginFill( colour );
              graphics.drawRoundRect( 0, 0, stageWidth, stageHeight, 3, 3 );
              graphics.endFill();
             
              boxes.push( box );
             
              addChild( box );
          }
         
          private function start():void
          {
              var target:Sprite;
             
              for ( var i:Number = 0; i < boxes.length; i++ )
              {
                  target = boxes[ i ];
                 
                  if ( i < current )
                  {
                      TweenLite.to( target, 1, { x: -stageWidth, ease: Strong.easeOut } );
                  }
                  else if ( i == current )
                  {
                      setChildIndex( target, numChildren - 1 );
                     
                      TweenLite.to( target, 1, { x: 0, ease: Strong.easeOut } );
                  }
                  else
                  {
                      target.x = stageWidth;
                  }
              }
             
              if ( current >= boxes.length - 1 )
              {
                  current = 0;
              }
              else
              {
                  current++;
              }
             
              setTimeout( start, 2000 );
          }
      }
  }

  Here’s what the code does:

  And that works pretty nicely, whereby I’m cycling through the array and then showing one and hiding the others. Looks fairly standard, but with the as3ds library, it can be simplified to this:

  package
  {
      import de.polygonal.ds.DLinkedList;
      import de.polygonal.ds.DListNode;
     
      import flash.display.Graphics;
      import flash.display.Sprite;
      import flash.utils.setTimeout;
     
      import gs.TweenLite;
      import gs.easing.Strong;
  
      [SWF( width="580", height="400", frameRate="30", backgroundColor="#FFFFFF" )]
     
      public class App2 extends Sprite
      {
          private var boxes:DLinkedList                           = new DLinkedList();
          private var stageHeight:Number                          = 400;
          private var stageWidth:Number                           = 580;
         
          private var current:DListNode;
         
          public function App2()
          {
              for ( var i:Number = 0; i < 20; i++ )
              {
                  drawBox();
              }
             
              current = boxes.head;
             
              start();
          }
         
          private function drawBox():void
          {
              var box:Sprite = new Sprite();
              var graphics:Graphics = box.graphics;
              var colour:uint = Math.random() * 0xFFFFFF;
             
              graphics.beginFill( colour );
              graphics.drawRoundRect( 0, 0, stageWidth, stageHeight, 3, 3 );
              graphics.endFill();
             
              boxes.append( box );
             
              addChild( box );
          }
         
          private function start():void
          {
              var nodePrev:DListNode = current.prev;
              var nodeNext:DListNode = current.next;
              var target:Sprite = current.data as Sprite;
             
              setChildIndex( target, numChildren - 1 );
             
              TweenLite.to( target, 1, { x: 0, ease: Strong.easeOut } );     
   
              while ( nodePrev )
              {
                  TweenLite.to( nodePrev.data as Sprite, 1, { x: -stageWidth, ease: Strong.easeOut } );
                 
                  nodePrev = nodePrev.prev;
              }
   
              while ( nodeNext )
              {
                  ( nodeNext.data as Sprite ).x = stageWidth;
                 
                  nodeNext = nodeNext.next;
              }
             
              current = ( current.next ? current.next : boxes.head );
             
              setTimeout( start, 2000 );
          }
      }
  }

  You can see I’ve replaced the array with the “DLinkedList()” class. This, kind of like dictionaries, allows you to put anything in there, but the class comes with the great get functions such as “DLinkedList.prev” and “DLinkedList.next” that allow you to get the previous and next entries, much easier than incrementing. And here’s what you get, it’s pretty identical, but I think that using the AS3DS class makes handling visual elements, well any elements, where looping functionality is needed or the ability to cycle through lists, much easier.

  Tell me what you think.

  Tags: Actionscript 3 ~ as3 ~ as3ds ~ carousel ~ code ~ dlinkedlist ~ dlistnode ~ free ~ polygonal ~ sprite
  Posted in Actionscript 3 ~ APIs ~ Development

  ---

• More tutorials

  Tuesday, June 16th, 2009

  I’ve been meaning to write a quick tutorial on how to create a simple carousel style gadget. I’ve been putting this off for a while as I haven’t had time, but I thought that I may as well just get on with it and knock one out! Also, lots of people have been searching for code on my site regarding the creation of YouTube gadgets, especially the ‘coverflow’ style one.

  At the moment, I’ve got a deal going with the authors of Flashtuts+ whereby I write articles and tutorials for them. It’s good as it gets more coverage than just putting them here and it means that I get lots of exposure too.

  I’ve currently had two published, Understanding the PureMVC Open Source Framework and Using the YouTube Player API with ActionScript 3.0 and a third one should be published soon on creating a simple YouTube Search and Play gadget.

  When it comes to expanding on the tutorials, errata and updates, I’ll always publish them here. I’ll also be putting up snippets of code and just little tips here and there.

  And of course, any code that I do that’s useful but it’s big enough for a tutorial, I’ll stick it up on here!

  So bare with me, there’ll be lots of content coming up very very shortly!

  Tags: carousel ~ Flash ~ flv ~ framework ~ gadget ~ papervision ~ player ~ puremvc ~ pv3d ~ tube ~ tutorials ~ video ~ widget ~ you ~ youtube
  Posted in General

  ---