How to make Slideshow
[Japanese version is HERE
Slideshow is the automated display system on PC or HP, for photos taken by digital camera.
Simple photo viewer tool generally has a button for automated continueus display.
But too simple! And you can not use this tool on internet Web site.
So, you may want to have some tool, which can be used for local PC and internet Web site.
OK! I will introduce for you the tool, which will satisfy all these requirements.
1. Is there any good way to show a bunch of photos on my HP?
If you want to upload a bunch of photos on your HP, you may want to do it with something like Slideshow style.
Simpliest style will be like this. Sample01
2. Control Bar
Well done! But there is no control for display such as Start/Stop/Backward/Forward/Single Step/Resume.
So, you may want Control Bar for the show. Sample02
3. Enjoy music on background
You may also want to have background music for the Slideshow. Sample03
4. Music Control Bar
Yes. You may also want to have Control Bar for background music, which controls, such as,
Volume control/Mute/Start/Stop/Forward & Backward Skip.
But, sometimes it's not necessary to have 2 Control bars. You are right! There is an option for Control bar to display on screen.
The Slideshow Control bar Start/Stop button synchronously controls Audio bar Start/Stop button.
So, it's OK to have one. Sample04
Note: Under the Smart Phone/Tablet OS, even though "Auto play" is specified, it will not automatically start the music by default.
You need to start manually. Because of this fact, the control bar is mandatory.
5. Display time for each frame
Instead of fixed time of interval for changing frame, you may want to have a feature that can be set any time for individual frame.
For the above example, each frame interval was 1 second. Now dafault interval is set to 5 seconds,
and some frame now has 10 seconds. You can verify that the progres bar now has a proportional length for each frame. Sample05
6. Title and Credit frame
You may want to have Title frame in the beginning, and Credit frame at the end of show,
which will describe the nature of the show. Sample06
7. Synchronization with music and show
It is not always necessary to have a synchronization with the background music, but in the case of wedding celemony, for example,
it is nice to have the background music afanfare
synchronizes with the bride entrance from the door,
or the end of the show synchronizes with the end of music.
It is possible to do that with the use of interval time adjustment for frame, but this method is very cumbersome if the insertion
or deletion of the frame occurs. If you have several synchronization points, it almost impossible to maintain.
So, instead of using interval time for frame, assigment of the start time to the frame will cover this problem.
The tool provides the conversion method between interval/start time modes switching visvasa. Sample07
8. Comment and Date for each frame
You may want to have Comment and Date description text for each frame, not only on Title and Credit frame. Sample08
9. Text effect for Title/Comment/Date
You may need to have the ability to use various text effect feature such as Font/Color/Movement/Fade
for the Title/Comment/Date text. Sample09
：What is text effect
The following figure depicts all of the Slideshow supported effects
10. What about Zooming/Panning/Scrolling
This feature enables still image of photos to give movement and gives look and feel of a video movie, and animates. Sample10
：What is Pan/Zoom/Scroll
The following figure shows all the Slideshow supported features.
11. What about the transition effect between frame change
You may want the transition effect between frame change, and make the show fancy. Sample11
Microsoft IE (IE Document Mode up to Ver8) has 23 kinds of Reveal Transition, and Blend Transition supports.
: As Microsoft does not support these functions after IE8, this Slideshow now support the same functionality,
：What is Reveal Transition
The following figure shows all Slideshow supported effects.
The Transition is the image effect applied to the photos at the time of frame switching.
Note：You may using latest version of the browser, and not be able to see the effects.
Microsoft is discontinueing old proprietary features from latest IE version.
If we use HTA instead of HTML, it will OK. But, HTA file will not be launched from Internet directly,
which is the way of general setting. Therefore it is needed to launch from local.
For the convienience, sample11.zip is HERE. After clicking, please select ”OPEN”and then excute HTA locally.
Ref：What is HTA
Actualy, HTA file is same as of HTML with the diffence of file extension, the contents is same.
The HTA application is generaly used on local PC and/or corporate Intranet, and provided some privilege over HTML.
Therefore HTA will be able to do more than HTML, as far as security concerned.
That's why Internet direct execution is prohibited because of because of this reason.
12. Not only 3:4 sized frame, but what about HD(9:16) sized photo frame
You may want to have High Definition (9:16) frame. Demo1
13. Music File (.MP3) is not easy to use -Royality problem concerns
MP3 file is generally used for background music, but MP3 file may have royality.
You have no need to worry about the royality problem.
You can use the music which is published on YouTube.
We can find many YouTube, which is posted with using background music,
so we will play that Youtube underneath of the show and we can use only
the background audio music from that without using video portion. It is legal(?). Sample13
Note: Youtube control bar used to be displayed like this, but because of the recent Youtube UI change, displayed differently.
(Ref: Update3 comment)
14. Want to see other samples
The following example slideshow is using YouTube music for Flamenco dance with Guitar,
my hobby, Flamenco Guitar is here. Flamenco
Another sample is also here named "Four seasons in Japan" in Japanese text script. Demo2
By the way, "A story of young birds", which is used for this lesson, is a true story happened in my garden.
But, the story haven't finished yet. Every spring after they left my garden, they are re-visiting their old home.
I just don't know they are parent or children, but I know they are not the other birds, because they show me their
the special talent, which I used to teach them to catch the food on the air with jumping-fly, for the first day of the re-visit.
I added the part II of "A story of young birds" HERE
. Please enjoy the addendum.
15. Slideshow seems to have many options. Can I override the option parameter(s) at runtime
Yes. For example, the Audio control-bar or Slideshow control-bar display can be set ON/OFF,
or default duration timer for frame change can be set to different time.
All the options specified on uploaded Html file can be overrided at runtime.
This will be very convenient to re-use the uploaded site content for other purpose, such as,
embedding to Blog or other WEB site. Calling sequence format is like this; http://xyz.html#option2=0;1,option3=0;1.
Parameter(s) follows after # mark and can be set as many as you want with separating ',' (comma).
The following Slideshow is an iFrame embeded sample using Sample10.html,
with No Audio Control and Slideshow Autoplay is set to OFF.
This Slideshow is now waiting Start Resume Button or Single Step Forward Button to proceed next,
and the music is not auto-played.
16. Viola! I wanna use this
No need to download the "slideshow.js" file, though. As same as sample HTMLs on this page,
server will take care all of the show functions for you.
I'll show you the sample06.html. You can't see much coding here. HTML Sample-Sample06.html
Inside the ＜head＞ tag, there are 13 option parameters (speed to option9), which are possible to replace
at the excution time, if desired. Each line has a comment attached at the end of line and is self-explanatory.
The "data[n]=" lines are defining photo frames. The "data[n]=" line which does not have photo file name is displayed
with gray, and generally can be used for Title and Credit screens.
The text and image effect option parameters description is HERE
, but picturized figures on this page will be easier
. But, if you only want to use it,
you even no need to download "slideshow.js". You only need to insert one line in the body tag
as seen on the sample.
Then, you can enjoy the free maintenance from possible update and/or enhancement, automatically
17. More simple way
Some time, some people even don't know what Notepad is.
They have little knowledge about programming sense.
For those who don't have the ability, there is another simple way to achieve this goal,
only by clicking mouse button.
Microsoft is releasing, as you know, Windows Live Movie Maker
The Movie Maker is easy to make a slideshow, and once project is done, the tool I have developed,
Movie Maker to Slideshow Conversion Tool
, will convert to slideshow for you.
You can not upload Movie Maker itself to Internet without conversion to some video encoded format,
such as MP4. But video formatted file sometime becomes hundreds MB size, and will eatup most of your Web site space, at once.
For example, Sample12
, a 3 munites slideshow has about 2.3MB file size, but the video captured file size is 73.9MB,
about 32 times larger than original size.
For your reference, the MP4 version of this show is HERE.
Interested? You can download Movie Maker to Slideshow Conversion Tool - wlmp2html
Tool is quite simple and no manual will be required. But, the story that I happened to develop this tool
is written on my Blog HERE
. If you are interested with this tool, I will suggest you to read the article for this tool.
18. Future enhancement
Up tp HTML5, each Browser has different support fuctions, and different way of interpretations.
Even in same maker, different version have had an incomtatible problem and different interpretation.
All makers are trying to make compatible between Browsers with the use of HTML5, as a standard.
The new CSS3 or later CSS will standardize the Transition or Filer Effect.
I've tested slideshow with using Microsoft IE and Google Chrome, and internally I am checking Browser maker
difference and version's difference, and acting upon accordingly for compatibility, such as the case of
the Microsoft proprietary Transition and Filter Effect. Also, even in Microsoft IE, from IE9 began to take
HTML5 as a standard, and old proprietary API support is discouraged/discontinued.
In case of necessary, the Quirks Mode or explicit ＜meta http-equiv="X-UA-Compatible" content="IE=8"＞
compatibility declaration is used.
Update1： From the time of this initial development, Microsoft have released revised versions of
IE10, IE11, IE12(SPARTAN) and now the latest IE (Windows 10 SPARTAN) is discontinued to use
the Document Mode model, and the use of old version by ＜meta http-equiv="X-UA-Compatible" content="IE=n"＞
tag is going to be invalid, and trying to support only the latest standard of HTML5.
As W3C trying to standardize the CSS further, I will revise "slideshow.js" based on these activities
and will eliminate the legacy APIs.
Update2： Microsoft IE (up to Ver8) supports 23 kinds of Reveal Transition, and Blend Transition, and this
"slideshow.js" have used that functionality. But now updated to support these functions without using Microsoft proprietary APIs,
On the otherhand, as old IE versions do not support CSS3/HTML5, these functions are just disabled.
Update3： Because of the UI change in Youtube, the small window of video screen is now displayed on the same place of Control-bar.
To avoid this, 'no controls' option is recommended by setting option2="0;1";. But the inconvenient side effect of this setting is;
Under the Smart Phone/Tablet OS, even though "Auto play" is specified, it will not automatically start the music by default.
You need to start manually. Because of this fact, the control bar is mandatory.
© Kisozaemon, All rights reserved.