Table of Contents
A) Directories
source - Original source files other files are part of the source, you do not need to upload any of these to your server. Use these to change the code or style.
deploy – Published files for adding item to the site. These are the files you need to upload to your server.
help – Help file (HTML)
B) Font Used
Bebas Neue (You can download it here as free: http://www.dafont.com/bebas-neue.font)
Olnova-Light (You can download it here as free: http://www.dafont.com/bebas-neue.font)
Tahoma
You can change font from CSS file.
C) Installation
Installing the rotator requires the following steps.
- Including the gallery’s css file.
- Including the javascript files.
- Specifying the html tags of the rotator within your page.
- Instantiating a javascript function call with any optional parameters.
Below describes these steps in more detail.
In step 1, to include the gallery's css file fullscreen-image-gallery-v2.css, simply specify the following line of code within your <head> tag:
<link rel="stylesheet" type="text/css" href="fullscreen-image-gallery-v2/fullscreen-image-gallery-v2.css"/>
In step 2, you will need to include the jquery's library files, audio player file, tooltip file and the gallery's file jquery.fullscreen-image-gallery-v2.js which is located in the js directory. The code below shows the include in a html page:
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script> <script type="text/javascript" src="js/jquery.address.js"></script> <script type="text/javascript" src="js/jquery.twipsy.js"></script> <script type="text/javascript" src="js/jquery.audio-player.js"></script> <script type="text/javascript" src="fullscreen-image-gallery-v2/jquery.fullscreen-image-gallery-v2.js"></script>
Note: The css, js files are the compressed production version of the file. If you intend to modify the image gallery's source code, you will need to look at files in source folder and it is recommended that you minify the modified file afterwards.
In step 3, add audio player, refer to the example in the index.html file. In that file, you'll see a block of tag starting and ending with:
<div class="audio-player"> <!-- all the tags in between, see index.html for the complete code --> </div>
After that, add tag to collect categories:
<div id="categories"></div>
Then, specify the tags of the gallery itself, refer to the example in the index.html file. In that file, you'll see a block of tag starting and ending with:
<div id="fullscreen-image-gallery-v2"> <!-- all the tags in between, see index.html for the complete code --> </div>
You can use this as a template and copy and paste it onto your own page, but will have to modify it accordingly with your own image/item information.
Finally in step 4, you will need to instantiate a javascript function call to get the rotator initialized. The example code looks like this below:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery.address.crawlable(false);
jQuery.audioPlayer(musicSettings, html5);
jQuery.fullscreenImageGalleryV2(bgSettings);
});
</script>
This will instantiate the image gallery using the default parameters.
D) Adding Content
In order to add or change content to the gallery, you will have to specify a set of tags for each item within the gallery's html tags. The list of items is represented as a <ul> tag and each item is represented by a <li> tag.
Below is an example of what the tags would look like for an item. You will have to repeat this for as many items as needed for your gallery within the <ul> tag.
<li title="path/to/image.jpg" data-effect="fade" data-delay="5000" data-easing="linear">
The example above shows that each item entry begins with an opening and closing <li> tag. The <li> tag contains an optional attribute named data-effect in which an individual effect/transition type can be assigned for the item. Refer to the transitions table for a list of available transitions.
Also, there is another optional attribute named data-delay for the <li> tag. This is for assigning an individual timer delay for rotation. The delay time is in milliseconds.
You can change the transition easing by data-easing
You can specify the big image URL by the attribute named title for the <li> tag.
Inside the <li> tag, the first tag is a <img> tag with class named thumb. This <img> tag represents the thumbnail of the list item.
Next, after the <img> tag, there are <div> tags with content where you can set animation of the content, background-text options.
E) Plugin Parameters
You can change some common attributes of the image gallery through the parameters of the plugin. Below is an example of the attributes being specified with corresponding values.
Note: if you want to leave a parameter with its default value, you can omit that parameter in the javascript call.
<script type="text/javascript">
$(document).ready(
function() {
jQuery.fullscreenImageGalleryV2 ({
randomize:false,
autoPlay:true,
delay:8000,
disableRightClick:true,
//Category
categoryAlpha:0.6,
//Previous/Next arrows
showPreviousNextArrow:true,
arrowWidth:41,
showThumb:true,
thumbWidth:100,
thumbHeight:85,
thumbSliderSpeed:500,
//Play/Pause button
showPlayPauseButton:true,
//Fullscreen button
showFullscreenButton:true,
//Transition
transition:"random", //fade, slideLeft, slideRight, slideUp, slideDown
transitionSpeed:750,
easing:"easeInOutExpo",
//Text
textEasing:"easeOutQuint",
//Timer
showTimer:true,
timerType:"clock", //clock, line
timerArcSize:2, //Clock timer arc size
timerAlign:"top", //bottom, top
//Key down
keydown:true,
//Responsive
responsive:true,
startWidth:1280
});
}
);
</script>
| Attribute | Properties | Description |
|---|---|---|
| randomize | boolean - Default: false | Specifies if images are displayed in random order. Set to true or false. |
| autoPlay | boolean - Default: true | Specifies if image rotation initially starts. Set to true or false. |
| delay | number - Default: 8000 | The global time delay for image rotation. If delay is set per item, it will take precedence over this global delay. The value is set in milliseconds. |
| disableRightClick | boolean - Default: true | Specifies if the right mouse click & context menu is enabled. Set to true or false. |
| categoryAlpha | number - Default: 0.6 | Unselected category opacity. Any positive number between 0 & 1. |
| showPreviousNextArrow | boolean - Default: true | Specifies if the previous/next arrows in the center of the screen are visible. Set to true or false. |
| arrowWidth | number - Default: 41 | The width of the arrows when roll out. The value is set in pixels (px). |
| showThumb | boolean - Default: true | Specifies if the thumbnails over arrows are visible. Set to true or false. |
| thumbWidth | number - Default: 100 | The width of the thumbnails. The value is set in pixels (px). |
| thumbHeight | number - Default: 85 | The height of the thumbnails. The value is set in pixels (px). |
| thumbSliderSpeed | number - Default: 500 | Thumbnail changing cycle speed when click on thumbnails. The value is set in milliseconds. |
| showPlayPauseButton | boolean - Default: true | Specifies if the play/pause button is visible. Set to true or false. |
| showFullscreenButton | boolean - Default: true | Specifies if the fullscreen button is visible. Set to true or false. |
| transition | string - Default: random | The global transition use for images. If transition is set per slide, it will take precedence over the global transition. Set to fade, slideLeft, slideRight, slideUp, slideDown or random. |
| transitionSpeed | number - Default: 600 | The transition speed/duration use for image transition. The value is set in milliseconds. |
| easing | string - Default: easeInOutExpo | The easing used for image transition. Please visit jQuery Easing Plugin for a list of all available easing |
| textEasing | string - Default: easeOutQuint | The default easing used for text transition. Please visit jQuery Easing Plugin for a list of all available easing |
| showTimer | boolean - Default: true | Specifies if the timer indicator bar is visible. Set to true or false. |
| timerType | string - Default: clock | Specifies the timer bar type. Set to clock or line. |
| timerArcSize | number - Default: 2 | Clock timer arc size. |
| timerAlign | string - Default: top | Vertical alignment of the line timer. Set to bottom or top. |
| keydown | boolean - Default: true | Specifies if the left-right, up-down mouse key down functions are enabled to change current image via keyboard. Set to true or false. |
| responsive | boolean - Default: true | Specifies if gallery captions are responsive. Set to true or false. |
| startWidth | number - Default: 0 | Maximum screen width to call the responsive caption calculating function. |
F) Text Effect Attributes
Attributes used for the text effect are listed below. You can modify them by changing the layer attributes with content class.
| Attribute | Properties | Description |
|---|---|---|
| data-direction | string | Start-up direction of text animation. Set to left, right, bottom or top. |
| data-offset | number | The offset of the direction effect. The value is set in pixels (px). |
| data-time | number - Default: 0 | The transition speed/duration use for text animation. The value is set in milliseconds. |
| data-delay | number - Default: 0 | The delay time to wait before the transition starts. The value is set in milliseconds. |
| data-easing | string - Default: easeOutQuint | The easing used for text transition. Please visit jQuery Easing Plugin for a list of all available easing |
| data-alpha | number - Default: 0 | Text alpha/opacity when the transition starts. Any positive number between 0 & 1. |