DZS Video Gallery WordPress Plugin

Intro - top

DZS Video Gallery is the ultimate gallery for your videos.

Features

• total freedom - customise buttons, activate scrollbar on/off, resize thumbs, everything is at your disposal with this gallery!
• hybrid - it can be a video player / example in the preview
• reusable - for flash import: easy guide in the documentation, for html import: just copy/paste a single code, no plugins required
• extensive admin panel - admin panel with lots of options to make the gallery as customizable as possible, yet easy to use. Comes with a drag & drop html5 uploader too! And awesome functionality like drag & drop for items, duplicate galleries etc. to make your life easier while editing the gallery. You can setup unlimited number of galleries in the admin as well as put them in the content.
• backup database / import, export feature - keep your database safe and do regular backups via the Export Database feature included with this plugin.
• easy to install - install and get this plugin ready in less then three minutes. Add it to your content via a simple shortcode - [videogallery id="theidyousetintheadmin"] .
• auxiliary shortcodes - want to get a single video in your post without having to go through the admin ? The [video], [youtube] and [vimeo] shortcodes are built just for that. You just have to set the id for the youtube or vimeo shortcode, or the location for the video shortcode.

What do you get?

• video gallery WordPress plugin - get creative!
• sample data - the preview admin configuration which you can import in your own
• documentation - extensive documentation on how to install & configure the plugin
• psd files - gallery design psd included
• free updates - even if the value of this gallery increases with upcoming updates, you will get them for free
• free support - for installation via my forum -> http://digitalzoomstudio.net/support/ this is the fastest form of support

Installation - top

There are two ways to install the plugin

Method 1 - Direct WordPress Install

1. Just download the zip from your http://activeden.net/user/yourusername/downloads directory in a folder of your choosing.
2. Unzip it with your preffered unziping utility. On Windows, there can be some warnings while unziping. Those are nothing to worry about if they appear, they are just Mac OS X files that cannot be read by Windows.
3. Then in your wordpress installation, in the Plugins panel, click Add New like in this picture:
   
4. Then click Upload, and select the zip you have downloaded from CC. Then click Activate.
5. Access the admin panel from the Settings panel
6. 
7. Add a new gallery from the Add Slider button.
8. Start cusomizing to your needs. Have fun!
   

Method 2 - FTP Install

1. Just download the zip from your http://activeden.net/user/yourusername/downloads directory in a folder of your choosing.
2. Unzip it with your preffered unziping utility. On Windows, there can be some warnings while unziping. Those are nothing to worry about if they appear, they are just Mac OS X files that cannot be read by Windows.
3. Then, if the folder dzs-videogallery is zipped, unzip that too. Then copy the folder in the wp-content/plugins folder
4. Then in your wordpress installation, in the Plugins panel, locate DZS Video Gallery and click Activate
5. Access the admin panel from your Dashboard > Video Gallery
6. Add a new gallery from the Add Slider button.
7. Start cusomizing to your needs. Have fun!

_______________

You can now add video galleries you create in the Video Gallery Admin into any post or page. To make it simple a Shortcode Generator is included. You can access it via this button.

The first button is the shortcode genreator launcher and the second one ( the one with a plus ) ads a single video player to the page from the media gallery.

The first button launches the Shortcode Generator

_______________

Recommended: Some web servers don't have html5 video support yet. So if you notice your videos do not work ( and were properly uploaded ) an easy fix is to add this to to your .htaccess file:

AddType video/ogg ogv
AddType video/webm .webm
AddType video/mp4 .mp4

Adding to the Post / Page - top

1. access / create your post / page
2. insert this shortcode into the post / page
   [videogallery id="default"]
3. replace default with the id you have set in the admin panel
   
4. All done!

Special Features- top

Widget Included

The plugin also features an widget that you can add to any of your sidebars. It will appeare as Video Gallery in your Appearence > Widgets page.

The widget can be configured by Title and ID - the gallery which ID's it holds is still configured from the DZS Video Gallery admin in Settings menu.

Replace JW Player

You have the option to drop the JW Player plugin and replace it with this one. [jwplayer] shortcodes will get rendered by DZS Video Gallery just fine.

Just enable the option in Video Gallery > Settings

Auxiliary Shortcodes

auxiliary shortcodes - want to get a single video in your post without having to go through the admin ? The [video], [youtube] and [vimeo] shortcodes are built just for that. You just have to set the id for the youtube or vimeo shortcode, or the location for the video shortcode.

Examples:

[video source="http://thelocation/ofthevideo.mp4"]

[vimeo id="2"]

[youtube id="L7ANahx7aF0"]

Player Configs for Auxiliary Shortcodes

You can have a player config for auxiliary shortcodes via the config attribute. You set player configs inside Video Gallery > Video Player Configs.

Examples:

[video source="http://thelocation/ofthevideo.mp4" config="player1"]

[vimeo id="2" config="player2"]

Import / Export Database -/- Gear Menu

note: if you have enabled external wp-content upload and want the files to be available in your media gallery, you can use a plugin like Add From Server to accomplish that

Admin Menu Explained

slider

The main division in the admin panel, sliders are independent to each other, each slider has it's own items and main settings, you can add new sliders via the Add Slider button underneath the table. Multiple slidesrs with different ids can be added into one page.

items

The items are divisions of a slider. They each have their own settings and preview image which show up if the item is an image. The top right button deletes the item and the bottom left duplicates the item.

extra: in the timeline slider there are 3 types of items ( see Images, Marks and Milestones section above )

dzs multi uploader

If you have a modern browser ( and you should ) - you can use it's full power to bring you accesibility and easy uploading. Just drag and drop your images ( can be multiple ) and they will automatically added as image items.

Database Select

In the top area you will see a button stating the curent database. You can click on it and it will render a list of databases you have created to write galleries in. You can create new databases for galleries by writing a name for your new database in the lat item of the select database container. Once you have created your gallery in the database you can insert in the content via

Note: if you have many galleries, it is recommeded to distribute them accross multiple databases. So if one crashes, the other ones are safe.

Designer Center

All you have to do to access it is click the Designer Center button in the main admin. Make the changes and click save. The changes will be reflected in the Custom skin.

9Gag.tv example

The gallery settings for 9gag.tv examples are menu position set to right and navigation type set to scroller. Also the html code underneath the gallery is

Have One Gallery with Categories

In this case, you would need to create each category as a video gallery in the admin. Then you just write this:

main, main2 and main3 are the galleries defined in the admin which represent the categories.

Open Gallery in Lightbox

Just write this

wehre id is the id of the gallery. You can have any html content instead of open

Open Links Gallery

This will create a html5 history gallery which changes the url based on the video you select in the gallery. To create this you only need to write this shortcode

The ids attribute represents posts IDs you will pull in the gallery - separated by the "," character . Note that all the posts included this exact same shortcode with the same attributes for the function to work right. The source attribute represents the source of the video and the type attribute, it's type- normal / youtube / vimeo / audio - so if the type is youtube then the source attribute needs to have the value of the youtube video ID .

The gallery uses ajax to pull content from the other posts, the ajax primarely gets the other post's video element, but you may want other content pulled too, like the post content or title. All you need to do is write the ids ( # ) or classes ( . ) of the dom elements separated by a , inside the settings_ajax_extradivs attribute.

All the options here:

Feed From Property

The gallery can feed items either from manually input - by clicking the blue plus sign and adding items.

Either from YouTube user channel. You just need the channel username in the YouTube User field to make it work.

Either from a YouTube playlist. All you have to do to find the ID is access your YouTube account and go to the Playlists section. Create a new playlist or select one of your already created ones. The link should look like this - http://www.youtube.com/playlist?list=PLADC18FE37410D250&feature=plcp - the id is ADC18FE37410D250 - never include the PL part too if it's there at the beggining.

Either from a Vimeo user channel. If you go to a user profile for example - https://vimeo.com/user9682578 - the is the number after the user part in this case - 9682578

How to Setup Subtitle for an Item

You can find subtitle field for each item under the Appearance field

It's best to have the subitle in .html format ( security issues ) .

The subtitle must be formatted like this ( raw text ) :

2

00:01:04,073 --> 00:01:08,076

<i>Lorem Ipsum Set Amet</i>

3

00:01:08,077 --> 00:01:10,379

<i>Lorem Ipsum Jr.</i>

4

00:01:10,680 --> 00:01:14,684

<b>Lorem</b>

Localization

From update 4.1 the plugin supports localization. You can read more about it here

The process to translate the plugin is fairly easy:

1. download poedit
2. go to the plugin folder ( wp-content/plugins/dzs-videogallery or in the package you receive from CC ) to the languages folder
3. duplicate default.po and rename the dupe to dzsvg-{region}_{language}.po -> for example for Spain / Spanish it's dzsvg-es_ES.po you can find the format for each language in the link above
4. open the newly renamed file in poedit - do the changes and save - a .mo file with the same name will be created - that will be the translation file

How to stream videos from Amazon S3

Multiple of our clients have been successful in the set up of Amazon S3 with the DZS WP Video Gallery. We do not have a Amazon S3 account, but I suspect you just copy your .mp4 file there and get the link to that in the Source field of the video gallery item.

CodeCanyon, DZS Video Gallery WordPress - How to setup multiple cover photos

How to Create Your Own Gallery

The process is straightover, but we'll explain it here to make sure no one confuses any step. To create your own gallery, you just need to click the Add Gallery button.

Then, you will see in the table on top, a new gallery with the id default has been created. The next step is to click the Edit button refering to that gallery.

Now, all the settings of your new gallery will appear in the left, and the items of the gallery in the right.

The first step, is to edit the ID of the gallery to a more unique name then default, then you can edit any settings you will customize, and add as many items as you wish via the add button.

This plugin stores data in the WordPress database in a field 'dzsvg_items' inside 'wp_options'.

Then it's easy to add it to any post / page via this simple shortcode [videogallery id="theidyouset"]

Pagination

In the shortcode generator you have options for paginating via pages, "infinite scroll" or a "load more" button.

FAQ - top

You can check this link for a list of popular questions. Other questions you might have:

How do I make my special characters appear ( for example french accents ) that do not show up ?

You need to choose the Skin to all characters or custom.

How to set up Video Gallery with Vimeo API ?

Go to this link - https://developer.vimeo.com/apps - login and click the Create a new APP button

You need the oAuth2 details

Enter these in your WP Dashboard > Video Gallery > Settings > Vimeo Options ( Client Id, Client Secret, Access Token)

Important: the Access Token must be generated

What is an youtube ID?

Take this movie for example - http://www.youtube.com/watch?v=UXLvR6ZaZk4 . The youtube ID is just this part: UXLvR6ZaZk4

How to embed videos from Dailymotion, Videogamer.com, wistia.com or other video sites

First, note that you can embed any video from a portal that provides a iframe embed. You just need to set the width and height to 100% in the embed code you copy from their site. We'll provide examples for these 3 video portals. The bolded part is the id of the video, so if you copy the embed code from here, you should check that according to your video.

videogamer.com

wistia.com

videogamer.com

How about if I want a CMS / admin version [ no wordpress ] ?

Here is the admin version.

How do I make my video properly encoded to use whitin the gallery ?

You need your movie converted to two formats in order to make sure the html5 video plays in all browsers.

Browser support & recommended encoding program

We recomend using Handbrake ( open-source ) for generating the mp4 file from your video file. We made a screenshot of some sample settings that we tested to work on iOS, Android, Safari, Chrome. See below:

Then for the ogv file, you can use an online service called Video-online-convert . You just have to upload the resulted mp4 and it will process it and offer a ogv download. That easy.

IE9, IE8 ( Flash ) & Safari : MP4 / M4V

Chrome & Opera & Firefox : OGG / OGV

html5 gallery: 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.

How to setup a gallery that feeds from multiple galleries

The settings of the gallery will go from the first gallery, and the rest of the galleries will only feed items.

I want the video to fill the container / I don't want the black bars top and bottom of the video

We have a special property for this called responsive ratio Find it here

You can just set it to detect for most self-hosted videos, but it might not work for YouTube. For YouTube you must manually calculate this responsive ratio. This is calculated height / width You need to measure the visible area of the video

and input the result in the field ( ie. 0.5 for 1600 x 800 measurements )

How to replicate this page - Video Gallery with Lightbox ( http://zoomthe.me/themedemo-dzsvg/16-2/ )

This is the code you need to input in the WordPress Text Editor ( html )

How to replicate example from http://zoomthe.me/themedemo-dzsvg/sample-page/ ( youtube playlist example )

First, this is a 2/3 + 1/3 column layout and a 1/1 column underneath. This can be done manually or if you have a page builder like visual composer, or a page builder in your theme.

What you need to do is setup a new gallery and in the Navigation Style, set it to none, because we will have no navigation inside the gallery but it will be outside. That said, we need to link to the outside gallery. Scroll down to Outer Parts and set Second Con, Outer Navigation and Outer Navigation, Show Video Author to On.

Then in the first 2/3 container you need to enter

In the right 1/3 container enter

In the 1/1 container enter

That would be all. Of course, note that these containers are separted from each other. can be inserted anywhere in your page.

Also, if you don't have Visual Composer or a page building plugin, this is a code:

How to setup custom skin for player ?

First, You need to go to Video Gallery > Designer Center , and setup your skin as you wish

Then you need to go to Video Gallery > Video Player Configs, and for the configuration you are using, you need to change the skin to skin_custom

Developer Tips / advanced usage - top

This gallery provides source files ( in the source folder ) so if you are developer you can start customizing it.

Recommended Programs

You can generally use any text editing software to edit most content/code, but this is what I recommend:

• .zip – Normally you could just right click and extract to a folder of choice [ on both Mac and Windows ]
• .html - Notepad++
• .js - Notepad++
• .as - Notepad++
• .fla - Flash CS5

HTML5 Video Gallery

So let's explain the structure of the above so you can customize it to your needs.

The optional container & preloader

This is optional and represents the container of the gallery and the preloader ( recommended )

The video gallery container

This is the main gallery contianer, you add gallery items inside. You can also modify size directly from the style attribute. Opacity is optional.

The video gallery item

This is gallery item. Add as many as you wish inside the videogallery container.

Customisable parameters

data-videoTitle - optional - the title that appears in the top left of the video.

data-description - optional - title and description of the video that appears in the menu item of the glalery - html accepted

data-sourcemp4 - location of the mp4 format of the video ( or m4v )

data-sourceogg - location of the ogg format of the video ( or ogv )

data-sourcewebm - location of the webm format of the video

data-sourceflash - location of the mp4 format of the video ( or m4v or flv or H.264 .mov )

Javascript Video Player settings

Both the gallery and video player are highly customizable.

autoplay - only matters if you are using it independent of the gallery - autoplay video on / off

videoWidth / videoHeight - only matters if you are using it independent of the gallery - video player size

constrols_out_opacity - controls opacity when video player is not focused

constrols_normal_opacity - controls opacity when video player is focused

design_scrubbarWidth - only for skin customization purposes - scrubbar width offset

design_background_offsetw- only for skin customization purposes - background width offset

Javascript Video Gallery settings

Both the gallery and video player are highly customizable.

menuSpace - space between the menu and video player

menuitem_width / menuitem_height - the menu item size

menuitem_space - the space between menu items

autoplay - autoplay the first video on / off

autoplayNext - autoplay the next video on/off

randomise - randomise video gallery items

menu_position - the menu position - right / left / up / down / none

transition_type - choose between 'fade' and 'slideup'

design_skin - choose between 'skin_default' or make your own following the instructions from bellow

videoplayersettings - the video player settings object

design_scrubbarWidth - only for skin customization purposes - scrubbar width offset

design_background_offsetw- only for skin customization purposes - background width offset

Make your own skin

1. duplicate skin_white.css to skin_custom.css for example
2. import the skin_custom.css stylesheet in your html
3. access skin_custom.css and replace all skin_white to skin_custom
4. be crazy, with a little css knowladge ,the possibilities are endless

Digital Zoom Studio

Go To Table of Contents