border: 1px solid #888888;
border-collapse: collapse;
}
-}
+
+ #slider-1{
+ margin: 0 auto;
++}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$page_title}</title>
- <link href="{$template_path}/stylesheet.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="rpc.php?mode=init&client=all"></script>
- <script type="text/javascript" src="phpfspot.js"></script>
- <link rel="shortcut icon" href="resources/gpl_16.png" type="image/png" />
- <link rel="icon" href="resources/gpl_16.png" type="image/png" />
+ <link href="{$web_path}/{$template_path}/stylesheet.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="{$web_path}/rpc.php?mode=init&client=all"></script>
+ <script type="text/javascript" src="{$web_path}/phpfspot.js"></script>
+ <link rel="shortcut icon" href="{$web_path}/resources/gpl_16.png" type="image/png" />
+ <link rel="icon" href="{$web_path}/resources/gpl_16.png" type="image/png" />
{ if $use_lightbox }
- <script type="text/javascript" src="lightbox2/js/prototype.js"></script>
- <script type="text/javascript" src="lightbox2/js/scriptaculous.js?load=effects,builder"></script>
- <script type="text/javascript" src="lightbox2/js/lightbox.js"></script>
- <link rel="stylesheet" href="lightbox2/css/lightbox.css" type="text/css" media="screen" />
+ <script type="text/javascript" src="{$web_path}/lightbox2/js/prototype.js"></script>
+ <script type="text/javascript" src="{$web_path}/lightbox2/js/scriptaculous.js?load=effects,builder"></script>
+ <script type="text/javascript" src="{$web_path}/lightbox2/js/lightbox.js"></script>
+ <link rel="stylesheet" href="{$web_path}/lightbox2/css/lightbox.css" type="text/css" media="screen" />
{ /if }
{ if $use_autocomplete }
- <script src="{$web_path}/autosuggest/js/bsn.AutoSuggest_2.1.3_comp.js"></script>
- <script type="text/javascript" src="autosuggest/js/bsn.AutoSuggest_2.1.3_comp.js"></script>
- <link rel="stylesheet" href="autosuggest/css/autosuggest_inquisitor.css" type="text/css" media="screen" charset="utf-8" />
++ <script type="text/javascript" src="{$web_path}/autosuggest/js/bsn.AutoSuggest_2.1.3_comp.js"></script>
+ <link rel="stylesheet" href="{$web_path}/autosuggest/css/autosuggest_inquisitor.css" type="text/css" media="screen" charset="utf-8" />
{ /if }
</head>
<!-- loading -->
<div id="HTML_AJAX_LOADING">
- <img src="{$web_path}/resources/loading.gif" style="vertical-align: middle;" /> Loading...
- <img src="resources/loading.gif" style="vertical-align: middle;" alt="Loading..." /> Loading...
++ <img src="{$web_path}/resources/loading.gif" style="vertical-align: middle;" alt="Loading..." /> Loading...
</div>
<!-- top menu -->
<!-- content column -->
<div id="content" class="content">
- {include file="welcome.tpl"}
+ { $initial_content }
</div>
- </span>
+ </div>
{include file="footer.tpl"}
<!-- Photo Index -->
+
+<!-- Header - displays count of matched photos and some link's -->
+
<div class="header">
- <div style="float: left;">
+ <div class="subheader">
<b>Photo Index</b>
{if $searchfor }
{if $count == 1}
Results are limited to a date within {$from_date} to {$to_date}.
{/if}
</div>
- <div style="text-align: right">
+ <div class="textright">
{if $slideshow_link }
- <a href="{$slideshow_link}" title="Slideshow" target="_blank"><img src="resources/slideshow.png" /></a>
+ <a href="{$slideshow_link}" title="Slideshow" target="_blank"><img src="{$web_path}/resources/slideshow.png" /> Slideshow</a>
{/if}
{if $extern_link }
- <a href="{$extern_link}" title="Use this link to return to the current view"><img src="resources/link.png" /></a>
+ <a href="{$extern_link}" title="Use this link to return to the current view"><img src="{$web_path}/resources/link.png" /> External Link</a>
{/if}
{if $export_link }
- <a href="{$export_link}" target="_blank" title="this will open a new browser window where you can export this page in several formats"><img src="resources/export.png" /></a>
+ <a href="{$export_link}" target="_blank" title="this will open a new browser window where you can export this page in several formats"><img src="{$web_path}/resources/export.png" /> Export</a>
{/if}
{if $rss_link }
- <a href="{$rss_link}" target="_blank" title="RSS feed"><img src="resources/rss.png" /></a>
+ <a href="{$rss_link}" target="_blank" title="RSS feed"><img src="{$web_path}/resources/rss.png" /> RSS-Feed</a>
{/if}
</div>
</div>
+
+<!-- if result of a tag-search is displayed, show the selected tags
+ with some small pictures in a bar. -->
+
{ if $tag_result }
- <div id="whiteline" /></div>
+ <div class="tagresult"></div>
<div class="subheader">
- <div style="display: table-cell; vertical-align: middle;">
+ <div class="tagresulttags">
Tags:
</div>
{ $selected_tags }
</div>
<br class="clearboth" />
- <div style="width: 100%; margin-top: 20px;">
+ <div class="indexnavigation">
<!-- the right nav arrow -->
- <div style="float: right; width: 40px; margin-right: 0px; padding-right: 10px;">
+ <div class="indexnavigationright">
{ if $next_url == "" }
{ if $count != 0 }
- <img src="resources/arrow_right_gray.png" alt="last page reached" />
+ <img src="{$web_path}/resources/arrow_right_gray.png" alt="last page reached" />
{ /if }
{ else }
<a href="{$next_url}" id="next_link" title="click for the next page (right cursor)">
</div>
<!-- the left nav arrow -->
- <div style="float: left; margin: 0px; padding-left: 10px; width: 40px;">
+ <div class="indexnavigationleft">
{ if $previous_url == "" }
{ if $count != 0 }
- <img src="resources/arrow_left_gray.png" alt="first page reached" />
+ <img src="{$web_path}/resources/arrow_left_gray.png" alt="first page reached" />
{ /if }
{ else }
<a href="{$previous_url}" id="prev_link" title="click for the previous page (left cursor)">
- <span style="vertical-align: middle; text-decoration: underline;">
+ <span class="tags">
- <img src="resources/loupe.png" alt="loupe" />Search:
+ <img src="{$web_path}/resources/loupe.png" alt="loupe" />Search:
</span>
<form action="" onsubmit="startSearch(); return false;">
<div class="searchfor">
</tr>
<tr>
<td> </td>
- <td>{$from_date} <a href="javascript:showCalendar('from');" onclick="click(this);"><img src="{$web_path}/resources/date.png" id="frompic"/></a></td>
- <td>{$from_date} <a href="javascript:showCalendar('from');" onclick="click(this);"><img src="resources/date.png" id="frompic" alt="from" /></a></td>
++ <td>{$from_date} <a href="javascript:showCalendar('from');" onclick="click(this);"><img src="{$web_path}/resources/date.png" id="frompic" alt="from" /></a></td>
</tr>
<tr>
<td> </td>
<td>
- {$to_date} <a href="javascript:showCalendar('to');" onclick="click(this);"><img src="{$web_path}/resources/date.png" id="topic" /></a>
- {$to_date} <a href="javascript:showCalendar('to');" onclick="click(this);"><img src="resources/date.png" id="topic" alt="to" /></a>
++ {$to_date} <a href="javascript:showCalendar('to');" onclick="click(this);"><img src="{$web_path}/resources/date.png" id="topic" alt="to" /></a>
</td>
<td>
- <input type="image" class="submit" src="resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
+ <input type="image" class="submit" src="{$web_path}/resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
</td>
</tr>
<tr>
</div>
<div>
- <div id="photo_details" style="float: right; margin-top: 20px; margin-right: 20px;">
+ <div id="photo_details">
{ if $ExifMadeWith }
- <u><img src="resources/camera.png" alt="camera icon" /> Image taken with:</u><br />
+ <u><img src="{$web_path}/resources/camera.png" alt="camera icon" /> Image taken with:</u><br />
{$ExifMadeWith}<br />
{ /if }
{ if $ExifMadeOn }
<!-- the photo itself -->
- <div style="text-align: left; margin-top: 20px; margin-left: 20px;">
+ <div class="photo">
{ if $next_url == "" }
- <a href="javascript:showPhotoIndex();" onclick="click(this);" name="photo">
+ <a href="{$image_url}" onclick="showPhotoIndex(); return false;" onfocus="click(this);" name="photo">
{ else }
- <a href="{$next_url}" onclick="click(this);" title="click for the next photo" name="photo">
+ <a href="{$image_url}" onclick="{$next_url}; return false;" onfocus="click(this);" title="click for the next photo" name="photo">
{ /if }
<img src="{$image_url}" width="{$width}" height="{$height}" alt="{$image_filename}" name="photo" id="photo" />
</a>
<!-- navigation arrows -->
- <div style="margin-left: 20px;">
+ <div class="photonavigation">
{ if $previous_url == "" }
- <img src="resources/arrow_left_gray.png" alt="first photo reached" />
+ <img src="{$web_path}/resources/arrow_left_gray.png" alt="first photo reached" />
{ else }
- <a href="{$previous_url}" onclick="click(this);" title="click for the previous photo (left cursor)">
- <img src="resources/arrow_left.png" alt="previous photo" />
+ <a href="{$previous_url}" onfocus="click(this);" title="click for the previous photo (left cursor)">
+ <img src="{$web_path}/resources/arrow_left.png" alt="previous photo" />
</a>
{ /if }
- <a href="javascript:showPhotoIndex({$current_page}, {$current_img});" onclick="click(this);" title="click to go back to the index">
- <img src="resources/arrow_up.png" alt="photo index" />
+ <a href="javascript:showPhotoIndex({$current_page}, {$current_img});" onfocus="click(this);" title="click to go back to the index">
+ <img src="{$web_path}/resources/arrow_up.png" alt="photo index" />
</a>
{ if $next_url == "" }
- <img src="resources/arrow_right_gray.png" alt="last photo reached" />
+ <img src="{$web_path}/resources/arrow_right_gray.png" alt="last photo reached" />
{ else }
- <a href="{$next_url}" onclick="click(this);" title="click for the next photo (right cursor)">
- <img src="resources/arrow_right.png" alt="next photo" />
+ <a href="{$next_url}" onfocus="click(this);" title="click for the next photo (right cursor)">
+ <img src="{$web_path}/resources/arrow_right.png" alt="next photo" />
</a>
{ /if}
</div>
{include file="header.tpl"}
- <script type="text/javascript" src="slider/js/range.js"></script>
- <script type="text/javascript" src="slider/js/timer.js"></script>
- <script type="text/javascript" src="slider/js/slider.js"></script>
- <link type="text/css" rel="StyleSheet" href="slider/css/bluecurve/bluecurve.css" />
+ <script type="text/javascript" src="{$web_path}/slider/js/range.js"></script>
+ <script type="text/javascript" src="{$web_path}/slider/js/timer.js"></script>
+ <script type="text/javascript" src="{$web_path}/slider/js/slider.js"></script>
+ <link type="text/css" rel="StyleSheet" href="{$web_path}/slider/css/bluecurve/bluecurve.css" />
<body onload="startSlideShow();" class="slideshow">
<div id="slide_navigation">
- <a href="javascript:prevSlide();" onclick="click(this);" title="slive to previous photo"><img id="rew_ico" src="resources/32_rew.png" /></a>
- <a href="javascript:pauseSlideShow();" onclick="click(this);"><img id="pause_ico" src="resources/32_pause.png" /></a>
- <a href="javascript:startSlideShow();" onclick="click(this);" title="stop and revert slideshow"><img id="stop_ico" src="resources/32_stop.png" /></a>
- <a href="javascript:nextSlide();" onclick="click(this);" title="slide to next photo"><img id="fwd_ico" src="resources/32_fwd.png" /></a>
+ <a href="javascript:prevSlide();" onclick="click(this);" title="slive to previous photo"><img id="rew_ico" src="{$web_path}/resources/32_rew.png" /></a>
+ <a href="javascript:pauseSlideShow();" onclick="click(this);"><img id="pause_ico" src="{$web_path}/resources/32_pause.png" /></a>
+ <a href="javascript:startSlideShow();" onclick="click(this);" title="stop and revert slideshow"><img id="stop_ico" src="{$web_path}/resources/32_stop.png" /></a>
+ <a href="javascript:nextSlide();" onclick="click(this);" title="slide to next photo"><img id="fwd_ico" src="{$web_path}/resources/32_fwd.png" /></a>
</div>
- <div style="margin: 0 auto; padding: 10px;">
+ <div id="slide_close">
<a href="javascript:window.close();" title="click to close slideshow">
- <img id="slide_img" alt="slideshow_img" style="padding: 15px; background-color: #000000;" />
+ <img id="slide_img" alt="slideshow_img" />
</a>
</div>
<form>
- <span style="vertical-align: middle; text-decoration: underline;">
+ <span class="tags">
- <img src="resources/available_tags.png" alt="available tags" />Available Tags:
+ <img src="{$web_path}/resources/available_tags.png" alt="available tags" />Available Tags:
</span>
-<div id="available_tags"></div>
+<div id="available_tags">{ $preset_available_tags }</div>
- <span style="vertical-align: middle; text-decoration: underline;">
+ <span class="tags">
- <img src="resources/selected_tags.png" alt="selected tags" />Selected Tags:
+ <img src="{$web_path}/resources/selected_tags.png" alt="selected tags" />Selected Tags:
</span>
<input type="radio" name="condition" value="or" onclick="Tags('condition', this);" {if $current_condition == "or" } checked="checked" { /if } title="OR condition" />||
<!-- welcome -->
- <div class="header" style="text-align: left;">
+ <div class="header">
phpfspot welcomes you to a dynamic photo gallery for <a href="http://f-spot.org" target="_blank">F-Spot</a><br />
</div>
- <div style="padding: 10px; margin-left: 10px; margin-right: 10px;">
+ <div class="welcome">
- <div style="float: left; padding-right: 10px; width: 150px; text-align: center;">
- <img src="{$web_path}/phpfspot_img.php?idx=rand&width=150&i=1">
- </div>
- <div>
+ <p>
+ <span>
- <img src="phpfspot_img.php?idx=rand&width=150&i=1" alt="random image" />
++ <img src="{$web_path}/phpfspot_img.php?idx=rand&width=150&i=1" alt="random image" />
+ </span>
This application targets to provide an easy way, to presentate your F-Spot<br />
pictures in the web, in a way where you do not need any of the current<br />
web2.0 providers or setup complex apps like gallery
- </div>
+ </p>
- <br class="clearboth">
+ <br class="clearboth" />
- <div style="float: left; padding-right: 10px; width: 150px; text-align: center;">
- <img src="{$web_path}/phpfspot_img.php?idx=rand&width=150&i=2">
- </div>
- <div>
+ <p>
+ <span>
- <img src="phpfspot_img.php?idx=rand&width=150&i=2" alt="random image" />
++ <img src="{$web_path}/phpfspot_img.php?idx=rand&width=150&i=2" alt="random image" />
+ </span>
You can adapt this welcome page in the file "welcome.tpl" in the template<br />
directory of your current theme.
- </div>
+ </p>
- <br class="clearboth">
+ <br class="clearboth" />
- <div style="float: left; padding-right: 10px; width: 150px; text-align: center;">
- <img src="{$web_path}/phpfspot_img.php?idx=rand&width=150&i=3">
- </div>
- <div>
+ <p>
+ <span>
- <img src="phpfspot_img.php?idx=rand&width=150&i=3" alt="random image" />
++ <img src="{$web_path}/phpfspot_img.php?idx=rand&width=150&i=3" alt="random image" />
+ </span>
<a href="javascript:showPhotoIndex();">[ Click here to take a look at your photo index or select a tag from the list on the left ]</a>
- </div>
+ </p>
</div>
<!-- /welcome -->
projects / phpfspot.git / commitdiff
