It's easy and no Javascript knowledge is needed if you use it like I did on this page.
Lets take a look at the code within your document's body.
<div id="flapper" jase="cf" externalclass="appleflow" adjust="12" perside="3" reflex="true" rheight="40" ropacity="40" skew="65" scale="75" forceskew="true" forcescale="true" style="position:absolute; top:0px; left:0px; width:900px; height:300px; overflow:hidden; background-color:#000000;">
<div enable="powerpics/1.jpg" disable="powerpics/1g.jpg"></div>
<div enable="powerpics/2.jpg" disable="powerpics/2g.jpg"></div>
<div enable="powerpics/3.jpg" disable="powerpics/3g.jpg"></div>
<div enable="powerpics/4.jpg" disable="powerpics/4g.jpg"></div>
<div enable="powerpics/5.jpg" disable="powerpics/5g.jpg"></div>
<div enable="powerpics/6.jpg" disable="powerpics/6g.jpg"></div>
<div enable="powerpics/7.jpg" disable="powerpics/7g.jpg"></div>
<div enable="powerpics/8.jpg" disable="powerpics/8g.jpg"></div>
<div enable="powerpics/9.jpg" disable="powerpics/9g.jpg"></div>
<div enable="powerpics/10.jpg" disable="powerpics/10g.jpg"></div>
<div enable="powerpics/11.jpg" disable="powerpics/11g.jpg"></div>
</div>
<script src="http://american-webdesign.com/apple.js"></script>
<script src="http://american-webdesign.com/snow.js"></script>
Let us go through the code step by step.
Create your HTML Appleflow divobject
<div id="neededidofyourchoice" jase="neededjaseidofyourchoise" externalclass="appleflow" style="cssstyleofyourchoice">
<div yourpictureattributesofyouritem1></div>
<div yourpictureattributesofyouritem2></div>
<div yourpictureattributesofyouritem3></div>
</div>
As you see we need some important attributes for our Appleflow divobject.
id Depending on your design it will probably work without an id but it is better to set one
jase Must be setted with a value of your choice
externalclass Must be setted with the value "appleflow"
style Must be setted with at least a width, a height and a position. You don't have to set position to 'absolute', 'relative' works as well.
Now we could talk about the optional attributes which allows you to design it as you like.
perside (Number of items on each side within your Appleflow divobject) Must be a number. (default is 3)
skew (Maximum skew degree from 0 to 90) Must be a number. (default is 50)
scale (Minimum scale percentage from 0 to 100) Must be a number. (default is 70)
adjust (Number of pixels may be added to the distance between items) Must be a number. (default is 10)
forceskew Set all items to the same skew value as skew is setted (true or false) Must be a string. (default is false)
forcescale Set all items to the same scale value as scale is setted (true or false) Must be a string. (default is false)
reflex Reflection (true for on and false for off) Must be a string. (default is false)
rheight Number of reflection height if reflection is setted. Must be a Number. (default is 30). !Items height decreases by this number!
ropacity Number of reflection opacity percentage if reflection is setted. Must be a number. (default is 30).
loader, loadertxt and loaderbar See more below at "Add a loadingbar"
arrowleft and arrowright See more below at "Add controll arrows"
Set items
All items must be declared within a divobject. An id is not needed.
This is the easiest way for each item.
<div enable="urltoyouritempicture"></div>
In that case your item will never change.
If you need to change the item as i did (grey to colored) use this:
<div enable="urltoyouractivitempicture" disable="urltoyournonactivitempicture"></div>
enable will show up when selected.
If you have any Javascript knowlegde, you may add a javascript for each selected item by using
func.
<div enable="urltoyouractivitempicture" disable="urltoyournonactivitempicture" func="dosomething like alert or a complex javascriptfunction for this item"></div>
<div enable="urltoyouractivitempicture" disable="urltoyournonactivitempicture" func="dosomething like alert or a complex javascriptfunction for this item"></div>
<div enable="urltoyouractivitempicture" disable="urltoyournonactivitempicture" func="dosomething like alert or a complex javascriptfunction for this item"></div>
Do not use linebreaks or new lines within your functions!
Add a loadingbar
Just design and position your loadingbar as you like with these three components:
1.) the loader itself
2.) the loadingbar within your loader
3.) the loadingtext within your loader
I did it like this:
<!--Your loader-->
<div id="loader" style="position:absolute; top:100px; width:200px; left:350px; height:30px;">
<!--Your loadingbar-->
<div id="bar" style="position:absolute; top:35px; left:0px; width:200px; height:10px; background-color:#FF0000;"></div>
<!--Your loadingtext-->
<div align="center" id="txt" style="position:absolute; top:5px; left:0px; width:200px;">Loading</div>
</div>
The width for your loadingbar is requiered. Appleflow uses this value as maximum and increases your bar by loaded percents.
For the loadingtext I've setted the word "Loading". Appleflow will also use this and add the progress percentage (Loading percentage%).
If you leave it empty Appleflow will only show "percentage%".
Now just set the ids to Appleflow attrubutes.
loader ID of your loader (in my example "loader")
loadertxt ID of your loadertext (in my example "txt")
loaderbar ID of your loaderbar (in my example "bar")
Add controll arrows
Just design and position your left and right arrow as you like and give 'em an id.
I did it like this:
<!--leftarrow-->
<div id="appleleft" style="position:absolute; display:none; cursor:pointer; left:0px; top:100px; font-size:100px; z-index:99999999981; font-weight:bold;"><</div>
<!--rightarrow-->
<div id="appleright" style="position:absolute; display:none; cursor:pointer; left:820px; top:100px; font-size:100px; z-index:99999999981; font-weight:bold;">></div>
Now just set the ids to Appleflow attrubutes.
arrowleft ID of your left arrow (in my example "appleleft")
arrowright ID of your right arrow (in my example "appleright")
Last but not least, import Jase and appleflow
<script src="http://american-webdesign.com/apple.js"></script>
<script src="http://american-webdesign.com/snow.js"></script>
That's it :)
5.17 (works like a charm, including Iphone and Ipad)
16.0.1 (works like a charm)
12.0.742.91 (works like a charm)
12.02 (works okay. Without 3d skewing)
9 (works really bad like IE always do. Without 3d skewing)