diff options
| author | Tomas Bzatek <tbzatek@users.sourceforge.net> | 2016-04-03 17:15:05 +0200 |
|---|---|---|
| committer | Tomas Bzatek <tbzatek@users.sourceforge.net> | 2016-04-03 17:29:55 +0200 |
| commit | 654007b709d804767ab5be3bde3b134221a5b589 (patch) | |
| tree | 70ab1adf75d3f4c5cebcfdb44748b4ddec8c68c3 /templates/fluid/template_album.html | |
| parent | c8979f40106cc429c8125ce0f520f9470da5404c (diff) | |
| download | cataract-654007b709d804767ab5be3bde3b134221a5b589.tar.xz | |
New 'fluid' theme
Introducing a modern looking theme that changes gallery philosophy a bit.
Instead of having thumbnails on an album page and photos on separate pages
this new design brings emphasis on story telling. Viewer is advised to
go through the whole album sequentially, bringing atmosphere to the whole
set.
All photos are loaded within a single page and keyboard navigation via
left/right arrows is supposed to be used to switch the presentation
mode on.
Three photo sizes are supported now with the 'preview' size being the
default. High resolution size has been introduced for 2560x1440 screens
and larger.
Note that this template uses code from 3rd parties, see CREDITS for
details. I haven't been able to contact anyone behind the TheCodePlayer.com
project so licensing of the breadcrumbs might be an issue.
Diffstat (limited to 'templates/fluid/template_album.html')
| -rw-r--r-- | templates/fluid/template_album.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/templates/fluid/template_album.html b/templates/fluid/template_album.html new file mode 100644 index 0000000..0552074 --- /dev/null +++ b/templates/fluid/template_album.html @@ -0,0 +1,109 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> +<head profile="http://www.w3.org/2005/10/profile"> + <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> + <title>$(PAGE_TITLE)</title> +<!-- $(CGG_META_TAGS) --> +<!-- $(CGG_ATOM_FEED_TAGS) --> + <link href="$(TEMPLATES_PATH)styles.css" type="text/css" rel="stylesheet" media="screen, print" /> + <script type="text/javascript">var NUM_PHOTOS = $(TOTAL_ITEMS);</script> + <script type="text/javascript" src="$(TEMPLATES_PATH)scripts.js">onLoad();</script> +</head> +<body> + + +<!-- ## Navigation bar --> +<div class="navigation photostream-hide"> + <div class="navbar"> + <!-- $(BEGIN_NAV_BAR) --> + <!-- $(BEGIN_NAV_BAR_FIRST) --> + <a href="$(NAV_BAR_ELEM_LINK)" class="av" rel="home"><i class="fa fa-home"></i> <!-- $(NAV_BAR_ELEM_TITLE) --> </a> + <!-- $(END_NAV_BAR_FIRST) --> + <!-- $(BEGIN_NAV_BAR_ELEM) --> + <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a> + <!-- $(END_NAV_BAR_ELEM) --> + <!-- $(BEGIN_NAV_BAR_LAST) --> + <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a> + <!-- $(END_NAV_BAR_LAST) --> + <!-- $(BEGIN_NAV_BAR_CURRENT) --> + <span class="nav-current av"><!-- $(NAV_BAR_ELEM_TITLE) --></span> + <!-- $(END_NAV_BAR_CURRENT) --> + <!-- $(BEGIN_NAV_BAR_CURRENT_ROOT) --> + <span class="nav-current nav-root"><i class="fa fa-home"></i> <!-- $(NAV_BAR_ELEM_TITLE) --></span> + <!-- $(END_NAV_BAR_CURRENT_ROOT) --> + <!-- $(END_NAV_BAR) --> + </div> + <div class="nav-right"><!-- $(TOTAL_ITEMS) --> photos</div> +</div> + +<div class="content-wrapper"> +<div class="content"> + <div class="title photostream-hide"><!-- $(TITLE) --></div> + <div class="text photostream-hide"><!-- $(DESCRIPTION) --></div> + +<div class="photos photostream-hide"> + <!-- $(BEGIN_IMG_LIST) --> + <!-- $(BEGIN_LIST_PICTURE) --> + <div class="photo" id="photo-$(ITEM_INDEX)"> + <div class="position_marker" id="i$(ITEM_INDEX)"></div> + <img src="$(IMG_SRC)" width="$(IMG_SIZE_W)" height="$(IMG_SIZE_H)" alt="" id="$(value(BORDER_STYLE))"/> + <div class="photo-title"><!-- $(IMG_TITLE) --></div> + <a href="javascript: toggle_exif_visibility($(ITEM_INDEX));" class="exif-icon" id="exif_icon-$(ITEM_INDEX)" title="Show/hide metadata information"><i class="fa fa-info"></i></a> + <div class="photo-text" style="max-width: $(IMG_SIZE_W)px;"><!-- $(IMG_DESCRIPTION) --></div> + <div class="photo-exif" id="exif_table-$(ITEM_INDEX)"> + <div class="photo-exif-sub" style="max-width: $(IMG_SIZE_W)px;"> + <a href="#i$(ITEM_INDEX)"><span class="seg" title="Image reference link"><i class="fa fa-anchor"></i><!-- $(IMG_FILENAME) --></span></a> + <!-- $(ifdef(HAVE_EXIF)) --> + <span class="seg" title="Date and time"><i class="fa fa-calendar"></i><!-- $(get_exif_value_fixed("Exif.Photo.DateTimeOriginal")) --></span> + <span class="seg" title="Shutter speed and aperture number"><i class="fa fa-cog"></i><!-- $(get_exif_value_fixed("Exif.Photo.ExposureTime")) --> <!-- $(get_exif_value_fixed("Exif.Photo.FNumber")) --></span> + <span class="seg" title="Focal length"><i class="fa fa-sliders"></i><!-- $(get_exif_value_fixed("Exif.Photo.FocalLength")) --></span> + <span class="seg" title="ISO Speed setting"><i class="fa fa-film"></i>ISO <!-- $(get_exif_value_fixed("Exif.Photo.ISOSpeedRatings")) --></span> + <span class="seg" title="Camera model"><i class="fa fa-camera"></i><!-- $(get_exif_value_fixed("Exif.Image.Model")) --></span> + <!-- $(if (have_exif_key ("__disabled__Exif.CanonSi.CameraTemperature"))) --> + <span class="seg" title="Camera temperature"><i class="fa fa-cloud"></i><!-- $(get_exif_value_fixed("Exif.CanonSi.CameraTemperature")) --></span> + <!-- $(endif (have_exif_key ())) --> + <!-- $(endif(HAVE_EXIF)) --> + </div> + </div> + </div> + <br/> + <!-- $(END_LIST_PICTURE) --> + <!-- $(BEGIN_LIST_SEPARATOR) --> + <div class="separator" id="photo-$(ITEM_INDEX)-sep"><!-- $(LIST_SEPARATOR_TITLE) --></div> + <!-- $(END_LIST_SEPARATOR) --> + <!-- $(BEGIN_LIST_INTERSPACE) --> + <div class="interspace" id="photo-$(ITEM_INDEX)-ispc"><!-- $(LIST_INTERSPACE_TITLE) --></div> + <!-- $(END_LIST_INTERSPACE) --> + <!-- $(END_IMG_LIST) --> + + <!-- ## Footnote, also acts as a bottom border --> + <div class="footnote"><!-- $(FOOTNOTE) --></div> +</div> + + +</div> + +<!-- ## Buttons --> +<div class="buttons photostream-hide"> + <a href="index.html" title="Small size" class="size-button"><i class="fa fa-picture-o small <!-- $(ifdef(THEME_SIZE_PREVIEW)) -->active<!-- $(endif(THEME_SIZE_PREVIEW)) -->"></i></a> + <!-- $(if (have_album_image_size ("original"))) --> + <a href="index_big.html" title="Normal size" class="size-button"><i class="fa fa-picture-o <!-- $(ifdef(THEME_SIZE_BIG)) -->active<!-- $(endif(THEME_SIZE_BIG)) -->"></i></a> + <!-- $(endif (have_album_image_size ())) --> + <!-- $(if (have_album_image_size ("hires"))) --> + <a href="index_hires.html" title="Large size" class="size-button"><i class="fa fa-picture-o big <!-- $(ifdef(THEME_SIZE_HIRES)) -->active<!-- $(endif(THEME_SIZE_HIRES)) -->"></i></a> + <!-- $(endif (have_album_image_size ())) --> +</div> + +<a class="photostream-force-hide" id="photostream-close" href="javascript: cancel_photostream_mode();" title="Quit the photo stream mode"><i class="fa fa-times"></i></a> +<span class="photostream-force-hide" id="photostream-position-label">1 / <!-- $(TOTAL_ITEMS) --></span> + +<!-- ## Footer --> +<div class="footer photostream-hide"> + <hr /><!-- $(FOOTER) --> +</div> +</div> + + +</body> +</html> |