Flash photo gallery (version 1 and version 2) was developed in 2005/2007 years and downloaded more than 100k times. Now in 2020 WordPress photo gallery is more popular and easy to create. I will explain why and how to add photo gallery with support of swipe navigation to WordPress website.
Why to remove any old flash galleries from your website? Once upon a time Flash was very popular and attractive to website developers and owners. It was used to make cool interactive websites and addictive games. During that time I created these galleries to better represent photo albums on internet with intuitive navigation, animations and attractive design.
Then iPhone and android phones come to the market and became popular. Android initially supported flash player. Others didn’t support it from them beginning. Later on all new mobile phones removed support for flash player and preferred to use new technologies aimed to enhance mobile phone usability and security. Flash couldn’t enter into mobile market and in 2017 Adobe announced that by the end of 2020 flash player will be discontinued.
Flash left its throne to HTML5, CSS3, WebGL and other new technologies. This page is kept as a reference to once very popular Flash photo gallery project which was downloaded more than 100K times. You can view details and statistics about them further down in this article.
Table of Contents
What to use instead of flash photo gallery?
Internet has grown very much since days when in order to have a website you need to hire a developer. Now it is easy to build websites by yourself. Popular hosing companies made it super easy to build a website with easy WordPress installation. WordPress currently powers more than 35% of all websites in the world.
How to add Photo Gallery to WordPress?
WordPress offers many features that can be used to enhance your web pages. One of them is image gallery. You can insert image gallery to any post or page by following these steps:
- Click on “Add Media” button on add/edit “page” or “post”
- Choose from existing images on your website or upload new ones
- Write description for each selected photo and choose gallery settings
- Click “Insert into page” button at the bottom
You can add as many galleries to the same page as you want. Make it intuitive and logical. No need to put all images in one gallery. Keep in mind mobile and desktop users when adding gallery. Check your web page in both devices and make sure thumbnails are visible and easy to understand when viewed on mobile.
Settings to consider when adding photo gallery in WordPress.
- Use single column gallery if you have few images. It looks good on mobile and no need to enlarge images for viewing.
- If you have more than 5 images in gallery then use 2-3 column gallery linking to full image files.
- Use maximum 4 columns if you have more than 20 images in gallery.
- Image width in gallery will decrease when number of columns increased. Images will be not recognizable on mobile device when there are more than 2-3 columns.
How to add swipe navigation to WordPress photo gallery?
WordPress image gallery can link images to full image files. To show full images with swipe and touch gestures install free WP Featherlight plugin. It will automatically open images in popup lightbox and add swipe navigation to view previous next photo. It also ads previous/next buttons for click navigation plus keyboard navigation for desktop users.
I like WP featherlight because of its minimalist design, no settings page, works out of the box when activated, does not leave any traces when uninstalled, does not try to sell pro version or any other services. It is one of my favorite plugins for viewing full size images on galleries and single images.
Why not to use custom gallery plugins?
Custom plugins may seem as right choice when creating image gallery on WordPress. They may offer two benefits over existing image gallery built into WordPress core.
- First: better presentation. Align and crop images to form different formations.
- Second: ability to use gallery in different places by just entering generated short code.
Disadvantage and headache that custom galleries may bring.
- Formatting your content that is usable only with their plugins. You will be held hostage by their plugin. You cannot leave them because your existing galleries will not work without it. They will show you some up sells to pro version, sale or suggestion of other plugins, showing ads in admin area. To leave them you will have to redo all galleries using code WordPress functionality.
- Custom plugin may be removed from repository for violation of rules.
- Custom plugin may be abandoned making your website sluggish or vulnerable to future attacks.
Some of these rules apply to all plugins that utilize custom post types or custom tables. Plugins should only enhance core functionality. They should not leave any traces, garbage or break your website, by removing content you created, when deactivated and uninstalled.
That is why it is always better to use photo gallery built into core of WordPress. You can enhance it lightboxes that do not change your initial content.
Free Flash Photo Gallery
Below you can see initial Flash photo gallery versions offered on this website. You can download them by clicking download button under related flash gallery version. Number of total download for each version is visible under download button.
Free Flash Photo Gallery 2
Free Flash Photo Gallery 2, 14919 downloads since 2007-06-10 — 727 KB
Flash Photo Gallery 2 Features
- It is FREE
- Dynamic Picture loading
- Easy to install and easy to change content
- Show pictures automatically with slideshow
- Integrate to any web site
- No server side scripting or database requirement
- Adds great look and functionality to your web site
- Easy to read XML based image captions and configuration file
- Ability to add custom links for each image
Flash Photo Album 2 uses code from following libraries.
- mc_tween2.as class (need to download seperately from source) by Zeh Fernando for animations
- XMLSA class (included in package) by Max Ziebell for converting xml to simple array.
How to use?
- Extract file contents
- Open
gallery.xmlfile and define mandotary values:- Location of images:
imagePath="album1/images/" - Location of thumbnails:
thumbPath="album1/thumbs/" - Each image name & caption. (caption is optional):
<image><filename href="http://www.google.com">img01.jpg</filename><caption>Caption 1</caption></image>
- Location of images:
- Customise gallery with extra options to suit your website
- Embed flash file to your page
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7" width="600" height="400"> <param name="movie" value="veppa_photo_album2.swf" /> <param name="quality" value="high" /> <embed src="veppa_photo_album2.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="600" height="400"></embed> </object>
Customize Photo Album 2
Extra attributes to customize flash photo album.
| Name | Value(s)(default in bold for multiple choice values) | Description |
| maxImageWidth | 400 | Big images max width. Will fit to this size if image is bigger. |
| maxImageHeight | 400 | Big images max height |
| imageFit | normal, crop | normal: If big image is bigger than maxImageWidth and maxImageHeight then will fit it in that box crop: will crop big image to fit the max image size attribute |
| textColor | 0x666666 | text color for image caption displayed at the bottom of the big image |
| frameColor | 0x666666 | Color for frame arounf images |
| frameWidth | 10 | Width of the frame around big image. Set to 0 for frameless image |
| thumbFrameWidth | 2 | Width of the frame around thumbnails. Set to 0 for frameless image |
| stagePadding | 10 | Padding around gallery. |
| thumbnailColumns | 2 | Number of visible columns for thumbnails |
| thumbnailRows | 4 | number of visible rows for thumbnails |
| navPosition | right,left,top,bottom,none | Defines where show thumbnails. If set to none thumbnails are not shown |
| imagePath | images/ | Path for images folder. |
| thumbPath | thumbs/ | Path for thumbnails folder |
| thumbWidth | 60 | With for each thumbnail. |
| thumbHeight | 60 | Height for each thumbnail. |
| autoPlay | false | Automatically play slideshow on load |
| slideInterval | 10 | time between slideshow shows next image in seconds |
| imageDefaultLink | none,self | none: no link on the image self: link to original image use <filename href=”http://www.google.com”>img01.jpg</filename> to link image to any other url. |
| thumbSpace | 5 | Space between thumbnails |
To load other xml file than default gallery.xml use extra parameter when embeding flash.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7" width="600" height="400"> <param name="movie" value="veppa_photo_album2.swf?xml=path/to/custom.xml" /> <param name="quality" value="high" /> <embed src="veppa_photo_album2.swf?xml=path/to/custom.xml" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="600" height="400"></embed> </object>
To make transparent background use wmode=transparent parameter:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7" width="600" height="400"> <param name="movie" value="veppa_photo_album2.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <embed src="veppa_photo_album2.swf" width="600" height="400" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed> </object>
Important: if you are using javascript to activate flash, like one that comes with dreamweaver AC_RunActiveContent.js, then you need to add extra variables there as
well.
AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7', 'width', '600', 'height', '400', 'src', 'veppa_photo_album2?xml=gallery_x.xml', 'quality', 'high', 'pluginspage', 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash', 'wmode', 'transparent', 'movie', 'veppa_photo_album2?xml=gallery_x.xml' );
Free Flash Photo Gallery (version 1)
This is first version of flash photo gallery. It is not much flexible and styling is static.
Free Flash Photo Gallery, 104850 downloads since 2005-08-08 — 1 MB
Features
- It is FREE
- Dynamic Picture loading
- Easy to install and easy to change content
- Show pictures automatically with slideshow
- Integrate to any web site
- No server side scripting or database requirement
- Adds great look and functionality to your web site
- Specify other configuration file like asp or php.
- Showing selected image on thumb and showing selected page of thumbs.
- Ability to show up to 1200 images. [added on 16.07.2006]
How to install Flash Photo Gallery
- Extract content of zip file.
- Modify
vfpg_config.txtfile. Define 3 variables. Each variable separate by ” & ” character .img_pathis specifying location of photos relative to html file that will display photo gallery. In this example it is photos/ folder. Leave empty if photos are in the same folder with swf file.tmb_pathis specifying location of thumbnail images. In this example it is tmb/ folder. Leave empty if thumbnail images are in the same folder with swf file.arr_imgsis holds data about each photo separated by “;” character specifying photo image file name, thumbnail image file name and description. Each value of photo is separated by comma “,” character.
img_path=photos/&tmb_path=tmb/&arr_imgs=tmb_01.jpg,image_01.jpg,Surfing;tmb_02.jpg,image_02.jpg,Snowboard;tmb_03.jpg,image_03.jpg,Wind surfing;tmb_04.jpg,image_04.jpg,Egypt;tmb_05.jpg,image_05.jpg,Paris;
- Upload photos , swf flash file and vfpg_config.txt configuration file to the internet. Configuration file must be in the same folder with page containing photo gallery.
- Add swf flash file to your page. Or copy fallowing code to the page where photo gallery will be displayed. (correct html code is in zip file)
- Use default configuration file (vfpg_config.txt)
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="700" height="450"> <param name="movie" value="path/to/swf/file/vfpg.swf"> <param name="quality" value="high"> <param name="wmode" value="transparent" /> <embed src="path/to/swf/file/vfpg.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="700" height="450" wmode="transparent"></embed> </object>
- Use other configuration file (ex: myconfig.php, myconfig.asp or myconfig.txt)
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="700" height="450"> <param name="movie" value="path/to/swf/file/vfpg.swf?config=myconfig.php"> <param name="quality" value="high"> <param name="wmode" value="transparent" /> <embed src="path/to/swf/file/vfpg.swf?config=myconfig.php" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="700" height="450" wmode="transparent"></embed> </object>
- Use default configuration file (vfpg_config.txt)
- Test your web page to see how it works.
License
“Free Flash Photo Gallery 2” and “Free Flash Photo Gallery” by veppa is licensed under a Creative Commons Attribution-Share Alike 3.0 License.
Flash Photo Gallery popularity statistics (2005-2020 data)
Looking at Google analytics data screenshot you can see that flash photo gallery popularity grew from 2006 to 2010. Reached its maximum of 5500 page views per month in January 2010. Then slowly declined until 2015 and flatten after that until 2020. Currently it is getting less than 5 page views per month.
I updated this article in September 2020 with instruction explaining how to start using WordPress image gallery instead of old flash galleries. If you are user of old flash gallery then please update your website and use more up to date galleries.
Conclusion
In order to make your existing business or personal website content accessible on popular desktop and mobile devices move your flash photo/image galleries to supported format. Remove any other flash content you have on your website as well.
On WordPress prefer using image gallery that is built into the core functionality. Do not use custom plugins to build photo gallery. Use plugins only to enhance existing image gallery functionality of wordpress.
If you are still using plain HTML or other not dynamic website, that was custom built several years ago, then consider moving to WordPress. It is very flexible and will give you power to update and create new content easily. Relevant and accessible content can empower your offering to reach wider audience on the internet.