Spotlight feat teddy

Hellows Saturday,

On this lovely weekend, I decided to try out a new tutorial which is Spotlight that i've found on EdgeCommons -EdgeDocks. Once you click on an icon, it can load up 3 different type of medias : images, animate and youtube videos, depending on which media you link the icon with.

I've also learned how to loop my animation :) 

Before you start, you have to download EdgeCommons library to get edgecommons.spotlight.js file. A more detail tutorial can be found here (note: Its in mandarin) : 

http://www.cnblogs.com/adobeedge/p/Adobe_Edge_Spotlight.html

After you download, put it together with your project folder, then copy this two codes.

*I'll be doing for image only. The other two media have different coding so be sure to copy and paste the right one from EdgeCommons.

yepnope({

         load: [ "lib/EdgeCommons.js",

                   "lib/EdgeCommons.Spotlight.js",

                   "lib/style.css",],

         complete: function(){

                   EC.centerStage(sym);

         }

});

1. var config = {
2. width: 700,
3. height: 500,
4. type: "image",
5. source: "images/CHANGE_THIS.png"
6. };
7.  
8. EC.Spotlight.open( config );

When you click on the teddy bear , the image you linked it with will pop up !

cool?

byebye!