- one image.html skeleton, used for fullscreen images
- any number of resource files these html pages depend on
- (images, css..)
+ (images, css..), normally they should all go in the 'root'
+ subdirectory, so that they are only copied in the root
+ directory of the final webalbum and avoid wasting too much
+ hosting space; they can be referred from the skeleton by
+ prepending ~~pathtobase~~, which will be the relative path
+ to the root directory of the final webalbum
- a metadata/parameters.rb file holding information about images
sizes that will fit the best the html pages layout
It would be best if the screenshots would show the same contents,
so just send me your theme if you create a new one and I'll do
the screenshots.
-
end
end
+def substitute_pathtobase(html, xmldir)
+ path = ''
+ location = xmldir
+ while location.parent.name == 'dir'
+ path = '../' + path
+ location = location.parent
+ end
+ html.gsub!(/~~pathtobase~~/, path)
+end
+
def xmldir2destdir(xmldir)
return make_dest_filename(from_utf8(File.basename(xmldir.attributes['path'])))
end
if !$forgui
#- cleanup old images/videos, especially if this directory contained images/videos previously.
themestuff = Dir.entries("#{$FPATH}/themes/#{$theme}").
- find_all { |e| !%w(. .. skeleton_image.html skeleton_thumbnails.html skeleton_index.html metadata CVS).include?(e) }
+ find_all { |e| !%w(. .. skeleton_image.html skeleton_thumbnails.html skeleton_index.html metadata root CVS).include?(e) }
+ themestuff_root = Dir.entries("#{$FPATH}/themes/#{$theme}/root").
+ find_all { |e| !%w(. .. CVS).include?(e) }
if $mode != 'gen_config'
rightful_images = [ '.htaccess' ]
if xmldir.attributes['thumbnails-caption']
subdir = make_dest_filename(from_utf8(File.basename(child.attributes['path'])))
rightful_images << "thumbnails-#{subdir}.jpg"
}
- to_del = Dir.entries(dest_dir).find_all { |e| !File.directory?("#{dest_dir}/#{e}") && !rightful_images.include?(e) } - themestuff
+ to_del = Dir.entries(dest_dir).find_all { |e| !File.directory?("#{dest_dir}/#{e}") && !rightful_images.include?(e) } - themestuff - themestuff_root
if to_del.size > 0
system("rm -f " + to_del.collect { |e| "'#{dest_dir}/#{e}'" }.join(' '))
end
psys("cp '#{$FPATH}/themes/#{$theme}/#{entry}' '#{dest_dir}'")
end
}
+
+ #- copy any root-only resource file that goes with the theme (css, images..)
+ if xmldir.parent.name != 'dir'
+ themestuff_root.each { |entry|
+ if !File.exists?("#{dest_dir}/#{entry}")
+ psys("cp '#{$FPATH}/themes/#{$theme}/root/#{entry}' '#{dest_dir}'")
+ end
+ }
+ end
end
next
end
if !$forgui
themestuff = Dir.entries("#{$FPATH}/themes/#{$theme}").
- find_all { |e| !%w(. .. skeleton_image.html skeleton_thumbnails.html skeleton_index.html metadata CVS).include?(e) }
-
+ find_all { |e| !%w(. .. skeleton_image.html skeleton_thumbnails.html skeleton_index.html metadata root CVS).include?(e) }
+ themestuff_root = Dir.entries("#{$FPATH}/themes/#{$theme}/root").
+ find_all { |e| !%w(. .. CVS).include?(e) }
+
#- cleanup old images/videos (for when removing elements or sizes)
all_elements = fullscreen_images.collect { |e| e[1] }.flatten.
concat(thumbnail_images.collect { |e| e[1] }.flatten).
concat(thumbnail_videos.collect { |e| e[1] }.flatten).
concat(videos).
push('.htaccess')
- to_del = Dir.entries(dest_dir).find_all { |e| !File.directory?("#{dest_dir}/#{e}") && !all_elements.include?(e) && e !~ /^thumbnails-\w+\.jpg/ } - themestuff
+ to_del = Dir.entries(dest_dir).find_all { |e| !File.directory?("#{dest_dir}/#{e}") && !all_elements.include?(e) && e !~ /^thumbnails-\w+\.jpg/ } - themestuff - themestuff_root
if to_del.size > 0
msg 3, _("\tcleaning up: #{to_del.join(', ')}")
system("rm -f " + to_del.collect { |e| "#{dest_dir}/#{e}" }.join(' '))
psys("cp '#{$FPATH}/themes/#{$theme}/#{entry}' '#{dest_dir}'")
end
}
-
+
+ #- copy any root-only resource file that goes with the theme (css, images..)
+ if xmldir.parent.name != 'dir'
+ themestuff_root.each { |entry|
+ if !File.exists?("#{dest_dir}/#{entry}")
+ psys("cp '#{$FPATH}/themes/#{$theme}/root/#{entry}' '#{dest_dir}'")
+ end
+ }
+ end
+
msg 3, _("\tgenerating HTML pages...")
#- fixup max per page
if $N_per_page && $N_per_row
i.gsub!(/~~multiplepagesstuff~~/, mstuff.gsub('%nojs', ''))
end
substitute_html_sizes(i, sizeobj, 'thumbnails', "-#{pagecount}")
+ substitute_pathtobase(i, xmldir)
end
ios = File.open("#{dest_dir}/thumbnails-#{size2js(sizeobj['name'])}-#{pagecount}.html", "w")
ios.write(final_html)
i.gsub!(/~~indexlink~~/, $indexlink || '')
substitute_html_sizes(i, sizeobj, 'image', '')
substitute_navigation(i, xmldir)
+ substitute_pathtobase(i, xmldir)
end
ios = File.open("#{dest_dir}/image-#{size2js(sizeobj['name'])}.html", "w")
ios.write(html)
caption = xmldir.attributes['subdirs-caption']
i.gsub!(/~~title~~/, caption)
substitute_navigation(i, xmldir)
+ substitute_pathtobase(i, xmldir)
discover_iterations(iterations, i)
end
--- /dev/null
+body {
+ background: white;
+ color: black;
+ font-family: "Bitstream Vera Sans", "Lucida Sans", Geneva, Arial, Helvetica, sans-serif;
+}
+
+a:link {
+ color: #7B7BA8;
+ text-decoration: none;
+}
+
+a:visited {
+ color: #7B7BA8;
+ text-decoration: none;
+}
+
+a:hover {
+ color: #7B7BA8;
+ text-decoration: underline;
+}
+
+input {
+ border: solid 1px;
+ background-color: #DEDAD6;
+}
+
+input:hover {
+ background-color: #E8E8E8;
+}
+
+img {
+ border: solid 1px;
+ border-color: #000000;
+}
+
+.nothing {
+ border: 0 solid black;
+}
+
+.disabled {
+ font-style: italic;
+}
+.disabled:hover {
+ background-color: #DEDAD6;
+}
+
+
+table.index {
+ width: 100%;
+ padding: 10px;
+ border: 0px solid black;
+}
+
+table.index tr td.image {
+ width: 50%;
+ text-align: right;
+ vertical-align: top;
+}
+
+table.index tr td.caption {
+ width: 50%;
+ text-align: left;
+}
+
+table.footer {
+ width: 100%;
+}
+
+table.footer tr td {
+ font-size: 0.8em;
+}
+
+table.footer tr td.left {
+ text-align: left;
+}
+
+table.footer tr td.left {
+ text-align: right;
+}
+
+table.imgnav tr td.sizes {
+ text-align: center;
+ font-size: 0.7em;
+}
+
+table.image {
+ width: 100%
+}
+
+table.image tr td {
+ text-align: center;
+}
+
+table.image tr td caption {
+ font-size: 1.1em;
+}
+
+table.image tr td caption {
+ font-size: 0.8em;
+
+}
+
+span.img_alb_nav {
+}
+
--- /dev/null
+var images_ary = new Array();
+var images_loaded = new Array();
+var current = 0;
+var slideshow = 0;
+var slideshow_pause = null;
+var slideshow_timer = null;
+
+for (i = 0; i < images.length; i++) {
+ /* this array will contain 0 if image not yet loaded, 1 when loading,
+ * 2 when complete */
+ images_loaded[i] = 0;
+}
+
+function dbg(t) {
+ document.getElementById('dbg_text').innerHTML += t + "\n";
+}
+
+/* load image, return 1 if image is finished loading */
+function load(i) {
+ if (images_loaded[i] == 0) {
+ images_ary[i] = new Image();
+ images_ary[i].src = images[i];
+ images_loaded[i] = 1;
+ }
+ if (images_loaded[i] == 1) {
+ if (images_ary[i].complete) {
+ images_loaded[i] = 2;
+ } else {
+ return 0;
+ }
+ }
+ return 1;
+}
+
+function getparam(key) {
+ all_params = location.href.split("#")
+ if (all_params.length > 1) {
+ params = all_params[1].split("&");
+ for (i = 0; i < params.length; i++) {
+ keyvalue = params[i].split("=");
+ if (keyvalue[0] == key) {
+ return keyvalue[1];
+ }
+ }
+ }
+ return null;
+}
+
+function loadcurrent(img) {
+ for (i = 0; i < images.length; i++) {
+ if (images[i] == img) {
+ current = i;
+ display_current();
+ return;
+ }
+ }
+ current = 0;
+ display_current();
+}
+
+function browser_href() {
+ all = location.href.split("/");
+ return all[all.length - 1];
+}
+
+/* check URL for changes; allows the URL to reflect currently showed image */
+var currentURL = '';
+function checkURL() {
+ if (currentURL == 'ignore1') {
+ // do nothing
+ } else if (currentURL == 'ignore2') {
+ currentURL = browser_href();
+ } else {
+ href = browser_href();
+ if (href != currentURL) {
+ currentURL = href;
+ img = getparam('current');
+ loadcurrent(img);
+ }
+ }
+ setTimeout("checkURL()", 50);
+}
+
+function preload() {
+
+ /* favor current image, if user clicked on `last' or something */
+ load(current);
+
+ /* don't blindly preload all images at the beginning,
+ * but rather load them one by one, in order to get
+ * next ones faster, beginning with next to current
+ */
+ if (current + 1 < images.length && load(current + 1) == 0) {
+ setTimeout("preload()", 50);
+ return;
+ }
+ if (current - 1 >= 0 && load(current - 1) == 0) {
+ setTimeout("preload()", 50);
+ return;
+ }
+
+ for (i = current + 2; i < images.length && i <= current + 5; i++) {
+ if (load(i) == 0) {
+ setTimeout("preload()", 50);
+ return;
+ }
+ }
+ for (i = current - 2; i >= current - 3; i--) {
+ if (i >= 0) {
+ if (load(i) == 0) {
+ setTimeout("preload()", 50);
+ return;
+ }
+ }
+ }
+
+ setTimeout("preload()", 50);
+}
+
+function add_cookie(val) {
+ var expires = new Date(new Date().getTime() + (30 * 86400000)); // 30 days
+ document.cookie = val
+ + '; expires=' + expires.toGMTString()
+ + '; path=/';
+}
+
+function get_cookie(key) {
+ if (document.cookie) {
+ var index = document.cookie.indexOf(key);
+ if (index != -1) {
+ var oleft = (document.cookie.indexOf('=', index) + 1);
+ var oright = document.cookie.indexOf(';', index);
+ if (oright == -1) {
+ oright = document.cookie.length;
+ }
+ return document.cookie.substring(oleft, oright);
+ }
+ }
+ return null;
+}
+
+function init() {
+
+
+ preferred_pause = get_cookie('booh-slideshow-pause-' + dbltilda_theme);
+ if (preferred_pause != null) {
+ document.getElementById('secs').value = preferred_pause;
+ }
+
+ if (getparam('run_slideshow')) {
+ toggle_slideshow();
+ }
+
+ checkURL();
+
+ preload();
+
+ if (images.length == 1) {
+ document.getElementById("b_slideshow").disabled = true;
+ document.getElementById("b_slideshow").setAttribute("class", "disabled");
+ }
+
+ if (navigator.userAgent.indexOf('Opera') == -1) {
+ document.onkeydown = keyDownEvent;
+ }
+}
+
+function update_sensibilities() {
+ if (current == 0) {
+ document.getElementById("b_first").disabled = true;
+ document.getElementById("b_previous").disabled = true;
+ document.getElementById("b_first").setAttribute("class", "disabled");
+ document.getElementById("b_previous").setAttribute("class", "disabled");
+ } else {
+ document.getElementById("b_first").disabled = false;
+ document.getElementById("b_previous").disabled = false;
+ document.getElementById("b_first").removeAttribute("class");
+ document.getElementById("b_previous").removeAttribute("class");
+ }
+
+ if (current == images.length - 1) {
+ document.getElementById("b_next").disabled = true;
+ document.getElementById("b_last").disabled = true;
+ document.getElementById("b_next").setAttribute("class", "disabled");
+ document.getElementById("b_last").setAttribute("class", "disabled");
+ } else {
+ document.getElementById("b_next").disabled = false;
+ document.getElementById("b_last").disabled = false;
+ document.getElementById("b_next").removeAttribute("class");
+ document.getElementById("b_last").removeAttribute("class");
+ }
+}
+
+function set_cursor_(value, element) {
+
+ if (!element || !element.style) {
+ return;
+ }
+
+ element.style.cursor = value;
+
+ children = element.childNodes;
+ for (i = 0; i < children.length; i++) {
+ set_cursor_(value, children.item[i]);
+ }
+}
+
+function set_cursor(value) {
+ set_cursor_(value, document.getElementById('body'));
+ set_cursor_(value, document.getElementById('b_first'));
+ set_cursor_(value, document.getElementById('b_previous'));
+ set_cursor_(value, document.getElementById('b_next'));
+ set_cursor_(value, document.getElementById('b_last'));
+}
+
+function show_current_text() {
+ /* don't show text if image not yet loaded because navigator
+ * won't refresh it during load */
+ if (images_loaded[current] == 2) {
+ document.getElementById('image_counter').innerHTML = ( current + 1 ) + "/" + images.length;
+ document.getElementById('main_text').innerHTML = captions[current];
+ for (i = 0; i < other_sizes.length; i++) {
+ if (other_sizes[i] == "original") {
+ document.getElementById('link' + other_sizes[i]).href = eval("images_" + other_sizes[i] + "[current]");
+ } else {
+ document.getElementById('link' + other_sizes[i]).href = 'image-' + other_sizes[i] + '.html#current=' + eval("images_" + other_sizes[i] + "[current]");
+ }
+ }
+ document.getElementById('thumbnails').href = 'thumbnails-' + dbltilda_current_size + '-' + thumbnailspages[current] + '.html#' + images[current];
+ set_cursor("default");
+ } else {
+ setTimeout("show_current_text()", 50);
+ set_cursor("wait");
+ }
+}
+
+function display_current() {
+ document.main_img.src = images[current];
+ oldhref = browser_href();
+ newhref = 'image-' + dbltilda_current_size + '.html#current=' + images[current];
+ if (oldhref != newhref) {
+ currentURL = 'ignore1';
+ location.href = newhref;
+ currentURL = 'ignore2';
+ }
+ show_current_text();
+ update_sensibilities();
+}
+
+function first() {
+ if (slideshow == 1) {
+ toggle_slideshow(true);
+ }
+
+ current = 0;
+ display_current();
+}
+
+function next() {
+ if (slideshow == 1) {
+ toggle_slideshow(true);
+ }
+
+ if (current < images.length - 1) {
+ current++;
+ display_current();
+ }
+}
+
+function next10() {
+ if (slideshow == 1) {
+ toggle_slideshow(true);
+ }
+
+ if (current < images.length - 11) {
+ current += 10;
+ } else {
+ current = images.length - 1;
+ }
+ display_current();
+}
+
+function previous() {
+ if (slideshow == 1) {
+ toggle_slideshow(true);
+ }
+
+ if (current > 0) {
+ current--;
+ display_current();
+ }
+}
+
+function previous10() {
+ if (slideshow == 1) {
+ toggle_slideshow(true);
+ }
+
+ if (current > 10) {
+ current -= 10;
+ } else {
+ current = 0;
+ }
+ display_current();
+}
+
+function last() {
+ if (slideshow == 1) {
+ toggle_slideshow(true);
+ }
+
+ current = images.length - 1;
+ display_current();
+}
+
+function keyDownEvent(key) {
+ if (!key) {
+ key = event;
+ key.which = key.keyCode;
+ }
+ if (key.altKey || key.ctrlKey || key.shiftKey) {
+ return;
+ }
+ switch (key.which) {
+ case 36: // home
+ first();
+ break;
+ case 35: // end
+ last();
+ break;
+ case 37: // left
+ previous();
+ break;
+ case 39: // right
+ next();
+ break;
+ case 38: // up
+ previous10();
+ break;
+ case 40: // down
+ next10();
+ break;
+ }
+}
+
+function toggle_slideshow(now) {
+ if (slideshow == 0) {
+ slideshow_pause = document.getElementById('secs').value;
+ add_cookie('booh-slideshow-pause-' + dbltilda_theme + '=' + slideshow_pause)
+ document.getElementById("b_slideshow").value = dbltilda_stop_slideshow;
+ slideshow = 1;
+ if (current == images.length - 1) {
+ current = -1;
+ }
+ if (now) {
+ run_slideshow();
+ } else {
+ setTimeout("run_slideshow()", slideshow_pause * 1000);
+ }
+ } else {
+ clearTimeout(slideshow_timer);
+ document.getElementById("b_slideshow").value = dbltilda_run_slideshow;
+ slideshow = 0;
+ }
+}
+
+function run_slideshow() {
+ if (slideshow == 0) {
+ return;
+ }
+
+ if (images_loaded[current + 1] == 2) {
+ current++;
+ display_current();
+ slideshow_timer = setTimeout("run_slideshow()", slideshow_pause * 1000);
+ } else {
+ slideshow_timer = setTimeout("run_slideshow()", 50);
+ }
+
+ if (current == images.length - 1) {
+ toggle_slideshow(true);
+ }
+}
+
+function set_preferred_size(val) {
+ var expires = new Date(new Date().getTime() + (30 * 86400000)); // 30 days
+ document.cookie = 'booh-preferred-size-' + dbltilda_theme + '='
+ + val
+ + '; expires=' + expires.toGMTString()
+ + '; path=/';
+}
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="'Simple' theme - Guillaume Cottenceau"/>
~~~image_head_code~~~
- <style type="text/css" media="screen">
- <!--
-body {
- background-color: #ffffff;
- color: #000000;
- font-family: "Bitstream Vera Sans", "Lucida Sans", Geneva, Arial, Helvetica, sans-serif;
-}
-
-a:link {
- color: #7B7BA8;
- text-decoration: none;
-}
-
-a:visited {
- color: #7B7BA8;
- text-decoration: none;
-}
-
-a:hover {
- color: #7B7BA8;
- text-decoration: underline;
-}
-
-img {
- border: solid 1px;
- border-color: #000000;
-}
-
-input {
- border: solid 1px;
- background-color: #DEDAD6;
-}
-input:hover {
- background-color: #E8E8E8;
-}
-.disabled {
- font-style: italic;
-}
-.disabled:hover {
- background-color: #DEDAD6;
-}
- -->
- </style>
+ <script type="text/javascript" src="~~pathtobase~~booh.js"></script>
+ <link rel="stylesheet" type="text/css" href="~~pathtobase~~booh.css" media="screen" />
</head>
-<body bgcolor="#FFFFFF" ~~~body_additions~~~>
+<body ~~~body_additions~~~>
-<table width="100%">
-<tr>
+<table class='imgnav'>
+ <tr>
<td width="10%"> </td>
<td width="1%">~~~button_first~~~</td>
<td width="3%"> </td>
<td width="1%">~~~button_previous~~~</td>
- <td align="center"><font size="-2">~~sizes~~ | ~~</font></td>
+ <td class='sizes'>~~sizes~~ | ~~</td>
<td width="1%">~~~button_next~~~</td>
<td width="3%"> </td>
<td width="1%">~~~button_last~~~</td>
<td width="10%"> </td>
-</tr>
+ </tr>
</table>
-<table width="100%">
+<table class='image'>
<!-- <p id="dbg_text"> </p> -->
-<tr>
- <td align="center" colspan="9">
+ <tr>
+ <td>
~~~image~~~
</td>
-</tr>
-<tr>
- <td align="center" colspan="9">
- <font size="+1" ~~~caption_additions~~~> </font>
- <font size="-2" ~~~image_counter_additions~~~> </font>
+ </tr>
+ <tr>
+ <td>
+ <span class='caption' ~~~caption_additions~~~> </span>
+ <span class='counter' ~~~image_counter_additions~~~> </span>
</td>
-</tr>
+ </tr>
~~~body_code~~~
-<tr>
- <td colspan="9" align="center">
+ <tr>
+ <td>
~~~button_slideshow~~~
~~~pause_slideshow~~~
- <br/>
- <font size="-1">~~previous_album~~ ~~ifprevious_album?~~|~~fi~~ ~~thumbnails~~ ~~ifnext_album?~~|~~fi~~ ~~next_album~~</font>
+ <br />
+ <span class='img_alb_nav'>~~previous_album~~ ~~ifprevious_album?~~|~~fi~~ ~~thumbnails~~ ~~ifnext_album?~~|~~fi~~ ~~next_album~~</span>
</td>
-</tr>
+ </tr>
</table>
-<table width="100%" cellpadding="0" border="0">
-<tr>
- <td align="left"> <font size="-1"><i>~~indexlink~~</i></font></td>
- <td align="right"><font size="-1"><i>~~madewith~~</i> </font></td>
-</tr>
+<table class='footer'>
+ <tr>
+ <td class='left'>~~indexlink~~</td>
+ <td class='right'>~~madewith~~</td>
+ </tr>
</table>
</body>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="'Simple' theme - Guillaume Cottenceau"/>
~~~index_head_code~~~
- <style type="text/css" media="screen">
- <!--
-body {
- background-color: #ffffff;
- color: #000000;
- font-family: "Bitstream Vera Sans", "Lucida Sans", Geneva, Arial, Helvetica, sans-serif;
-}
-
-a:link {
- color: #7B7BA8;
- text-decoration: none;
-}
-
-a:visited {
- color: #7B7BA8;
- text-decoration: none;
-}
-
-a:hover {
- color: #7B7BA8;
- text-decoration: underline;
-}
-
-input {
- border: solid 1px;
-}
-
-img {
- border: solid 1px;
- border-color: #000000;
-}
- -->
- </style>
+ <link rel="stylesheet" type="text/css" href="~~pathtobase~~booh.css" media="screen" />
</head>
-<body bgcolor="#FFFFFF" ~~~body_additions~~~>
+<body ~~~body_additions~~~>
~~ifnavigation?~~<p>~~navigation~~</p>~~fi~~
<p align="center" id="title"><font size="+3">~~title~~</font></p>
-<table width="100%" cellpadding="10" border="0">
+<table class='index'>
~~iterate1_open~~
<tr>
- <td width="50%" align="right" valign="top">
+ <td class='image'>
~~image_iteration~~
</td>
- <td width="50%" align="left">
+ <td class='caption'>
<p>~~caption_iteration~~</p>
</td>
</tr>
~~iterate1_close~~
</table>
-<table width="100%" cellpadding="0" border="0">
-<tr>
- <td align="left"> <font size="-1"><i>~~indexlink~~</i></font></td>
- <td align="right"><font size="-1"><i>~~madewith~~</i> </font></td>
-</tr>
+<table class='footer'>
+ <tr>
+ <td class='left'>~~indexlink~~</td>
+ <td class='right'>~~madewith~~</td>
+ </tr>
</table>
</body>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="'Simple' theme - Guillaume Cottenceau"/>
~~~thumbnails_head_code~~~
- <style type="text/css" media="screen">
- <!--
-body {
- background-color: #ffffff;
- color: #000000;
- font-family: "Bitstream Vera Sans", "Lucida Sans", Geneva, Arial, Helvetica, sans-serif;
-}
-
-a:link {
- color: #7B7BA8;
- text-decoration: none;
-}
-
-a:visited {
- color: #7B7BA8;
- text-decoration: none;
-}
-
-a:hover {
- color: #7B7BA8;
- text-decoration: underline;
-}
-
-input {
- border: solid 1px;
-}
-
-img {
- border: solid 1px;
- border-color: #000000;
-}
-.nothing {
- border: solid 0px;
-}
- -->
- </style>
+ <link rel="stylesheet" type="text/css" href="~~pathtobase~~booh.css" media="screen" />
</head>
-<body bgcolor="#FFFFFF">
+<body>
+
+~~ifnavigation?~~<p>~~navigation~~</p>~~fi~~
<p align="center">
<font size="+3">~~title~~</font>
~~iterate2_open_maxN~~
<td align="center" valign="top" ~~colspan~~>
~~image_iteration~~
- <p>~~ifvideo?~~<img src="video.png" alt="video" class="nothing"/>~~fi~~ ~~caption_iteration~~</p>
+ <p>~~ifvideo?~~<img src="~~pathtobase~~video.png" alt="video" class="nothing"/>~~fi~~ ~~caption_iteration~~</p>
</td>
~~iterate2_close~~
</tr>
<p align="center">~~previous_album~~ ~~ifprevious_album?~~|~~fi~~ ~~return_to_albums~~ ~~ifnext_album?~~|~~fi~~ ~~next_album~~</p>
-<table width="100%" cellpadding="0" border="0">
-<tr>
- <td align="left"> <font size="-1"><i>~~indexlink~~</i></font></td>
- <td align="right"><font size="-1"><i>~~madewith~~</i> </font></td>
-</tr>
+<table class='footer'>
+ <tr>
+ <td class='left'>~~indexlink~~</td>
+ <td class='right'>~~madewith~~</td>
+ </tr>
</table>
</body>
http://booh.org/"/>
<script language="JavaScript1.1" type="text/JavaScript">
-var images = new Array(~~images~~);
+images = new Array(~~images~~);
~~other_images~~
-var thumbnailspages = new Array(~~thumbnailspages~~);
-var other_sizes = new Array(~~other_sizes~~);
-var captions = new Array(~~captions~~);
-
-var images_ary = new Array();
-var images_loaded = new Array();
-var current = 0;
-var slideshow = 0;
-var slideshow_pause = null;
-var slideshow_timer = null;
-
-for (i = 0; i < images.length; i++) {
- /* this array will contain 0 if image not yet loaded, 1 when loading,
- * 2 when complete */
- images_loaded[i] = 0;
-}
-
-function dbg(t) {
- document.getElementById('dbg_text').innerHTML += t + "\n";
-}
-
-/* load image, return 1 if image is finished loading */
-function load(i) {
- if (images_loaded[i] == 0) {
- images_ary[i] = new Image();
- images_ary[i].src = images[i];
- images_loaded[i] = 1;
- }
- if (images_loaded[i] == 1) {
- if (images_ary[i].complete) {
- images_loaded[i] = 2;
- } else {
- return 0;
- }
- }
- return 1;
-}
-
-function getparam(key) {
- all_params = location.href.split("#")
- if (all_params.length > 1) {
- params = all_params[1].split("&");
- for (i = 0; i < params.length; i++) {
- keyvalue = params[i].split("=");
- if (keyvalue[0] == key) {
- return keyvalue[1];
- }
- }
- }
- return null;
-}
-
-function loadcurrent(img) {
- for (i = 0; i < images.length; i++) {
- if (images[i] == img) {
- current = i;
- display_current();
- return;
- }
- }
- current = 0;
- display_current();
-}
-
-function browser_href() {
- all = location.href.split("/");
- return all[all.length - 1];
-}
-
-/* check URL for changes; allows the URL to reflect currently showed image */
-var currentURL = '';
-function checkURL() {
- if (currentURL == 'ignore1') {
- // do nothing
- } else if (currentURL == 'ignore2') {
- currentURL = browser_href();
- } else {
- href = browser_href();
- if (href != currentURL) {
- currentURL = href;
- img = getparam('current');
- loadcurrent(img);
- }
- }
- setTimeout("checkURL()", 50);
-}
-
-function preload() {
-
- /* favor current image, if user clicked on `last' or something */
- load(current);
-
- /* don't blindly preload all images at the beginning,
- * but rather load them one by one, in order to get
- * next ones faster, beginning with next to current
- */
- if (current + 1 < images.length && load(current + 1) == 0) {
- setTimeout("preload()", 50);
- return;
- }
- if (current - 1 >= 0 && load(current - 1) == 0) {
- setTimeout("preload()", 50);
- return;
- }
-
- for (i = current + 2; i < images.length && i <= current + 5; i++) {
- if (load(i) == 0) {
- setTimeout("preload()", 50);
- return;
- }
- }
- for (i = current - 2; i >= current - 3; i--) {
- if (i >= 0) {
- if (load(i) == 0) {
- setTimeout("preload()", 50);
- return;
- }
- }
- }
-
- setTimeout("preload()", 50);
-}
-
-function add_cookie(val) {
- var expires = new Date(new Date().getTime() + (30 * 86400000)); // 30 days
- document.cookie = val
- + '; expires=' + expires.toGMTString()
- + '; path=/';
-}
-
-function get_cookie(key) {
- if (document.cookie) {
- var index = document.cookie.indexOf(key);
- if (index != -1) {
- var oleft = document.cookie.indexOf('=', index) + 1;
- var oright = document.cookie.indexOf(';', index);
- if (oright == -1) {
- oright = document.cookie.length;
- }
- return document.cookie.substring(oleft, oright);
- }
- }
- return null;
-}
-
-function init() {
-
- preferred_pause = get_cookie('booh-slideshow-pause-~~theme~~');
- if (preferred_pause != null) {
- document.getElementById('secs').value = preferred_pause;
- }
-
- if (getparam('run_slideshow')) {
- toggle_slideshow();
- }
-
- checkURL();
-
- preload();
- if (images.length == 1) {
- document.getElementById("b_slideshow").disabled = true;
- document.getElementById("b_slideshow").setAttribute("class", "disabled");
- }
-
- if (navigator.userAgent.indexOf('Opera') == -1) {
- document.onkeydown = keyDownEvent;
- }
-}
-
-function update_sensibilities() {
- if (current == 0) {
- document.getElementById("b_first").disabled = true;
- document.getElementById("b_previous").disabled = true;
- document.getElementById("b_first").setAttribute("class", "disabled");
- document.getElementById("b_previous").setAttribute("class", "disabled");
- } else {
- document.getElementById("b_first").disabled = false;
- document.getElementById("b_previous").disabled = false;
- document.getElementById("b_first").removeAttribute("class");
- document.getElementById("b_previous").removeAttribute("class");
- }
-
- if (current == images.length - 1) {
- document.getElementById("b_next").disabled = true;
- document.getElementById("b_last").disabled = true;
- document.getElementById("b_next").setAttribute("class", "disabled");
- document.getElementById("b_last").setAttribute("class", "disabled");
- } else {
- document.getElementById("b_next").disabled = false;
- document.getElementById("b_last").disabled = false;
- document.getElementById("b_next").removeAttribute("class");
- document.getElementById("b_last").removeAttribute("class");
- }
-}
-
-function set_cursor_(value, element) {
-
- if (!element || !element.style) {
- return;
- }
-
- element.style.cursor = value;
-
- children = element.childNodes;
- for (i = 0; i < children.length; i++) {
- set_cursor_(value, children.item[i]);
- }
-}
-
-function set_cursor(value) {
- set_cursor_(value, document.getElementById('body'));
- set_cursor_(value, document.getElementById('b_first'));
- set_cursor_(value, document.getElementById('b_previous'));
- set_cursor_(value, document.getElementById('b_next'));
- set_cursor_(value, document.getElementById('b_last'));
-}
-
-function show_current_text() {
- /* don't show text if image not yet loaded because navigator
- * won't refresh it during load */
- if (images_loaded[current] == 2) {
- document.getElementById('image_counter').innerHTML = ( current + 1 ) + "/" + images.length;
- document.getElementById('main_text').innerHTML = captions[current];
- for (i = 0; i < other_sizes.length; i++) {
- if (other_sizes[i] == "original") {
- document.getElementById('link' + other_sizes[i]).href = eval("images_" + other_sizes[i] + "[current]");
- } else {
- document.getElementById('link' + other_sizes[i]).href = 'image-' + other_sizes[i] + '.html#current=' + eval("images_" + other_sizes[i] + "[current]");
- }
- }
- document.getElementById('thumbnails').href = 'thumbnails-~~current_size~~-' + thumbnailspages[current] + '.html#' + images[current];
- set_cursor("default");
- } else {
- setTimeout("show_current_text()", 50);
- set_cursor("wait");
- }
-}
-
-function display_current() {
- document.main_img.src = images[current];
- oldhref = browser_href();
- newhref = 'image-~~current_size~~.html#current=' + images[current];
- if (oldhref != newhref) {
- currentURL = 'ignore1';
- location.href = newhref;
- currentURL = 'ignore2';
- }
- show_current_text();
- update_sensibilities();
-}
-
-function first() {
- if (slideshow == 1) {
- toggle_slideshow(true);
- }
-
- current = 0;
- display_current();
-}
-
-function next() {
- if (slideshow == 1) {
- toggle_slideshow(true);
- }
-
- if (current < images.length - 1) {
- current++;
- display_current();
- }
-}
-
-function next10() {
- if (slideshow == 1) {
- toggle_slideshow(true);
- }
-
- if (current < images.length - 11) {
- current += 10;
- } else {
- current = images.length - 1;
- }
- display_current();
-}
-
-function previous() {
- if (slideshow == 1) {
- toggle_slideshow(true);
- }
-
- if (current > 0) {
- current--;
- display_current();
- }
-}
-
-function previous10() {
- if (slideshow == 1) {
- toggle_slideshow(true);
- }
-
- if (current > 10) {
- current -= 10;
- } else {
- current = 0;
- }
- display_current();
-}
-
-function last() {
- if (slideshow == 1) {
- toggle_slideshow(true);
- }
-
- current = images.length - 1;
- display_current();
-}
-
-function keyDownEvent(key) {
- if (!key) {
- key = event;
- key.which = key.keyCode;
- }
- if (key.altKey || key.ctrlKey || key.shiftKey) {
- return;
- }
- switch (key.which) {
- case 36: // home
- first();
- break;
- case 35: // end
- last();
- break;
- case 37: // left
- previous();
- break;
- case 39: // right
- next();
- break;
- case 38: // up
- previous10();
- break;
- case 40: // down
- next10();
- break;
- }
-}
-
-function toggle_slideshow(now) {
- if (slideshow == 0) {
- slideshow_pause = document.getElementById('secs').value;
- add_cookie('booh-slideshow-pause-~~theme~~=' + slideshow_pause)
- document.getElementById("b_slideshow").value = "~~stop_slideshow~~";
- slideshow = 1;
- if (current == images.length - 1) {
- current = -1;
- }
- if (now) {
- run_slideshow();
- } else {
- setTimeout("run_slideshow()", slideshow_pause * 1000);
- }
- } else {
- clearTimeout(slideshow_timer);
- document.getElementById("b_slideshow").value = "~~run_slideshow~~";
- slideshow = 0;
- }
-}
-
-function run_slideshow() {
- if (slideshow == 0) {
- return;
- }
-
- if (images_loaded[current + 1] == 2) {
- current++;
- display_current();
- slideshow_timer = setTimeout("run_slideshow()", slideshow_pause * 1000);
- } else {
- slideshow_timer = setTimeout("run_slideshow()", 50);
- }
-
- if (current == images.length - 1) {
- toggle_slideshow(true);
- }
-}
-
-function set_preferred_size(val) {
- var expires = new Date(new Date().getTime() + (30 * 86400000)); // 30 days
- document.cookie = 'booh-preferred-size-~~theme~~='
- + val
- + '; expires=' + expires.toGMTString()
- + '; path=/';
-}
+thumbnailspages = new Array(~~thumbnailspages~~);
+other_sizes = new Array(~~other_sizes~~);
+captions = new Array(~~captions~~);
+
+dbltilda_current_size = '~~current_size~~';
+dbltilda_theme = '~~theme~~';
+dbltilda_stop_slideshow = '~~stop_slideshow~~';
+dbltilda_run_slideshow = '~~run_slideshow~~';
</script>
EOF
projects / booh / commitdiff
