Of course we all like Web Gallery Wizard Pro a lot! Perfect tool for showing off our photos. But what if you want to add video too?
Unfortunately there is no automatic solution for this within Web Gallery Wizard Pro. If you're looking for an automatic solution, try Shozam Web Gallery Generator Express or higher.
So, how can we add video to our pages generated by Web Gallery Wizard Pro? I present a solution that uses only freeware apps.
Step 1: create a web gallery and a new album or modify an existing album
Step 2: add the photos you want and add for every video you want to show in that album an extra (dummy) photo
E.g. if you want to add video1.avi and video2.avi, you add img_5001.jpg and img_5002 as dummy photos.
Step 3: follow the remaining steps within Web Gallery Wizard Pro
Do not upload to your ftp server yet
Step 4: download a flash player
The most widely used video format is flash. So we need a flash player. Download JW Player (www.longtailvideo.com)
Step 5: extract the player to your gallery
Create a folder in your gallery, e.g. Webgalleries/MyGallery/Video, and extract the files player.swf, yt.swf and swfobject.js into that folder.
Step 6: create thumbnails of your videos
You can use a freeware tool like Media Resizer (http://www.mediaresizer.com) for this. Rename the created thumbnails to the names of your dummy photos. E.g. rename thumbnail video1.jpg to img_5001.jpg and video2.jpg to img_5002.jpg.
Step 7: replace the htm files of the dummy photos
Now this is the tricky part. Following my examples there are two htm files for our dummy photos: img_5001.htm and img_5002.htm (placed in Webgalleries/MyGallery/Albums/Album1/). Open them in Notepad, delete the text and copy the code at the bottom of this post into the files. Then replace the name of the video file, the name of the thumbnail and the description of the video with your own.
If you want to alter the players functions, see http://www.longtailvideo.com/support/jw-player-setup-wizard.
Step 8: create flash video
To create flash video download a video converter, e.g. SUPER (http://erightsoft.podzone.net/GetFile.php?SUPERsetup.exe)
Install SUPER and open the program. Right-click in the window and add all your videos. In the left corner select swf/flash and in the right corner mp3. Choose for video scale as a minimum 320x230 or NoChange. Choose the same Frame Speed as the original files (click twice on one of the added video files). A bitrate of 700 is usually sufficient. For audio choose as a miminum 11025 Hz, 1 Channel and a bitrate of 64 kpbs.
Now click on Encode.
Step 9: move the videos and thumbnails
Move the videos to a seperate folder, e.g. Webgalleries/MyGallery/Video/Clips.
Move the thumbnails (created in step 6) to the thumbnail folder of your album, e.g.
Webgalleries/MyGallery/Albums/Album1/Thumbs, replacing the already
created thumbnails with the same name.
Step 10: upload your files
Use the upload function within Web Gallery Wizard Pro to upload the files to your ftp server
If not all the files are uploaded (e.g. the video folder), use a stand alone ftp client like SmartFTP (http://www.smartftp.com/)
CODE:
<!-- Example code for videos in Web Gallery Wizard Pro
The code below is automatically generated for photo pages
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Gallery Wizard - </title><meta name="DESCRIPTION" content="Web page generated with Web Gallery Wizard PRO 1.5"></meta><meta name="KEYWORDS" content="Web gallery, web album, photo gallery, photo album, online album, online gallery, online photos, web generator, album generator, gallery generator, share photos, share photo" /><meta name="ROBOTS" content="ALL" /><meta name="WGW-EFFECTS" content="ON" /><meta http-equiv="imagetoolbar" content="no" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=1)" />
<script language="javascript" src="../../Site/script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../Site/ssIEx.css" title="IEx" />
<script language="javascript" src="../../Site/ThemeScript.js" type="text/javascript"></script>
</head>
<body bgcolor="#666666" text="#999999" link="#CCCCCC" vlink="#CCCCCC" alink="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="WGW-3000-body" onload="MM_preloadImages('../../Site/images/WGW_Home_f2.gif','../../Site/images/WGW_Next_f2.gif','../../Site/images/WGW_Prev_f2.gif','../../Site/images/WGW_Enlarge_f2.gif');CheckSlideShow();"><table border="0" cellpadding="0" cellspacing="0" class="WGW-3000-table"><tr align="right"><td class="WGW-3100-td">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="WGW-3110-table"><tr><td class="WGW-3111-td"><p class="WGW-3111-p"><img src="../../Site/images/WGW_SlidePlay.gif" name="SlideShowPlay" width="62" height="19" border="0" id="SlideShowPlay" align="absmiddle" class="GekHidden" onclick="SlideShow()" onmouseout="SlideShowMouseOut()" onmouseover="SlideShowMouseOver()" /></p></td><td class="WGW-3112-tdNav"><img src="../../Site/images/WGW-Prev-Border.gif" /><img name="WGW_Prev" src="../../Site/images/WGW_Prev.gif" border="0" onMouseOver="this.style.cursor='hand';MM_swapImage('WGW_Prev','','../../Site/images/WGW_Prev_f2.gif',1)" onMouseOut="this.style.cursor='default';MM_swapImgRestore()" alt="" onClick="NavigateImage(-1)" /><a href="../../index.htm" target="_parent" onMouseOver="MM_swapImage('WGW_Home','','../../Site/images/WGW_Home_f2.gif',1)" onMouseOut="MM_swapImgRestore()"><img name="WGW_Home" src="../../Site/images/WGW_Home.gif" alt="" border="0" /></a><img name="WGW_Next" src="../../Site/images/WGW_Next.gif" border="0" onMouseOver="this.style.cursor='hand';MM_swapImage('WGW_Next','','../../Site/images/WGW_Next_f2.gif',1)" onMouseOut="this.style.cursor='default';MM_swapImgRestore()" alt="" onClick="NavigateImage(1)" /><img src="../../Site/images/WGW-Next-Border.gif" /></td><td class="WGW-3113-td" /><p class="WGW-3113-p"> </p></tr></table></td></tr>
<tr><td class="WGW-3200-tdExt">
<table border="0" align="center" cellpadding="0" cellspacing="0" class="WGW-3200-tableMid"><tr><td class="WGW-3210-tdInt">
<!-- Below the extra code for video pages. This example uses the free JW Player.
Tp setup the player see http://www.longtailvideo.com/support/jw-player-setup-wizard
-->
<p id="preview">JavaScript is turned off or you use an old version of Adobe Flash Player. <a href="http://www.adobe.com/go/getflashplayer/" target="_blank" onmousedown="urchinTracker('/Events/VideoWatch/GetFlash');">Download the newest version of Flash Player (uncheck Google Toobar!).</a></p>
<script type="text/javascript" src="../../Video/swfobject.js"></script>
<script type="text/javascript">
var s1 = new SWFObject("../../Video/player.swf","player","470","320","9");
s1.addParam("allowfullscreen","true");
s1.addParam("allowscriptaccess","always");
<!-- CHANGE FILENAME OF VIDEO AND IT'S THUMBNAIL. Be ware: path is relative to location of Player!
-->
s1.addParam("flashvars","file=Clips/video1.avi.FLV&image=/../Albums/Album1/Thumb/img_5001.jpg&autostart=true&fullscreen=true&stretching=fill");
s1.write("preview");
</script>
</table>
<!-- CHANGE DESCRIPTION OF VIDEO (first row is optional)
-->
<tr><td class="WGW-3300-td"><p class="WGW-3300-p">My first video</p></td></tr>
</body></html>
<!-- This part of the automatically generated code is not used for video:
<img id="MainImage" border="0" class="WGW-3210-img" src="Large/img_5001.jpg"></img></td></tr>
</table></td></tr><tr><td class="WGW-3300-td"><p class="WGW-3300-p">img_5001.jpg</p></td></tr></table></body></html>
-->
Enjoy! Arie (still a trial licence user, but very enthusiastic!)