The Documentation | Author | Website

 

I.     Product Description. 3

II.    Features. 3

III.       Interface Guide. 3

1.    Frontend. 3

a.     Frontend detail features. 3

b.     Preview.. 4

2.    Backend. 6

a.     Backend detail features. 6

b.     Preview.. 6

IV.       Quick Setup. 10

1.    Understanding source files. 10

a.     _ex folder with ajax, css, js files. 10

b.     Asset folder with image files. 10

c.     Config folder with JSON files. 10

d.     Wfs-admin folder with css, js files. 11

e.     Wfs-frontend folder with css, js files. 11

2.    Basic sample for frontend. 11

a.     Required folders. 12

b.     Required css, javascript files for importing. 12

c.     Required html tag to display. 13

d.     Required script placing. 13

e.     Demo - Using Ajax to get config. 14

f.     Demo - Reading JSON file to get config. 15

g.     Demo - Using directed config. 15

h.     Understanding JSON data sample. 15

i.      Unserstanding the basic funciton of wfs_googleplay_thumbnail.js file. 18

V.    For advanced users. 18

1.    Using Backend/Admin. 18

a.     Required folders and files. 19

b.     Required css, javascript files for importing. 19

c.     Loading admin. 20

d.     Understanding the basic function of wfs_googleplay_thumbnail_admin.js file. 20

2.    Script workflow.. 21

a.     Default workflow.. 21

b.     Custom workflow for developers. 21

VI.       Licenses. 21

 

 


   I.        Product Description

This is an idea about using again GooglePlay Thumbnail in any website.

The users of this script are:

·         Normal users: who can use the script at website’s frontend

·         Developers: who want to use exist admin script to apply their backend

II.        Features

·         Using GooglePlay Thumbnail style

·         Responsive design

·         Using jQuery, jQuery-UI, Scroll-bar plug-in

·         Smart loading images and videos to redure bandwidth at the first loading

·         Frontend and Backend with sample code

·         Supporting editing parameters by visual, drag-drop, preview directy at Backend

·         Support browsers: IE 9/10, Firefox, Chrome, Safari, Opera

·         Script files are wrote with clean, clear and commented code, helps developers understand easily

III.        Interface Guide

1.   Frontend

a.    Frontend detail features

·         Displaying thumbnail of videos, images

·         Smart loading images and videos

·         Supporting scrollbar (to scroll thumbnail items)

·         Viewing video with special size, auto hide, auto play, fullscreen ..

·         Viewing fullsize image with clicking on image, next/previous button ..

·         Responsive design

b.   Preview

·         Responsive design:

·         First display: the height of thumbnail can be configured with a number

·         Video view: video displays at the center, when user clicks out video, video will be closed

·         Image view:

o   Fullscreen with 100% height:

 

o   Width specific height value:

2.   Backend

a.    Backend detail features

·         Ajax loading, updating

·         Responsive design

·         Drag-drop item to order

·         Image, video preview directly

·         Smart notification for Saving, Deleting, Selecting …

·         Add / Update / Delete button work with client data, support preview directly

·         Save button saves data to server

·         Setting include:

o   General: change name, thumbnail height, maximum height when expanding. Beside that, user can view the changed thumbnail directly.

o   Video: each video has embed link, thumbnail image, width, height, autohide, autoplay option

o   Image: each image has thumbnail/small image, large image

b.   Preview

·         Responsive design

·         General setting

 

·         Video: editing and preview directly

·         Image

·         Drag-Drop to order

o   Order video:

 

o   Order images:

IV.        Quick Setup

1.   Understanding source files

·         _ex : folder contains js, css, php (for ajax) and other files that are used for admin and frontend

·         Assets: folder contains sample images

·         Config: folder contains config file, here, it is JSON file

·         Wfs-admin: folder contains js, css to build admin page, helps user update the config file directy

·         Wfs-frontend: folder contain js, css to build the GooglePlay Thumbnail Script

·         Index.html: first preview about GooglePlay Thumbnail Script

·         Basic-sample.html: sample for basic user

·         Admin.html: demo for updating the config

a.    _ex folder with ajax, css, js files

 File

Note

Ajax/ajax.php

 PHP ajax file, help to load and update json file

Css/ perfect-scrollbar-0.4.4.min.css

 Css file for scrollbar

Js/ jquery.min.js

 Jquery file

Js/ jquery-ui.js

 Jquery UI file, help to drag-drop

Js/ perfect-scrollbar-0.4.4.with-mousewheel.min.js

 Javascrip file for scrollbar

Js/ wfs_ajax.js

 Javascript file, help to trasfer data to php ajax file

 

b.   Asset folder with image files

 File

Note

Images/ *.*

Demo files: Image files and video thumbnail image files

 

c.    Config folder with JSON files

 File

Note

wfs_googleplay_thumbnail.json

The json file, user will update config to this file

wfs_googleplay_thumbnail - Copy.json

The backup of json file

 

d.    Wfs-admin folder with css, js files

 File

Note

Css/wfs_googleplay_thumbnail_admin.css

Css file for admin

Js/wfs_googleplay_thumbnail_admin.js

Js file for general admin

Js/wfs_order_image_control.js

Js file, helps to order and responsive images

Js/wfs_other_control.js

Js file, helps to create basic controls

Js/wfs_tab_control.js

Js file, helps to create tab control

 

e.    Wfs-frontend folder with css, js files

 File

Note

Css/loading_dark_small.gif

Loading image (gif file), displays the delay when loading

Css/wfs_googleplay_thumbnail.css

CSS file for thumbnail

Js/wfs_googleplay_thumbnail.js

Js file, for thumbnail

 

2.   Basic sample for frontend

Please see full sample in basic-sample.html file.

a.    Required folders

b.   Required css, javascript files for importing

<link href="_ex/css/perfect-scrollbar-0.4.4.min.css" rel="stylesheet" />

<link href="wfs-frontend/css/wfs_googleplay_thumbnail.css" rel="Stylesheet" />

<script type="text/javascript" src="_ex/js/jquery.min.js"></script>

<script type="text/javascript" src="_ex/js/perfect-scrollbar-0.4.4.with-mousewheel.min.js"></script> 

<script type="text/javascript" src="_ex/js/wfs_ajax.js"></script>

<script type="text/javascript" src="wfs-frontend/js/wfs_googleplay_thumbnail.js"></script>

c.    Required html tag to display

d.    Required script placing

e.    Demo - Using Ajax to get config

$.ajax({

            type: 'POST',

            url: wfsAjax.ajaxPhpFile,

            data: {

                        wfs_type: 'get_config',

                        json_file: 'wfs_googleplay_thumbnail.json' // path with ajax file

            }

}).done(function(data)

{

            var options = $.parseJSON(data);

            wfsGooglePlayThumbnail.initWithOptions($('#detailSection'), options);      

});

 

f.     Demo - Reading JSON file to get config

$.getJSON('config/wfs_googleplay_thumbnail.json', function(data)

{

            var options = data;

            wfsGooglePlayThumbnail.initWithOptions($('#detailSection'), options);      

});

g.    Demo - Using directed config

var options =

{

            .// Please see the JSON sample at next category

}

wfsGooglePlayThumbnail.initWithOptions($('#detailSection02'), options);  

h.   Understanding JSON data sample

 Data/Field

Note

name

Name of config

thumbnailsHeight

The height of first display of thumbnail

expandPagesContainerMaxHeight

The height of thumbnail when user views image. It can be a number (px) or 100% (when value is blank)

videos

This is an array of videos

(video) src

The embed video link

(video) width

The width of iframe when user views video

(video) height

The height of iframe when user views video

(video) videoThubnail

The image url for video in thumbnail

(video) autoHide

True value => the video play bar and title will auto hide when user views video

(video) autoPlay

True value => the video is auto play when user views video

images

This is an array of images

(image) small

The image thumbnail url

(image) large

The large image url

 

Sample Options as JSON object

{

            "name": "WFS GooglePlay Thumbnail Script",    

            "width": "100%",           

            "thumbnailsHeight": "349px",     

            "expandPagesContainerMaxHeight": "",  

            "videos": [

                        {

                                    "src"     : "https://www.youtube.com/embed/IfwacJzy8o0?ps=play&amp;vq=large&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;autoplay=1",

                                    "width"  : "853px",

                                    "height": "480px",

                                    "videoThumbnail"           : "assets/images/video.jpg",

                                    "autoHide": true,

                                    "autoPlay": true

                        },                     

                        {

                                    "src"     : "https://www.youtube.com/embed/IfwacJzy8o0?ps=play&amp;vq=large&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;autoplay=1",

                                    "width"  : "600px",

                                    "height": "320px",

                                    "videoThumbnail"           : "assets/images/video.jpg",

                                    "autoHide": true,

                                    "autoPlay": true

                        }

            ],         

            "images": [

                        {

                                    "large": "assets/images/01.png",

                                    "small": "assets/images/01_002.png"

                        },

                        {

                                    "large": "assets/images/02.png",

                                    "small": "assets/images/02_002.png"

                        },

                        {

                                    "large": "assets/images/03.png",

                                    "small": "assets/images/03_002.png"

                        },

                        {

                                    "large": "assets/images/04.png",

                                    "small": "assets/images/04_002.png"

                        },

                        {

                                    "large": "assets/images/05.png",

                                    "small": "assets/images/05_002.png"

                        }

            ]          

}

 

i.     Unserstanding the basic funciton of wfs_googleplay_thumbnail.js file

initWithOptions: function(containerTag, options)

·         containerTag : the tag that will contain the thumbnail

·         options : JSON object => this object can be load by three ways in ‘Loading script’

·         => This function helps to append thumbnail to the containerTag  

  V.        For advanced users

1.   Using Backend/Admin

Please see full sample in admin.html file.

a.    Required folders and files

Please use all folders  ‘source’ folder of the package.

b.   Required css, javascript files for importing

<!-- common -->

<script type="text/javascript" src="_ex/js/jquery.min.js"></script>

<script type="text/javascript" src="_ex/js/jquery-ui.js"></script>

<script type="text/javascript" src="_ex/js/wfs_ajax.js"></script>

 

<!-- for admin -->

<link href="wfs-admin/css/wfs_googleplay_thumbnail_admin.css" rel="Stylesheet" />

<script type="text/javascript" src="wfs-admin/js/wfs_order_image_control.js"></script>

<script type="text/javascript" src="wfs-admin/js/wfs_tab_control.js"></script>

<script type="text/javascript" src="wfs-admin/js/wfs_other_control.js"></script>

<script type="text/javascript" src="wfs-admin/js/wfs_googleplay_thumbnail_admin.js"></script>

 

<!-- for frontend preview -->

<link href="_ex/css/perfect-scrollbar-0.4.4.min.css" rel="stylesheet" />

<link href="wfs-frontend/css/wfs_googleplay_thumbnail.css" rel="Stylesheet" />

<script type="text/javascript" src="_ex/js/perfect-scrollbar-0.4.4.with-mousewheel.min.js"></script> 

<script type="text/javascript" src="wfs-frontend/js/wfs_googleplay_thumbnail.js"></script>

c.    Loading admin

<script>

            $(document).ready(function()

            {

                        wfsGooglePlayThumbnailAdmin.init($('#wfs_control_panel'), 'wfs_googleplay_thumbnail.json');

            });

</script>

d.    Understanding the basic function of wfs_googleplay_thumbnail_admin.js file

init: function(targetElement, jsonFile)

·         targetElement: the html tag that script will generate all admin tags in it

·         jsonFile: the JSON file path

·         => this function help to append all tags of admin page with existed events and user can use admin page without coding

 

2.   Script workflow

a.    Default workflow

 

 

 

 

 

 

 

 


By default way, all setting will be saved as JSON file.

b.   Custom workflow for developers

 

 

 

 

 

 

 

 

 


In custom way, developer can save JSON data in sql, then, they could read the data for frontend.

VI.        Licenses

·         Licenses of  http://codecanyon.net