You are here

README.txt in Supersized 8

Same filename and directory in other branches
  1. 7 README.txt
CONTENTS OF THIS FILE
---------------------

 * Author
 * Description
 * Dependencies
 * Usage
 * Installation
 * Context
 * Themes
 * After slide JS callback
 * Hooks
 * Notes

AUTHOR
------
Aaron Fan (http://drupal.org/user/576672)

DESCRIPTION
-----------
This module make it easy to implement Supersized JQuery plugin into Druapl
system. All available Supersized JQuery settings are configurable by UI.

A field type "Supersized Slide" comes with this module, and obviously,
Supersized background slides are managed by fields of node.

We have also provided a Context reaction, so you could assign node with
Supersized field by any Context condition!

DEPENDENCIES
------------
context
file
image
imagecache_actions
libraries (>=2)

We are trying to minimize the dependencies as much as possible. However, the
file size of background images can be very huge. So we decided to predefine an
image style which is going to scale down the dimension and well as changing the
file format into jpeg which helps a lot to reduce the file size.

USAGE
-----
1. Add a "Supersized Slide" field to any content type, in most of the cases,
this would be a multiple value field.
2. Configure the Supersized options such as transition, interval, etc...
3. Create a new content and upload beautiful images using the Supersized field.
Yes, there you go! Supersized is just that easy to setup.

* Important, if the background of your theme is not transparent, you will not
be able to see the background.  You may need to make changes to your theme CSS.

INSTALLATION
------------
Download Supersized from:
http://bit.ly/YCHcYs
This is not the official release, however, this branch provide an "after slide"
JS callback which dramatically increases the ability to create awesome effects.

1. Decompress the downloaded file and place it in the the libraries folder such
   as sites/all/libraries.
2. Install this module as usual, and enabled Supersized.
3. (Optional) Enable Supersized context, which allow you to assign content with
   Supersized under any context condition.

* Important, we will be using the js and css files from supersized/slideshow.

CONTEXT
---------
Enabled Supersized Context, you will find a new condition and a reaction.  Use
this new condition to determine weather a page has Supersized, and use this new
reaction to assign node with Supersized.

For example, you may want to have Supersized on a page which is created by
Views, and the path is `/latest-blog`.  You should create a node that has
Supersized field, upload your beautiful pictures and save it.  You will then
create a new context, condition with be path: /latest-blog, and your reaction
would be Supersized: a chosen node.

THEMES
------
Theme functions as follow:
theme_supersized_overlay()
theme_supersized_arrow_nav()
theme_supersized_progress_bar()
theme_supersized_thumbnail_navigation()
theme_supersized_thumb_links()
theme_supersized_slide_links()
template_preprocess_supersized_control_bar()

The default them comes with Supersized JQuery plugin supports 'image_path'. The
default path would be {LIBRARY PATH}/supersized/slideshow/img, however, if your
theme contains /images/supersized/ this folder, images will be crab from this
folder instead.

AFTER SLIDE CALLBACK
--------------------
Define a js function and name it `supersized_slide_callback`.  This function
will be called after each slides.

/**
 * Supersized slide callback function.
 */
function am_billboard_slide_callback() {
  var title = api.getField('title');
  var body = api.getField('body');
  // Do something with the slide title and body...
}

HOOKS
-----
hook_supersized_overlay()
This is for adding custom overlay pattern.  Define
YOURMODULE_supersized_overlay() in your module, and this hook should return the
an array such as

return array(
  'your_style_01' => array(
    'name' => t('Your Style 1'),
    'file' => 'filename of image',
    'file path' => 'path to image',
  ),
  'your_style_02' => array(
    'name' => t('Your Style 2'),
    'file' => 'filename of image',
    'file path' => 'path to image',
  ),
);

For example:
function YOURMODULE_supersized_overlay() {
  $file_path = module_get_path('module', 'YOURMODULE');
  return array(
    'YOURMODULE_1' => array(
      'name' => t('YOURMODULE 1'),
      'file' => 'overlay_01.png',
      'file path' => $file_path,
    ),
    'YOURMODULE_2' => array(
      'name' => t('YOURMODULE 2'),
      'file' => 'overlay_01.png',
      'file path' => $file_path,
    ),
  );
}

NOTES
-----
1. Some users has report that html, and body has to be 100%, otherwise scrollbar
   will be randomly appear and disappear.  This is somehow depends depends on
   your theme.  You may set this in case you are having the same problem.
   (http://drupal.org/node/1974030#comment-7405596)

2. Issue about stretching image to fit whole screen.
   (http://drupal.org/node/1978216)

File

README.txt
View source
  1. CONTENTS OF THIS FILE
  2. ---------------------
  3. * Author
  4. * Description
  5. * Dependencies
  6. * Usage
  7. * Installation
  8. * Context
  9. * Themes
  10. * After slide JS callback
  11. * Hooks
  12. * Notes
  13. AUTHOR
  14. ------
  15. Aaron Fan (http://drupal.org/user/576672)
  16. DESCRIPTION
  17. -----------
  18. This module make it easy to implement Supersized JQuery plugin into Druapl
  19. system. All available Supersized JQuery settings are configurable by UI.
  20. A field type "Supersized Slide" comes with this module, and obviously,
  21. Supersized background slides are managed by fields of node.
  22. We have also provided a Context reaction, so you could assign node with
  23. Supersized field by any Context condition!
  24. DEPENDENCIES
  25. ------------
  26. context
  27. file
  28. image
  29. imagecache_actions
  30. libraries (>=2)
  31. We are trying to minimize the dependencies as much as possible. However, the
  32. file size of background images can be very huge. So we decided to predefine an
  33. image style which is going to scale down the dimension and well as changing the
  34. file format into jpeg which helps a lot to reduce the file size.
  35. USAGE
  36. -----
  37. 1. Add a "Supersized Slide" field to any content type, in most of the cases,
  38. this would be a multiple value field.
  39. 2. Configure the Supersized options such as transition, interval, etc...
  40. 3. Create a new content and upload beautiful images using the Supersized field.
  41. Yes, there you go! Supersized is just that easy to setup.
  42. * Important, if the background of your theme is not transparent, you will not
  43. be able to see the background. You may need to make changes to your theme CSS.
  44. INSTALLATION
  45. ------------
  46. Download Supersized from:
  47. http://bit.ly/YCHcYs
  48. This is not the official release, however, this branch provide an "after slide"
  49. JS callback which dramatically increases the ability to create awesome effects.
  50. 1. Decompress the downloaded file and place it in the the libraries folder such
  51. as sites/all/libraries.
  52. 2. Install this module as usual, and enabled Supersized.
  53. 3. (Optional) Enable Supersized context, which allow you to assign content with
  54. Supersized under any context condition.
  55. * Important, we will be using the js and css files from supersized/slideshow.
  56. CONTEXT
  57. ---------
  58. Enabled Supersized Context, you will find a new condition and a reaction. Use
  59. this new condition to determine weather a page has Supersized, and use this new
  60. reaction to assign node with Supersized.
  61. For example, you may want to have Supersized on a page which is created by
  62. Views, and the path is `/latest-blog`. You should create a node that has
  63. Supersized field, upload your beautiful pictures and save it. You will then
  64. create a new context, condition with be path: /latest-blog, and your reaction
  65. would be Supersized: a chosen node.
  66. THEMES
  67. ------
  68. Theme functions as follow:
  69. theme_supersized_overlay()
  70. theme_supersized_arrow_nav()
  71. theme_supersized_progress_bar()
  72. theme_supersized_thumbnail_navigation()
  73. theme_supersized_thumb_links()
  74. theme_supersized_slide_links()
  75. template_preprocess_supersized_control_bar()
  76. The default them comes with Supersized JQuery plugin supports 'image_path'. The
  77. default path would be {LIBRARY PATH}/supersized/slideshow/img, however, if your
  78. theme contains /images/supersized/ this folder, images will be crab from this
  79. folder instead.
  80. AFTER SLIDE CALLBACK
  81. --------------------
  82. Define a js function and name it `supersized_slide_callback`. This function
  83. will be called after each slides.
  84. /**
  85. * Supersized slide callback function.
  86. */
  87. function am_billboard_slide_callback() {
  88. var title = api.getField('title');
  89. var body = api.getField('body');
  90. // Do something with the slide title and body...
  91. }
  92. HOOKS
  93. -----
  94. hook_supersized_overlay()
  95. This is for adding custom overlay pattern. Define
  96. YOURMODULE_supersized_overlay() in your module, and this hook should return the
  97. an array such as
  98. return array(
  99. 'your_style_01' => array(
  100. 'name' => t('Your Style 1'),
  101. 'file' => 'filename of image',
  102. 'file path' => 'path to image',
  103. ),
  104. 'your_style_02' => array(
  105. 'name' => t('Your Style 2'),
  106. 'file' => 'filename of image',
  107. 'file path' => 'path to image',
  108. ),
  109. );
  110. For example:
  111. function YOURMODULE_supersized_overlay() {
  112. $file_path = module_get_path('module', 'YOURMODULE');
  113. return array(
  114. 'YOURMODULE_1' => array(
  115. 'name' => t('YOURMODULE 1'),
  116. 'file' => 'overlay_01.png',
  117. 'file path' => $file_path,
  118. ),
  119. 'YOURMODULE_2' => array(
  120. 'name' => t('YOURMODULE 2'),
  121. 'file' => 'overlay_01.png',
  122. 'file path' => $file_path,
  123. ),
  124. );
  125. }
  126. NOTES
  127. -----
  128. 1. Some users has report that html, and body has to be 100%, otherwise scrollbar
  129. will be randomly appear and disappear. This is somehow depends depends on
  130. your theme. You may set this in case you are having the same problem.
  131. (http://drupal.org/node/1974030#comment-7405596)
  132. 2. Issue about stretching image to fit whole screen.
  133. (http://drupal.org/node/1978216)