Table of Contents
DZS Video Gallery WordPress Plugin
Created: 27/02/2011
By: Digital Zoom Studio
Twitter: http://twitter.com/
Facebook: http://facebook.com/dzs
Support Forum: http://dzs.net/support/
Thank you for purchasing my component. If you have any questions that are beyond the scope of this help file, please feel free to apply for membership on the forum, it's the fastest way of support [ link to the left ] and post a thread about your question after your membership is validated.
Intro - top
DZS Video Gallery is the ultimate gallery for your videos. Its the only gallery that can display YouTube videos and videos from your server in the same container. It can be used as a portfolio or a video showcase. You choose. It is XML driven and only needs a simple text editor to be set up. It can be embedded in html ( just drag and drop with your favorite html editor ), can be used stand-alone and also can be integrated in your flash project very easy.
Features
- total freedom - customise buttons, activate scrollbar on/off, resize thumbs, everything is at your disposal with this gallery!
- full of choises - set up the gallery just by inputing your YouTube user/playlist in the �feed� tag of the xml file. all descriptions/titles/thumbs/videos will be feeded directly from YouTube so you won�t need to write anything other then that
- 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
- Just download the zip from your http://activeden.net/user/yourusername/downloads directory in a folder of your choosing.
- Then in your wordpress installation, in the Plugins panel, click Add New like in this picture:
- Then click Upload, and select the zip you have downloaded from CC. Then click Activate.
- Access the admin panel from the Settings panel
- Add a new gallery from the Add Slider button.
- Start cusomizing to your needs. Have fun!
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
- access / create your post / page
- insert this shortcode
into the post / page
[videogallery id="default"]
- replace default with the id you have set in the admin panel
- 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.
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"]
[vimeo id="2"]
[youtube id="L7ANahx7aF0"]
Import / Export Database -/- Gear Menu
backup database / import, export feature - keep your database safe and do regular backups via the Export Database feature included with this plugin.
use wordpress uploader - choose wheter or not uploads should be made with the wordpress basic uploader ( recommended: on )
embed prettyphoto - enable / disable prettyphoto ( recommended: on )
Designer Center
This will only work on the flash gallery at the momment. HTML5 Gallery output feature is being worked on. All you have to do to access it is click the Go to Designer Center button in the main admin. Make the changes and click save. The changes will be reflected in the Custom skin.
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
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.
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 about if I want a CMS / admin version [ no wordpress ] ?
Here is the admin version.
html5 gallery: 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
IE9, IE8 ( Flash ) & Safari : M4V -> http://handbrake.fr/
Chrome & Opera & Firefox : OGG-> http://video.online-convert.com/convert-to-ogg
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.
Developer Tips - top
This gallery provides source files ( in the source folder ) so if you are developer you can start cusmizing 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
- .xml – Notepad++
HTML5 Video Gallery
So let's explain the structure of the above so you can customize it to your needs.
The optional container & preloader
<div class="preloader"></div>
</div>
This is optional and represents the container of the gallery and the preloader ( recommended )
The video gallery container
<div id="vGallery" class="videogallery" style="width:638px; height:300px; opacity:0;">
</div>
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
<div class="vplayer-tobe" data-videoTitle='Big Buck Bunny' data-description='<img src="img/thumb.png" class="imgblock"/><div class="the-title">Big Buck Video</div>Here you can have a video description of your choosing.' data-sourcemp4='video/test.m4v' data-sourceogg='video/test.ogv'></div>
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
var videoplayersettings = {
autoplay : "off",
videoWidth : 500,
videoHeight : 300,
constrols_out_opacity : 0.9,
constrols_normal_opacity : 0.9,
design_scrubbarWidth:-201,
design_background_offsetw : 0
}
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
$('#vGallery').vGallery({
menuSpace:0,
randomise:"off",
autoplay :"off",
autoplayNext : "on",
menuitem_width:275,
menuitem_height:76,
menuitem_space:1,
menu_position:'right',
transition_type:"slideup",
design_skin: 'skin_default',
videoplayersettings : videoplayersettings
})
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
- duplicate skin_white.css to skin_custom.css for example
- import the skin_custom.css stylesheet in your html
- access skin_custom.css and replace all skin_white to skin_custom
- be crazy, with a little css knowladge ,the possibilities are endless
Digital Zoom Studio