Resolved issue 0000807: New slideshow features

git-svn-id: http://piwigo.org/svn/trunk@2218 68402e56-0260-453c-a942-63ccdbb3a9ee

14 files changed, 130 insertions, 80 deletions

diff --git a/template/yoga/icon/dec_period.png b/template/yoga/icon/dec_period.png
new file mode 100644
index 000000000..1e2425e78
--- /dev/null
+++ b/template/yoga/icon/dec_period.png
diff --git a/template/yoga/icon/dec_period_unactive.png b/template/yoga/icon/dec_period_unactive.png
new file mode 100644
index 000000000..1df2f1bc3
--- /dev/null
+++ b/template/yoga/icon/dec_period_unactive.png
diff --git a/template/yoga/icon/inc_period.png b/template/yoga/icon/inc_period.png
new file mode 100644
index 000000000..c750a9dfc
--- /dev/null
+++ b/template/yoga/icon/inc_period.png
diff --git a/template/yoga/icon/inc_period_unactive.png b/template/yoga/icon/inc_period_unactive.png
new file mode 100644
index 000000000..ac1c7ca03
--- /dev/null
+++ b/template/yoga/icon/inc_period_unactive.png
diff --git a/template/yoga/icon/pause.png b/template/yoga/icon/pause.png
new file mode 100644
index 000000000..6a3928c51
--- /dev/null
+++ b/template/yoga/icon/pause.png
diff --git a/template/yoga/icon/play.png b/template/yoga/icon/play.png
new file mode 100644
index 000000000..dfde7e96a
--- /dev/null
+++ b/template/yoga/icon/play.png
diff --git a/template/yoga/icon/slideshow.png b/template/yoga/icon/slideshow.png
index 455d73fdf..0d5c80713 100644
--- a/template/yoga/icon/slideshow.png
+++ b/template/yoga/icon/slideshow.png
diff --git a/template/yoga/icon/start_repeat.png b/template/yoga/icon/start_repeat.png
new file mode 100644
index 000000000..74272979e
--- /dev/null
+++ b/template/yoga/icon/start_repeat.png
diff --git a/template/yoga/icon/stop_repeat.png b/template/yoga/icon/stop_repeat.png
new file mode 100644
index 000000000..f1cc1b564
--- /dev/null
+++ b/template/yoga/icon/stop_repeat.png
diff --git a/template/yoga/icon/stop_slideshow.png b/template/yoga/icon/stop_slideshow.png
new file mode 100644
index 000000000..120466a0b
--- /dev/null
+++ b/template/yoga/icon/stop_slideshow.png
diff --git a/template/yoga/index.tpl b/template/yoga/index.tpl
index 534031493..a388d904b 100644
--- a/template/yoga/index.tpl
+++ b/template/yoga/index.tpl
@@ -27,6 +27,10 @@
       <li><a href="{search_rules.URL}" style="border:none;" onclick="popuphelp(this.href); return false;" title="{lang:Search rules}" rel="nofollow"><img src="{pwg_root}{themeconf:icon_dir}/search_rules.png" class="button" alt="(?)"></a></li>
       <!-- END search_rules -->
 
+      <!-- BEGIN slideshow -->
+      <li><a href="{slideshow.URL}" title="{lang:slideshow}"><img src="{pwg_root}{themeconf:icon_dir}/slideshow.png" class="button" alt="{lang:slideshow}"/></a></li>
+      <!-- END slideshow -->
+
       <!-- BEGIN mode_normal -->
       <li><a href="{mode_normal.URL}" title="{lang:mode_normal_hint}"><img src="{pwg_root}{themeconf:icon_dir}/normal_mode.png" class="button" alt="{lang:mode_normal_hint}"></a></li>
       <!-- END mode_normal -->
diff --git a/template/yoga/picture.tpl b/template/yoga/picture.tpl
index 7c5f34231..e5e62333e 100644
--- a/template/yoga/picture.tpl
+++ b/template/yoga/picture.tpl
@@ -30,55 +30,33 @@
 </div>
 
 <div id="imageToolBar">
-
-<div class="randomButtons">
-  <a href="{U_SLIDESHOW}" title="{lang:slideshow}" rel="nofollow"><img src="{pwg_root}{themeconf:icon_dir}/slideshow.png" class="button" alt="{lang:slideshow}"></a>
-  <a href="{U_METADATA}" title="{lang:picture_show_metadata}" rel="nofollow"><img src="{pwg_root}{themeconf:icon_dir}/metadata.png" class="button" alt="{lang:picture_show_metadata}"></a>
-<!-- BEGIN download -->
-  <a href="{download.U_DOWNLOAD}" title="{lang:download_hint}"><img src="{pwg_root}{themeconf:icon_dir}/save.png" class="button" alt="{lang:download}"></a>
-<!-- END download -->
-  {PLUGIN_PICTURE_ACTIONS}
-<!-- BEGIN favorite -->
-  <a href="{favorite.U_FAVORITE}" title="{favorite.FAVORITE_HINT}"><img src="{favorite.FAVORITE_IMG}" class="button" alt="{favorite.FAVORITE_ALT}"></a>
-<!-- END favorite -->
-<!-- BEGIN representative -->
-  <a href="{representative.URL}" title="{lang:set as category representative}"><img src="{pwg_root}{themeconf:icon_dir}/representative.png" class="button" alt="{lang:representative}"></a>
-<!-- END representative -->
-<!-- BEGIN admin -->
-  <a href="{U_ADMIN}" title="{lang:link_info_image}"><img src="{pwg_root}{themeconf:icon_dir}/preferences.png" class="button" alt="{lang:link_info_image}"></a>
-<!-- END admin -->
-<!-- BEGIN caddie -->
-  <a href="{caddie.URL}" title="{lang:add to caddie}"><img src="{pwg_root}{themeconf:icon_dir}/caddie_add.png" class="button" alt="{lang:caddie}"></a>
-<!-- END caddie -->
-</div>
-
-<div class="navButtons">
-<!-- BEGIN last -->
-  <a class="navButton prev" href="{last.U_IMG}" title="{lang:last_page} : {last.TITLE_IMG}" rel="last"><img src="{pwg_root}{themeconf:icon_dir}/last.png" class="button" alt="{lang:last_page}"></a>
-<!-- END last -->
-<!-- BEGIN last_unactive -->
-  <a class="navButton prev"><img src="{pwg_root}{themeconf:icon_dir}/last_unactive.png" class="button" alt=""></a>
-<!-- END last_unactive -->
-<!-- BEGIN next -->
-  <a class="navButton next" href="{next.U_IMG}" title="{lang:next_page} : {next.TITLE_IMG}" rel="next"><img src="{pwg_root}{themeconf:icon_dir}/right.png" class="button" alt="{lang:next_page}"></a>
-<!-- END next -->
-<!-- BEGIN next_unactive -->
-  <a class="navButton next"><img src="{pwg_root}{themeconf:icon_dir}/right_unactive.png" class="button" alt=""></a>
-<!-- END next_unactive -->
-  <a class="navButton up" href="{U_UP}" title="{lang:thumbnails}" rel="up"><img src="{pwg_root}{themeconf:icon_dir}/up.png" class="button" alt="{lang:thumbnails}"></a>
-<!-- BEGIN previous -->
-  <a class="navButton prev" href="{previous.U_IMG}" title="{lang:previous_page} : {previous.TITLE_IMG}" rel="prev"><img src="{pwg_root}{themeconf:icon_dir}/left.png" class="button" alt="{lang:previous_page}"></a>
-<!-- END previous -->
-<!-- BEGIN previous_unactive -->
-  <a class="navButton prev"><img src="{pwg_root}{themeconf:icon_dir}/left_unactive.png" class="button" alt=""></a>
-<!-- END previous_unactive -->
-<!-- BEGIN first -->
-  <a class="navButton prev" href="{first.U_IMG}" title="{lang:first_page} : {first.TITLE_IMG}" rel="first"><img src="{pwg_root}{themeconf:icon_dir}/first.png" class="button" alt="{lang:first_page}"></a>
-<!-- END first -->
-<!-- BEGIN first_unactive -->
-  <a class="navButton prev"><img src="{pwg_root}{themeconf:icon_dir}/first_unactive.png" class="button" alt=""></a>
-<!-- END first_unactive -->
-</div>
+  <div class="randomButtons">
+    <!-- BEGIN start_slideshow -->
+      <a href="{start_slideshow.U_SLIDESHOW}" title="{lang:slideshow}" rel="nofollow"><img src="{pwg_root}{themeconf:icon_dir}/slideshow.png" class="button" alt="{lang:slideshow}"></a>
+    <!-- END start_slideshow -->
+    <!-- BEGIN stop_slideshow -->
+      <a href="{stop_slideshow.U_SLIDESHOW}" title="{lang:slideshow_stop}" rel="nofollow"><img src="{pwg_root}{themeconf:icon_dir}/stop_slideshow.png" class="button" alt="{lang:slideshow_stop}"></a>
+    <!-- END stop_slideshow -->
+      <a href="{U_METADATA}" title="{lang:picture_show_metadata}" rel="nofollow"><img src="{pwg_root}{themeconf:icon_dir}/metadata.png" class="button" alt="{lang:picture_show_metadata}"></a>
+    <!-- BEGIN download -->
+      <a href="{download.U_DOWNLOAD}" title="{lang:download_hint}"><img src="{pwg_root}{themeconf:icon_dir}/save.png" class="button" alt="{lang:download}"></a>
+    <!-- END download -->
+      {PLUGIN_PICTURE_ACTIONS}
+    <!-- BEGIN favorite -->
+      <a href="{favorite.U_FAVORITE}" title="{favorite.FAVORITE_HINT}"><img src="{favorite.FAVORITE_IMG}" class="button" alt="{favorite.FAVORITE_ALT}"></a>
+    <!-- END favorite -->
+    <!-- BEGIN representative -->
+      <a href="{representative.URL}" title="{lang:set as category representative}"><img src="{pwg_root}{themeconf:icon_dir}/representative.png" class="button" alt="{lang:representative}"></a>
+    <!-- END representative -->
+    <!-- BEGIN admin -->
+      <a href="{U_ADMIN}" title="{lang:link_info_image}"><img src="{pwg_root}{themeconf:icon_dir}/preferences.png" class="button" alt="{lang:link_info_image}"></a>
+    <!-- END admin -->
+    <!-- BEGIN caddie -->
+      <a href="{caddie.URL}" title="{lang:add to caddie}"><img src="{pwg_root}{themeconf:icon_dir}/caddie_add.png" class="button" alt="{lang:caddie}"></a>
+    <!-- END caddie -->
+  </div>
+  {NAV_BUTTONS}
+  </div>
 
 </div> <!-- imageToolBar -->
 
@@ -228,31 +206,3 @@
 </div>
 <!-- END comments -->
 
-<script type="text/javascript">
-function keyboardNavigation(e)
-{
-	if(!e) var e=window.event;
-	if (e.altKey) return true;
-	var target = e.target || e.srcElement;
-	if (target && target.type) return true; //an input editable element
-	var keyCode=e.keyCode || e.which;
-	var docElem = document.documentElement;
-	switch(keyCode) {
-<!-- BEGIN next -->
-		case 63235: case 39: if (e.ctrlKey || docElem.scrollLeft==docElem.scrollWidth-docElem.clientWidth ){window.location="{next.U_IMG}".replace( "&amp;", "&" ); return false; } break;
-<!-- END next -->
-<!-- BEGIN previous -->
-		case 63234: case 37: if (e.ctrlKey || docElem.scrollLeft==0){ window.location="{previous.U_IMG}".replace("&amp;","&"); return false; } break;
-<!-- END previous -->
-<!-- BEGIN first -->
-		/*Home*/case 36: if (e.ctrlKey){window.location="{first.U_IMG}".replace("&amp;","&"); return false; } break;
-<!-- END first -->
-<!-- BEGIN last -->
-		/*End*/case 35: if (e.ctrlKey){window.location="{last.U_IMG}".replace("&amp;","&"); return false; } break;
-<!-- END last -->
-		/*Up*/case 38: if (e.ctrlKey){window.location="{U_UP}".replace("&amp;","&"); return false; } break;
-	}
-	return true;
-}
-document.onkeydown=keyboardNavigation;
-</script>
\ No newline at end of file
diff --git a/template/yoga/picture_nav_buttons.tpl b/template/yoga/picture_nav_buttons.tpl
new file mode 100644
index 000000000..a25e2639f
--- /dev/null
+++ b/template/yoga/picture_nav_buttons.tpl
@@ -0,0 +1,91 @@
+<!-- $Id$ -->
+  <div class="navButtons">
+  <!-- BEGIN last -->
+    <a class="navButton prev" href="{last.U_IMG}" title="{lang:last_page} : {last.TITLE_IMG}" rel="last"><img src="{pwg_root}{themeconf:icon_dir}/last.png" class="button" alt="{lang:last_page}"></a>
+  <!-- END last -->
+  <!-- BEGIN last_unactive -->
+    <a class="navButton prev"><img src="{pwg_root}{themeconf:icon_dir}/last_unactive.png" class="button" alt=""></a>
+  <!-- END last_unactive -->
+  <!-- BEGIN next -->
+    <a class="navButton next" href="{next.U_IMG}" title="{lang:next_page} : {next.TITLE_IMG}" rel="next"><img src="{pwg_root}{themeconf:icon_dir}/right.png" class="button" alt="{lang:next_page}"></a>
+  <!-- END next -->
+  <!-- BEGIN next_unactive -->
+    <a class="navButton next"><img src="{pwg_root}{themeconf:icon_dir}/right_unactive.png" class="button" alt=""></a>
+  <!-- END next_unactive -->
+  <!-- BEGIN start_play -->
+    <a class="navButton play" href="{start_play.U_IMG}" title="{lang:start_play}" rel="play"><img src="{pwg_root}{themeconf:icon_dir}/play.png" class="button" alt="{lang:start_play}"></a>
+  <!-- END start_play -->
+  <!-- BEGIN stop_play -->
+    <a class="navButton play" href="{stop_play.U_IMG}" title="{lang:stop_play}" rel="play"><img src="{pwg_root}{themeconf:icon_dir}/pause.png" class="button" alt="{lang:stop_play}"></a>
+  <!-- END stop_play -->
+  <!-- BEGIN thumbnails -->
+    <a class="navButton up" href="{thumbnails.U_UP}" title="{lang:thumbnails}" rel="up"><img src="{pwg_root}{themeconf:icon_dir}/up.png" class="button" alt="{lang:thumbnails}"></a>
+  <!-- END thumbnails -->
+  <!-- BEGIN previous -->
+    <a class="navButton prev" href="{previous.U_IMG}" title="{lang:previous_page} : {previous.TITLE_IMG}" rel="prev"><img src="{pwg_root}{themeconf:icon_dir}/left.png" class="button" alt="{lang:previous_page}"></a>
+  <!-- END previous -->
+  <!-- BEGIN previous_unactive -->
+    <a class="navButton prev"><img src="{pwg_root}{themeconf:icon_dir}/left_unactive.png" class="button" alt=""></a>
+  <!-- END previous_unactive -->
+  <!-- BEGIN first -->
+    <a class="navButton prev" href="{first.U_IMG}" title="{lang:first_page} : {first.TITLE_IMG}" rel="first"><img src="{pwg_root}{themeconf:icon_dir}/first.png" class="button" alt="{lang:first_page}"></a>
+  <!-- END first -->
+  <!-- BEGIN first_unactive -->
+    <a class="navButton prev"><img src="{pwg_root}{themeconf:icon_dir}/first_unactive.png" class="button" alt=""></a>
+  <!-- END first_unactive -->
+  <!-- BEGIN start_repeat -->
+    <a class="navButton repeat" href="{start_repeat.U_IMG}" title="{lang:start_repeat}" rel="repeat"><img src="{pwg_root}{themeconf:icon_dir}/start_repeat.png" class="button" alt="{lang:start_repeat}"></a>
+  <!-- END start_repeat -->
+  <!-- BEGIN stop_repeat -->
+    <a class="navButton repeat" href="{stop_repeat.U_IMG}" title="{lang:stop_repeat}" rel="repeat"><img src="{pwg_root}{themeconf:icon_dir}/stop_repeat.png" class="button" alt="{lang:stop_repeat}"></a>
+  <!-- END stop_repeat -->
+  <!-- BEGIN inc_period -->
+    <a class="navButton inc_period" href="{inc_period.U_IMG}" title="{lang:inc_period}" rel="repeat"><img src="{pwg_root}{themeconf:icon_dir}/inc_period.png" class="button" alt="{lang:inc_period}"></a>
+  <!-- END inc_period -->
+  <!-- BEGIN inc_period_unactive -->
+    <a class="navButton inc_period" <img src="{pwg_root}{themeconf:icon_dir}/inc_period_unactive.png" class="button" alt=""></a>
+  <!-- END inc_period_unactive -->
+  <!-- BEGIN dec_period -->
+    <a class="navButton dec_period" href="{dec_period.U_IMG}" title="{lang:dec_period}" rel="repeat"><img src="{pwg_root}{themeconf:icon_dir}/dec_period.png" class="button" alt="{lang:dec_period}"></a>
+  <!-- END dec_period -->
+  <!-- BEGIN dec_period_unactive -->
+    <a class="navButton dec_period" <img src="{pwg_root}{themeconf:icon_dir}/dec_period_unactive.png" class="button" alt=""></a>
+  <!-- END dec_period_unactive -->
+  </div>
+
+<script type="text/javascript">
+function keyboardNavigation(e)
+{
+  if(!e) var e=window.event;
+  if (e.altKey) return true;
+  var target = e.target || e.srcElement;
+  if (target && target.type) return true; //an input editable element
+  var keyCode=e.keyCode || e.which;
+  var docElem = document.documentElement;
+  switch(keyCode) {
+<!-- BEGIN next -->
+    case 63235: case 39: if (e.ctrlKey || docElem.scrollLeft==docElem.scrollWidth-docElem.clientWidth ){window.location="{next.U_IMG}".replace( "&amp;", "&" ); return false; } break;
+<!-- END next -->
+<!-- BEGIN previous -->
+    case 63234: case 37: if (e.ctrlKey || docElem.scrollLeft==0){ window.location="{previous.U_IMG}".replace("&amp;","&"); return false; } break;
+<!-- END previous -->
+<!-- BEGIN first -->
+    /*Home*/case 36: if (e.ctrlKey){window.location="{first.U_IMG}".replace("&amp;","&"); return false; } break;
+<!-- END first -->
+<!-- BEGIN last -->
+    /*End*/case 35: if (e.ctrlKey){window.location="{last.U_IMG}".replace("&amp;","&"); return false; } break;
+<!-- END last -->
+<!-- BEGIN thumbnails -->
+    /*Up*/case 38: if (e.ctrlKey){window.location="{thumbnails.U_UP}".replace("&amp;","&"); return false; } break;
+<!-- END thumbnails -->
+<!-- BEGIN start_play -->
+    /*Pause*/case 32: {window.location="{start_play.U_IMG}".replace("&amp;","&"); return false; } break;
+<!-- END start_play -->
+<!-- BEGIN stop_play -->
+    /*Play*/case 32: {window.location="{stop_play.U_IMG}".replace("&amp;","&"); return false; } break;
+<!-- END stop_play -->
+  }
+  return true;
+}
+document.onkeydown=keyboardNavigation;
+</script>
diff --git a/template/yoga/slideshow.tpl b/template/yoga/slideshow.tpl
index aef05a228..1be2c5a81 100644
--- a/template/yoga/slideshow.tpl
+++ b/template/yoga/slideshow.tpl
@@ -10,9 +10,14 @@
   <h2 class="showtitle">{TITLE}</h2>
   <!-- END title -->
 </div>
+
+<div id="imageToolBar">
+  {NAV_BUTTONS}
+</div>
+
 <div id="theImage">
   {ELEMENT_CONTENT}
-<!-- BEGIN legend -->
-<p class="showlegend">{legend.COMMENT_IMG}</p>
-<!-- END legend -->
+  <!-- BEGIN legend -->
+  <p class="showlegend">{legend.COMMENT_IMG}</p>
+  <!-- END legend -->
 </div>