Video Gallery DZS

Created: 03/04/2016
Author: Digital Zoom Studio
Twitter: http://twitter.com/
Facebook: http://facebook.com/dzs
Support - via item comments
Thank you for purchasing my component. If you have any questions that are beyond the scope of this help file, you can ask them in the Item Discussions.

Zoom Progress Bars Intro - top

Zoom Progress Bars is the perfect tool to create custom progress bars to your wishing .

WordPress ZoomTabs Features

Other Great Plugins

Credits

 

 


Installation - top

All you have to do for installing on your site (ie. yoursite.com) is copy the contents of the /source folder to a folder (ie. yourfolder) on your site via ftp ( with filezilla ) or any other upload service. You can then access your contents via http://yoursite.com/yourfolder. You can access the builder at http://yoursite.com/yourfolder/builder.php.

 


Integrating in your project - top

In order to install this component in your html page you need to:

  1. unpack the download package, open the source folder
  2. copy the folder /dzsprogressbars and /fontawesome ( if you want fontawesome icons ) into your project folder
  3. open your html file and insert this inside your <head> tag

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel='stylesheet' type="text/css" href="fontawesome/font-awesome.min.css"/>
    <link rel='stylesheet' type="text/css" href="dzsprogressbars/dzsprogressbars.css"/>
    <script src="dzsprogressbars/dzsprogressbars.js" type="text/javascript"></script>

    note: if you already have included jQuery in your document, do not include it again, jQuery should only be included once

  4. insert this inside your <body> tag where you want the progress bars to appear

    <div class="dzs-progress-bar auto-init" style="width:100%;height:auto;margin-top:0px;margin-left:0px;margin-right:0px;margin-bottom:0px;" data-animprops='{"animation_time":"2000","maxperc":"76","maxnr":"100","initon":"scroll"}'><div style="position: relative; width: 100%; height: auto; top: 5px; left: 0px; right: auto; bottom: auto; margin: 0px; background-color: transparent; color: rgb(71, 30, 0); border-radius: 0px; border: 0px none; opacity: 1; font-size: 15px;" data-animprops='{}' class="progress-bars-item progress-bars-item--text" data-type="text">HTML5</div><div data-animprops='{}' style="position: relative; width: 100%; height: 9px; top: 0px; left: 0px; right: auto; bottom: auto; margin: 15px 0px 0px; background-color: rgb(214, 217, 219); color: rgb(60, 1, 1); border-radius: 0px; border: 0px none; opacity: 1; font-size: 12px;" class="progress-bars-item progress-bars-item--rect" data-type="rect"></div><div style="position: absolute; width: 50px; height: auto; top: 5px; right: auto; bottom: auto; margin: 0px 0px 0px -25px; background-color: rgb(17, 17, 17); color: rgb(255, 255, 255); border-radius: 0px; border: 0px none; font-size: 10px;" data-animprops='{"left":"{{perc}}","opacity":"{{perc100-decimal}}"}' class="progress-bars-item progress-bars-item--text padding5 small-arrow-bot" data-type="text"><div style="text-align: center;" data-mce-style="text-align: center;">{{perc}}</div></div><div data-animprops='{"width":"{{perc}}"}' style="position: absolute; height: 10px; top: auto; left: 0px; right: auto; bottom: 0px; margin: 0px; background-color: #55acee; color: rgb(255, 255, 255); border-radius: 0px; border: 0px none; opacity: 1; font-size: 10px;" class="progress-bars-item progress-bars-item--rect" data-type="rect"></div></div>

  5. this is just an example output, get your output done by the Builder and paste the output in your document - example where to find the output in the picture below
  6. All done!

 


Customise It - top

 

Several examples are included in the package, both in the index.html and in the builder so you can quick start your editing. You can have variables that are replaced dinamically while the progress bars animate. Might be overwhelming to understand them all but you can search the examples for easily understanding. A cheatsheet can be found below:

 

The Settings
{{perc}}
outputs the current percentage, for exaample if the progress is at 47% it will output 47%
{{perc-decimal}}
outputs the current percentage in decimal form, for example if the progress is at 47% it will output 0.47
{{perc100-decimal}}
it's the same as perc-decimal but the difference is it will go up until 1 even if the Percent is set to lower then 100%
{{center}}
it will center the element, currently available only for the Top property
{{percmaxnr}}
outputs the current number relative the percent, you set the number in the <strong>Animation Number</strong> field.

 
How to use the builder

You can create multiple skins and save them via the included builder.

How to use special font on the progress bars text

Just write this in your html file

<style>
.dzs-progress-bar{
font-family: "Open Sans", sans-sarif;
font-weight: 300;
}
</style>

 



FAQ - top

 

What's the difference between jQuery(document).ready and jQuery(window).load?

When you want to manipulate pictures - ie: you depend on their size - like a ken burns slider or scroller does, it's best to use jQuery(window).load because that executes the code in it AFTER all the images and content has loaded. For everything else, there is jQuery(document).read -which only waits for the html to be parsed corectly & all elements formed.

The builder does not save.

Make sure the db/ folder has 0755 permissions.

 


Developer Tips - top

Recommended Programs

You can generally use any text editing software [ like notepad ] to edit content/code but this is what I recommend:

SASS

If you are a developer you will notice there are some .scss files included too. This is the language for a css preprocessor which makes a developer's life easier. This is optional but if you want to try it here is the site.