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.
I will show you the required functions step by step with JavaScript tool developed by myself.


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
  
  Ref: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
  
  Ref: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.
  Note: As Microsoft does not support these functions after IE8, this Slideshow now support the same functionality,
  using CSS3 and Javascript. On the other hand, these functions are not supported for older IE versions by this Slideshow.
  
  Ref: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 have the knowledge about HTML nor Javascript. Only you need to do is to prepare the list of photos,
  music file, and the display option for each frame. That's it! All others are taken cared by JavaScript Library "slideshow.js".
  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
  to understand.
  
  If you want to use JavaScript Library "slideshow.js" It is HERE. 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 for free.
  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 from HERE.
  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,
  and acheived the same functionality with using CSS3/HTML5 and javascript. So, the latest IE or Google Chrome can enjoy this feature.
  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.


(C) Kisozaemon, 2016/06/12 Last Update.
inserted by FC2 system