Professional Documents
Culture Documents
Simple 3D Coverflow Documentation
Simple 3D Coverflow Documentation
Simple 3D Coverflow
Created: 09/01/2014
By: FWD (FUTURE WEB DESIGN)
Email: contact@webdesign-flash.ro (mailto:contact@webdesign-flash.ro)
Thank you for purchasing our script. If you have any questions that are beyond the scope of this help file, please feel free to email via our email. Thanks so
much!
Table of Contents
1.
2.
3.
4.
5.
6.
7.
8.
9.
C) How to install the coverflow with responsive / fixed width - top (#toc)
file:///C:/Nueva%20carpeta/codecanyon-6562058-simple-3d-coverflow/documentation/index.html
1/9
7/8/2014
file:///C:/Nueva%20carpeta/codecanyon-6562058-simple-3d-coverflow/documentation/index.html
2/9
7/8/2014
file:///C:/Nueva%20carpeta/codecanyon-6562058-simple-3d-coverflow/documentation/index.html
3/9
7/8/2014
Main settings:
8. backgroundColor:"#DDDDDD" - the
coverflow background color.
file:///C:/Nueva%20carpeta/codecanyon-6562058-simple-3d-coverflow/documentation/index.html
4/9
7/8/2014
Thumbnail settings:
20. thumbnailWidth:420 - this is the default width of the coverflow thumbnails. In case the data-thumbnail-width and data-thumbnail-height settings are not
provided for a thumbnail, it's width and height will be these default values.
21. thumbnailHeight:286 - this is the default height of the coverflow thumbnails. In case the data-thumbnail-width and data-thumbnail-height settings are not
provided for a thumbnail, it's width and height will be these default values.
22. thumbnailXOffset3D:85 - this is an offset used for the X axis space between the central thumbnail and the side ones on the 3D version of the coverflow.
23. thumbnailXSpace3D:78 - this is a value used for the X axis space between the side thumbnails on the 3D version of the coverflow.
24. thumbnailZOffset3D:200 - this is an offset used for the Z axis space between the central thumbnail and the side ones on the 3D version of the coverflow.
25. thumbnailZSpace3D:93 - this is a value used for the Z axis space between the side thumbnails on the 3D version of the coverflow.
26. thumbnailYAngle3D:70 - this is a value used for the Y angle of the side thumbnails on the 3D version of the coverflow.
27. thumbnailXOffset2D:20 - this is an offset used for the X axis space between the central thumbnail and the side ones on the 2D version of the coverflow.
28. thumbnailXSpace2D:30 - this is a value used for the X axis space between the side thumbnails on the 2D version of the coverflow.
29. thumbnailHoverOffset:100 - this is a value used for the hover effect for the side thumbnails on the 3D version of the coverflow.
30. thumbnailBorderSize:10 - the thumbnail border size in pixels.
31. thumbnailBackgroundColor:"#666666" - the background color of the thumbnails.
32. thumbnailBorderColor1:"#fcfdfd" - the upper border color of the thumbnails border. If these two values are different, they create a gradient effect, if they
are the same then there is a single color.
33. thumbnailBorderColor2:"#e4e4e4" - the lower border color of the thumbnails border. If these two values are different, they create a gradient effect, if they
are the same then there is a single color.
file:///C:/Nueva%20carpeta/codecanyon-6562058-simple-3d-coverflow/documentation/index.html
5/9
7/8/2014
34. transparentImages:"no" - this can be "yes" or "no", used when you want to use png images with transparent backgrounds.
35. maxNumberOfThumbnailsOnMobile:13 - this is the maximum number of thumbnails to be displayed only on the mobile devices for performance
reasons.
36. showThumbnailsGradient:"yes" - this can be "yes" or "no", used to show or hide the thumbnails gradient.
37. thumbnailGradientDirection:"left" - this can be "left" or "top", used for the direction the thumbnails gradient.
38. thumbnailGradientColor1:"rgba(0, 0, 0, 0)" - this is the first color with transparency of the thumbnails gradient.
39. thumbnailGradientColor2:"rgba(0, 0, 0, 1)" - this is the second color with transparency of the thumbnails gradient.
40. showText:"yes" - this can be "yes" or "no", used to show or hide the thumbnails text.
41. textOffset:10 - this is the distance from the text to the base of the center thumbnail.
42. showThumbnailBoxShadow::"yes" - this can be "yes" or "no", used to show an box shadow on the thumbnail if desired.
43. thumbnailBoxShadowCss:"0px 2px 2px #111111" - this represents the CSS box-shadow property for the thumbnail.
44. showTooltip:"yes" - this can be "yes" or "no", used to show or hide the thumbnails tooltip.
45. dynamicTooltip:"yes" - this can be "yes" or "no", used to show the thumbnail tooltip dynamically following the mouse cursor or static above the
thumbnail.
46. showReflection:"yes" - this can be "yes" or "no", used to show or hide the thumbnails reflection.
47. reflectionHeight:60 - this is the height of the thumbnails reflection.
48. reflectionDistance:0 - this is the distance of the reflection to the thumbnail.
49. reflectionOpacity:.2 - the opacity of the thumbnails reflection.
Controls settings:
50. slideshowDelay:5000 - this is the slideshow delay in milliseconds - this means 5000 represents 5 seconds.
51. autoplay:"no" - this can be "yes" or "no", it can enable the coverflow to start with the autoplay on or off.
52. disableNextAndPrevButtonsOnMobile:"no" - this can be "yes" or "no", it shows or hides the next and prev buttons on the mobile devices, if you want
them to be displayed only on the pc.
53. controlsMaxWidth:700 - this represents the max widths of the controls and is used to scale the scrollbar at resize.
54. slideshowTimerColor:"#FFFFFF" - this is the color of the slideshow timer display numbers.
55. controlsPosition:"bottom" - This can be "bottom" or "top", it represents the position of the coverflow controls.
56. controlsOffset:15 - This is the offset of the position of the coverflow controls.
57. showPrevButton:"yes" - this can be "yes" or "no", it shows or hides the previous button of the coverflow.
58. showNextButton:"yes" - this can be "yes" or "no", it shows or hides the next button of the coverflow.
59. showSlideshowButton:"yes" - this can be "yes" or "no", it shows or hides the slideshow button of the coverflow.
60. showScrollbar:"yes" - this can be "yes" or "no", used to show or hide the scrollbar.
61. disableScrollbarOnMobile:"yes" - this can be "yes" or "no", used to disable the scrollbar only on mobile devices.
62. enableMouseWheelScroll:"yes" - this can be "yes" or "no". Disables or enables the mouse wheel support for scrolling the coverflow.
63. scrollbarHandlerWidth:200 - the width of the scrollbar handler.
64. scrollbarTextColorNormal:"#000000" - the normal color of the scrollbar text.
65. scrollbarTextColorSelected:"#FFFFFF" - the selected color of the scrollbar text.
66. addKeyboardSupport:"yes" - this can be "yes" or "no", it adds keyboard navigation support for the coverflow, through the left and right arrows.
Categories settings:
67. showCategoriesMenu:"yes" - this can be "yes" or "no", used to show or hide the coverflow categories menu.
68. startAtCategory:1 - If there is more then one category you can specify at which one to start, please note that the count starts from 1.
69. categoriesMenuMaxWidth:700 - this represents the max widths of the categories menu. In case the page width is smaller than the menu width, the
menu will be scrolled.
70. categoriesMenuOffset:700 - this represents the offset of the position of the categories menu.
71. categoryColorNormal:"#999999" - the normal color of the category text.
72. categoryColorSelected:"#FFFFFF" - the selected color of the category text.
Lightbox settings:
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
addLightBoxKeyboardSupport:"yes" - this can be "yes" or "no", adds keyboard support to the lightbox.
showLightBoxNextAndPrevButtons:"yes" - this can be "yes" or "no", hides or shows the lightbox next and prev buttons.
showLightBoxZoomButton:"yes" - this can be "yes" or "no", hides or shows the lightbox zoom button.
showLightBoxInfoButton:"yes" - this can be "yes" or "no", hides or shows the lightbox info button and info window.
showlightboxSlideShowButton:"yes" - this can be "yes" or "no", hides or shows the lightbox slideshow button.
showLightBoxInfoWindowByDefault:"no" - this can be "yes" or "no", opens the info window by default.
slideShowAutoPlay:"yes" - this can be "yes" or "no", slideshow autoplay feature.
lightBoxVideoAutoPlay:"no" - this can be "yes" or "no", vimeo and youtube autoplay feature.
lightBoxVideoWidth:640 - this represents the width of the lightbox video.
lightBoxVideoHeight:480 - this represents the height of the lightbox video.
file:///C:/Nueva%20carpeta/codecanyon-6562058-simple-3d-coverflow/documentation/index.html
6/9
7/8/2014
83.
84.
85.
86.
87.
file:///C:/Nueva%20carpeta/codecanyon-6562058-simple-3d-coverflow/documentation/index.html
7/9
7/8/2014
thumbnails path, the third <li> element represents the thumbnail description and the forth <li> element represents the lightbox description.
Adding a link to open when
a thumbnail is pressed:
To add a link to a thumbnail
add the code from the below
image into the datalist <ul>
just like the image below. The
first <li> element represents
the link data as you can see
you can add the url to open
when the thumbnail is pressed
and the url target, the second
<li> element represents the
thumbnails path, the third <li>
element represents the thumbnail description and the forth <li> element represents the lightbox description.
Method
Description
file:///C:/Nueva%20carpeta/codecanyon-6562058-simple-3d-coverflow/documentation/index.html
8/9
7/8/2014
isAPIReady
isAPIReady():Boolean
getCurrentCategoryId
getCurrentCategoryId():Number
Get the current category id, this method returns a number between 0 and the
number of categories - 1.
switchCategory
Set the category id, it will automatically switch to that category just like in
the combobox selection. Accepts a parameter that represents a number
between 0 and the number of categories - 1.
getCurrentThumbId
getCurrentThumbId():Number
Get the current thumb id, this method returns a number between 0 and the
number of thumbs - 1.
gotoThumb
Set the thumb id, it will automatically go to that thumb. Accepts a parameter
that represents a number between 0 and the number of thumbs - 1.
isSlideshowPlaying
isSlideshowPlaying():Boolean
startSlideshow
startSlideshow():void
stopSlideshow
stopSlideshow():void
Specifies if the API functions are ready to use, possible values are true or
false .
Event listeners:
Event
Prefix
Description
isAPIReady
FWDSimple3DCoverflow.IS_API_READY
categoryChange
FWDSimple3DCoverflow.CATEGORY_CHANGE
Dispatched when the coverflow category has changed. It has the current
category id attached to it, you can access it like an attribute "event.id".
thumbChange
FWDSimple3DCoverflow.THUMB_CHANGE
Dispatched when the coverflow thumb has changed. It has the current
thumb id attached to it, you can access it like an attribute "event.id".
You can find an example using these API methods and events in the "start" folder at the "api_test.html" file.
FWDesign
Go To Table of Contents (#toc)
file:///C:/Nueva%20carpeta/codecanyon-6562058-simple-3d-coverflow/documentation/index.html
9/9