Thank you for purchase. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form on the link above. Thanks so much!
Register the plugin at the following link
Instructions how to register (ONLY steps 1-3 are required)
Registration made to make sure customers use the license on a single project (as per Envato rules) and to help customers owning many licenses easily track on which server licenses are being used.
Include the following css and javascript code into HEAD section of the page:
<link rel="stylesheet" type="text/css" href="css/jquery.aptbox.min.css" /><!-- lightbox css -->
<link rel="stylesheet" type="text/css" href="css/sg.css" /><!-- main css -->
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.aptbox.min.js"></script><!-- lightbox js -->
<script type="text/javascript" src="js/new.js"></script><!-- main js -->
Include player HTML into BODY section of the page:
<div id="sg-wrapper" class="sg-gallery">
<div class="sg-playlist">
<div class="sg-slide" data-controls-thumb="URL/TO/THUMB/FOR/SLIDE/CONTROLS">
<div class="sg-content">
<img class="sg-slide-img" src="URL/TO/IMAGE" alt=""/>
</div>
</div>
<div class="sg-slide" data-controls-thumb="URL/TO/THUMB/FOR/SLIDE/CONTROLS">
<div class="sg-content">
<img class="sg-slide-img" src="URL/TO/IMAGE" alt=""/>
</div>
</div>
</div>
<div class="sg-loader"></div><!-- gallery preloader -->
</div>
Initialize the plugin:
<script type="text/javascript">
jQuery(document).ready(function($) {
var settings = {
instanceName:"slider1",
sourcePath:"",
maxRandomAngle: 10,
minRandomAngle: -10,
stackAnimation: "horizontalRight",
useRotation: true,
useSwipeNavigation: true,
slideshowOn: false,
slideshowTimeout: 4000,
slideshowDirection: "forward"
};
$("#sg-wrapper").apsg(settings);
});
</script>
All options that can be set when initalizing plugin:
Parameters:
| Parameter | Value | description |
|---|---|---|
| sourcePath | Path to plugin root. Plugin loads some scripts from js directory and icons from data directory so it needs relative url from where player is located. No need to change if player is located in the same directory where js, data folders are located. | |
| instanceName | string (no spacing or special chars) | Name of the player instance, can be used for api to differentiate between multiple instances |
| stackAnimation | verticalAbove, verticalBelow, verticalRound, horizontalRight, horizontalLeft, horizontalRound | Direction of slide movement |
| shiftBuffer | number | Amount to add for stack animation when slide animates outwards. Default 20. |
| useRotation | true / false | Rotate slides by random amount. If rotation is not used, then slides with get random position applied for visual appearance of stack (maxTop, maxLeft). |
| maxRandomAngle | number | Slide maximum random angle for rotation |
| minRandomAngle | number | Slide minimum random angle for rotation |
| maxTop | number | Slide maximum top position when slide rotation is not used |
| maxLeft | number | Slide maximum left position when slide rotation is not used |
| slideshowOn | true / false | Slideshow active on start |
| slideshowTimeout | miliseconds | Slideshow duration (in miliseconds). You can set duration for each individual slide with data-duration="miliseconds" on sg-slide div |
| slideshowDirection | forward, backward | Next slide comes from the front or from the back of the stack when slideshow is active. |
| pauseSlideshowOnHover | true / false | Pause slideshow on hover (not active on mobile) |
| toggleSlideshowOnMultipleInstances | true / false | Stop slideshow in other instances when slideshow is started in one slider. Needs to be set on every instance that needs this feature. |
| captionDelay | miliseconds | Delay in which multiple captions appear one after another from left (in miliseconds) |
| useSwipeNavigation | true / false | Use swipe navigation on touch sensitive devices to change slide |
| randomizeSlides | true / false | Randomize slide order on start. |
| changeSlideOnClick | true / false | Change to next slide by clicking on top slide. Note that this may not work if you have link or lightbox attached to slide. |
| controlsType | buttons, bullets, thumbs | Slide controls. Optional, slides can work without controls (with swipe or keyboard controls, or with slideshow autoplay). |
| blockInteractionWithNonActiveSlides | true / false | Place transparent div in slide to block interaction with slide content while slide not opened. Once slide opens, this element is hidden. |
| swapImageSourcesWidth | number | If you provide large images with data-maxres, slider can change image source depending on avialable space. swapImageSourcesWidth is the number above which large images will apply. |
| centerSlides | true / false | Center slides, useful if your slides are different dimensions. |
| useContentPreloader | true / false | Use preloader in slide for ajax content which is visible until ajax content loads. |
| contentLoader | <div class="sg-loader"></div> | Markup for slide content loader. |
| reloadContentInSlide | true / false | Reload ajax content everytime slide opens. If true, this will remove ajax content when active slide goes away. |
| cacheAjax | true / false | Cache ajax when loading content in slide. |
| useKeyboardNavigation | true / false | Use keyboard navigation to control slides ( left arrow - previous slide, right arrow - next slide, f - open last slide, t - open first slide, space - toggle slideshow). |
| backwardIcon | data/icons/pause.png | Url to backward control icon relative to player root. |
| forwardIcon | data/icons/forward.png | Url to forward control icon relative to player root. |
| playIcon | data/icons/play.png | Url to play control icon relative to player root. |
| pauseIcon | data/icons/pause.png | Url to pause control icon relative to player root. |
Notes:
1. Slides are stacked top to bottom in html page (last slide in html is at the top of the stack on start).
2. If you want to randomize slide order on start you can use randomizeSlides:true in settings.
Example of slide with just image:
<div class="sg-slide">
<div class="sg-content">
<img class="sg-slide-img" src="URL/TO/IMAGE" alt=""/>
</div>
</div>
Example of slide with image lazy loaded: (each image will load when slide opens)
<div class="sg-slide sg-ratio">
<div class="sg-content">
<img class="sg-slide-img sg-lazy-image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" data-src="URL/TO/IMAGE" alt=""/>
</div>
</div>
required CSS (add some padding top to slides to keep slide height until image loads):
.sg-ratio{
width:100%;
padding-top: 56.25%;
}
You can use this link to calculate aproximate padding required for your image size.
Example of slide image with different image sources for different resolution (image source will change based on slider width). Note that src and data-src have the same url!
<div class="sg-slide">
<div class="sg-content">
<img class="sg-slide-img" src="URL/TO/IMAGE" data-src="URL/TO/IMAGE" data-maxres="URL/TO/MAXRES/IMAGE" alt=""/>
</div>
</div>
Use this in combination with swapImageSourcesWidth
Example of slide with content loaded with ajax. Note that sg-ratio class is required to keep slide height.
<div class="sg-slide sg-ratio" data-content-url="URL/TO/CONTENT/TO/LOAD">
<div class="sg-content-url">
//content will get loaded here
</div>
</div>
required CSS (add some padding top to slides to keep slide height):
.sg-ratio{
width:100%;
padding-top: 56.25%;
}
You can use this link to calculate aproximate padding required for your image size.
Example of slide with lightbox which opens on button click:
<div class="sg-slide">
<div class="sg-content">
<img class="sg-slide-img" src="URL/TO/IMAGE" alt=""/>
<div class="sg-slide-detail">
<a data-aptbox href="LIGHTBOX/URL" data-caption="LIGHTBOX/CAPTION/HERE" data-thumb="THUMB/IN/LIGHTBOX">
<img src="data/icons/plus.png" alt="" />
</a>
</div>
</div>
</div>
Lightbox used in Fancybox: http://fancyapps.com/fancybox/3/
LIGHTBOX/URL can be almost anything: image ( URL/TO/IMAGE ), Youtube ( https://www.youtube.com/watch?v=rNTyF4qXw3A ), Vimeo ( https://vimeo.com/191947042 ), self hosted video ( PATH/TO/MP4/VIDEO ), iframe ( https://maps.google.com/maps?q=university of san francisco&t=&z=13&ie=UTF8&iwloc=&output=embed )
Example of slide with lightbox which opens Youtube video on button click:
<div class="sg-slide">
<div class="sg-content">
<img class="sg-slide-img" src="URL/TO/IMAGE" alt=""/>
<div class="sg-slide-detail">
<a data-aptbox href="https://www.youtube.com/watch?v=rNTyF4qXw3A" data-caption="LIGHTBOX/CAPTION/HERE">
<img src="data/icons/plus.png" alt="" />
</a>
</div>
</div>
</div>
Example of slide with lightbox which opens Google maps on button click (notice data-type="iframe" attribute!):
<div class="sg-slide">
<div class="sg-content">
<img class="sg-slide-img" src="URL/TO/IMAGE" alt=""/>
<div class="sg-slide-detail">
<a data-aptbox data-type="iframe" href="https://maps.google.com/maps?q=university of san francisco&t=&z=13&ie=UTF8&iwloc=&output=embed" data-caption="LIGHTBOX/CAPTION/HERE">
<img src="data/icons/plus.png" alt="" />
</a>
</div>
</div>
</div>
Example of slide with lightbox which opens on slide click (whole slide opens lightbox):
<div class="sg-slide">
<div class="sg-content">
<a data-aptbox href="LIGHTBOX/URL" data-caption="LIGHTBOX/CAPTION/HERE">
<img class="sg-slide-img" src="URL/TO/IMAGE" alt="" />
</a>
</div>
</div>
If you want to connect multiple slides in the same gallery when lightbox is opened use same lightbox hook (data-aptbox="gallery1")
<div class="sg-slide">
<div class="sg-content">
<a data-aptbox="gallery1" href="LIGHTBOX/URL" data-caption="LIGHTBOX/CAPTION/HERE">
<img class="sg-slide-img" src="URL/TO/IMAGE1" alt="" />
</a>
</div>
</div>
<div class="sg-slide">
<div class="sg-content">
<a data-aptbox="gallery1" href="LIGHTBOX/URL" data-caption="LIGHTBOX/CAPTION/HERE">
<img class="sg-slide-img" src="URL/TO/IMAGE2" alt="" />
</a>
</div>
</div>
Example of slide with url link which opens on button click:
<div class="sg-slide">
<div class="sg-content">
<img class="sg-slide-img" src="URL/TO/IMAGE" alt=""/>
<div class="sg-slide-detail">
<a href="http://www.google.com" target="_blank">
<img src="data/icons/link.png" alt="" />
</a>
</div>
</div>
</div>
Example of slide with url link which opens on slide click (whole slide opens url link):
<div class="sg-slide">
<div class="sg-content">
<a href="http://www.google.com" target="_blank">
<img class="sg-slide-img" src="URL/TO/IMAGE" alt="" />
</a>
</div>
</div>
Example of slide with some HTML inside: (you need to add your own css to format slide HTML)
<div class="sg-slide">
<h2>Small text in slide</h2><br>
<p class="foo">Each slide can be different height and contain any HTML inside. Slides are responsive and can contain url link and lightbox link to an image, video, Youtube, Vimeo or any HTML. CSS3 transitions perform smoothly on any device.</p>
</div>
Captions can be attached to slides that contain images. There are 2 caption styles (coming from left and coming from bottom)
Example of left captions (they can be multiple):
<div class="sg-slide">
<div class="sg-content">
<img class="sg-slide-img" src="URL/TO/IMAGE" alt=""/>
<div class="sg-caption">
<div class="sg-caption-left">First caption</div>
<div class="sg-caption-left">Second caption</div>
</div>
</div>
</div>
Example of bottom captions:
<div class="sg-slide">
<div class="sg-content">
<img class="sg-slide-img" src="URL/TO/IMAGE" alt=""/>
<div class="sg-caption">
<div class="sg-caption-bottom">This is a caption</div>
</div>
</div>
</div>
Example of slide with caption wrapped in url link: (whole caption acts as a link)
<div class="sg-slide">
<div class="sg-content">
<img class="sg-slide-img" src="URL/TO/IMAGE" alt=""/>
<div class="sg-caption">
<div class="sg-caption-left"><a href="http://www.google.com" target="_blank">This caption is linked</a></div>
</div>
</div>
</div>
Place your images in a folder, set data-folder-path. Example of folder playlist:
<div id="sg-wrapper" class="sg-gallery">
<div class="sg-playlist" data-folder-path="../data/images5" data-sort="filename-asc"></div>
<div class="sg-loader"></div>
</div>
| Parameter | Value | description |
|---|---|---|
| data-folder-path | relative folder path to the plugin "includes" directory (where folder_parser.php file is located) |
|
| data-sort | optional | sort method: filename-asc - file name ascending filename-desc - file name descending date-asc - last modification date ascending date-desc - last modification date descending |
| data-use-maxres | optional | Use different image sources for different resolutions. Use this in combination with swapImageSourcesWidth |
data-use-maxres requires following setup in folder (you need to have directoy named "large" inside main directory and inside "large" directory place images with higher resolution. These images need to be named the same as main images!):
image-01.jpg
image-02.jpg
...
large directory
image-01.jpg
image-02.jpg
...
Example with captions:
<div id="sg-wrapper" class="sg-gallery">
<div class="sg-playlist" data-folder-path="../data/images5" data-use-meta="1" data-create-caption="1" data-caption-class="sg-caption-left sg-c6"></div>
<div class="sg-loader"></div>
</div>
| Parameter | Value | description |
|---|---|---|
| data-use-meta | read image metadata |
|
| data-create-caption | Create image captions from meta Caption (iptc 2#120) | |
| data-caption-class | add custom classes to captions |
Example with lazy load (data-lazy-load, each image will load when slide opens):
<div id="sg-wrapper" class="sg-gallery">
<div class="sg-playlist" data-folder-path="../data/images5" data-lazy-load="1"></div>
<div class="sg-loader"></div>
</div>
required CSS (add some padding top to slides to keep slide height until image loads):
.sg-ratio{
width:100%;
padding-top: 56.25%;
}
Following callbacks are supported:
player.on('setupDone', function(e, data){
//called when plugin has been instantiated and is ready to use api, returns (instance, instanceName)
}).on('beforeSlideChange', function(e, data){
//called before slide change, returns (instance, instanceName, activeSlide)
//console.log('beforeSlideChange: ', data)
}).on('afterSlideChange', function(e, data){
//called after slide change, returns (instance, instanceName, activeSlide)
//console.log('afterSlideChange: ', data)
}).on('beforeLightboxOpen', function(e, data){
//called before lightbox opens, returns (instance, instanceName)
}).on('afterLightboxClose', function(e, data){
//called after lightbox close, returns (instance, instanceName)
}).on('contentLoad', function(e, data){
//called after ajax content has sucessfuly loaded, returns (instance, instanceName, activeSlide, url)
}).on('contentLoadError', function(e, data){
//called after ajax content failed to load, returns (instance, instanceName, activeSlide, url)
});
Following api methods are included:
pauseSlideshow(); //pause Slideshow
resumeSlideshow();//resume Slideshow
nextSlide(); //next Slide
previousSlide(); //previous Slide
//open slide by data-id attribute: (Slides when created will get data-id attribute on each sg-slide element. You can also add your own data-id attributes if you want to know exactly what slide has what data-id attribute)
openSlide(data-id, focus); //open slide with data-id attribute, focus slider in page (boolean)
emptyContentUrl(data-id);//empty content loaded with ajax on specific slide (with data-id)
getActiveSlide();//returns active slide on top
URL Parameters available, that can be appended as query string.
| Parameter | Value | description |
|---|---|---|
| instance_name | instanceName | Name of the player instance, can be used for api to differentiate between multiple instances |
| slide_id | number | Slide data-id attribute |
| slider_focus | 0/1 | Focus slider in page (scroll to slider) |
Example of query parameters: www.your-domain.com/some-page?instance_name=slider2&slide_id=3&slider_focus=1
Target slider with instanceName slider2, open slide with data-id attribute 3 and focus slider in page
To receive support, first make sure you have registered as described in the register section.
Support is only possible if you have registered. If you have any questions after purchase, send a message at http://codecanyon.net/user/Tean#contact, and provide your PURCHASE CODE.