Tutorial how to create FLV videogallery in Phoca Gallery (cleanest approach I found yet) by pelma
Seems long and complicated, but it isn't at all. Try it, it's fun.
Tested on:
- Joomla 1.5.14
- Phoca Gallery 2.5.5
- AllVideos reloaded 1.2.6
1. Download AllVideos Reloaded and install
2. Create the folders videos and audio in images/stories in your Joomla! installation - as described in AllVideos Helpscreen
(via FTP or Joomla Media Manager, depending on how you want to upload your videos - I used FTP)
3. Upload your FLV-videos to images/stories/videos
4. Create 1 JPG-thumbnail for each video with paintshop or similar. Or use any existing pictures you have.
5. In Phocagallery create a new Category e.g. Videos and upload your thumbnails to this category.
6. Create a new menu item in any Joomla! menu:
- Menu item type: Phoca Gallery - Phoca Gallery Category Layout
- Select your new video category in Parameters (Basic).
- Change the folowing settings in Parameters (Component):
- Detail View Settings
- Detail Window: Modal Popup box. Do not use "Modal Popup box (image only)" !!!
- Images and Windows Size Settings
- Front Detail Window Width: Width of your videos + 20 e.g. 420
- Front Detail Window Height: Height of your videos + 20 e.g. 340
7. Test your gallery (videos not showing yet. You'll just see the thumbnails in popup window)
Important: Select your gallery by means of your freshly created menuitem,
in order to override the Phocagallery defaultparameters.
Now comes the fun! We will use the Youtube-method to show your videos.
8. In Phocagallery backend, open the detail of your first video-thumbnail
9. In the field Video Code (YouTube): paste the following code:
<object data="https://www.yourdomain.com/subfolder/plugins/content/avreloaded/mediaplayer.swf" style="width: 400px; height: 300px;" type="application/x-shockwave-flash"> <param value="https://www.yourdomain.com/subfolder/plugins/content/avreloaded/mediaplayer.swf" name="movie"/> <param value="high" name="quality"/> <param value="transparent" name="wmode"/> <param value="#010101" name="bgcolor"/> <param value="false" name="autoplay"/> <param value="true" name="allowfullscreen"/> <param value="always" name="allowscriptaccess"/> <param value="file=https://www.yourdomain.com/subfolder/images/stories/videos/yourfile.flv&image=https://www.yourdomain.com/subfolder/images/stories/videos/yourpicture.jpg&autostart=false&fullscreen=true" name="flashvars"/> </object>
Replace everywhere in the code:
- subfolder by the name of the subfolder (if you have one) of your Joomla! installation
- yourdomain.com by the name of your domain
- yourvideo.flv by the name of your video.
10. Save all.
11. Try this video in your frontend gallery (as described in 7.). From now on the popup window should show the video instead of the thumbnail.
You can adjust the code e.g. you can change autostart=true to autostart=false if you don't want the video to play automatically.
HTH and enjoy.
If you encounter some problems with this, please post your reply here including:
- your code you put into the field Video Code (YouTube)
- a link to your gallery which don't work.