diff options
| -rw-r--r-- | phpfspot.js | 60 | ||||
| -rw-r--r-- | resources/zoom-100.png | bin | 0 -> 2075 bytes | |||
| -rw-r--r-- | resources/zoom-in.png | bin | 0 -> 2062 bytes | |||
| -rw-r--r-- | resources/zoom-out.png | bin | 0 -> 1947 bytes | |||
| -rw-r--r-- | themes/default/stylesheet.css | 3 | ||||
| -rw-r--r-- | themes/default/templates/single_photo.tpl | 9 |
6 files changed, 71 insertions, 1 deletions
diff --git a/phpfspot.js b/phpfspot.js index 74ad4b9..d8290ad 100644 --- a/phpfspot.js +++ b/phpfspot.js @@ -13,6 +13,11 @@ function showImage(id, scrollup) if(scrollup != undefined) { window.scrollTo(0,0); } + + /* delete some global vars */ + delete(origHeight); + delete(origWidth); + delete(photo_details_pos); } function moveToThumb(thumb_id) @@ -249,6 +254,58 @@ function getPhotoToShow() return photo_to_show; } +function zoom(mod) +{ + if(mod == undefined) + return; + + if(photo = document.getElementById('photo')) { + + if(origWidth == undefined) + origWidth = photo.width; + if(origHeight == undefined) + origHeight = photo.height; + + if(mod != 0) { + new_w = photo.width * (1 + mod/100); + new_h = photo.height * (1 + mod/100); + photo.width = new_w; + photo.height = new_h; + + if(photo_details_pos == undefined) { + photo_details_pos = document.getElementById('photo_details').offsetLeft; + } + + if((photo.offsetLeft + new_w) >= photo_details_pos-20) { + hidePhotoDetails('true'); + } + else { + hidePhotoDetails('false'); + } + } + else { + photo.width = origWidth; + photo.height = origHeight; + hidePhotoDetails('false'); + } + } + +} // zoom() + +function hidePhotoDetails(mode) +{ + if(photo_details = document.getElementById('photo_details')) { + if(mode == 'true') { + photo_details.style.visibility = 'hidden'; + photo_details.style.display = 'none'; + } + else { + photo_details.style.visibility = 'visible'; + photo_details.style.display = 'inline'; + } + } +} // hidePhotoDetails() + function showCalendar(date_box, click_obj) { var calendar = document.getElementById('calendar'); @@ -509,3 +566,6 @@ var autobrowse = 0; var sliding = 0; var sliding_paused = 0; var sliding_time = 3; +var origHeight; +var origWidth; +var photo_details_pos; diff --git a/resources/zoom-100.png b/resources/zoom-100.png Binary files differnew file mode 100644 index 0000000..aad8b32 --- /dev/null +++ b/resources/zoom-100.png diff --git a/resources/zoom-in.png b/resources/zoom-in.png Binary files differnew file mode 100644 index 0000000..b63f0e5 --- /dev/null +++ b/resources/zoom-in.png diff --git a/resources/zoom-out.png b/resources/zoom-out.png Binary files differnew file mode 100644 index 0000000..31034a0 --- /dev/null +++ b/resources/zoom-out.png diff --git a/themes/default/stylesheet.css b/themes/default/stylesheet.css index 7eede84..ebe9892 100644 --- a/themes/default/stylesheet.css +++ b/themes/default/stylesheet.css @@ -158,6 +158,9 @@ div.thumb a.thumblink:hover { border-radius: 1em; border: dashed 1px #888888; z-index: 100; + float: right; + margin-top: 20px; + margin-right: 20px; } #available_tags,#selected_tags { diff --git a/themes/default/templates/single_photo.tpl b/themes/default/templates/single_photo.tpl index 62a2bf7..b9693c6 100644 --- a/themes/default/templates/single_photo.tpl +++ b/themes/default/templates/single_photo.tpl @@ -15,6 +15,9 @@ {/if} </div> <div style="text-align: right;"> + <a href="javascript:zoom(-10);" title="zoom_out" onclick="click(this);"><img src="resources/zoom-out.png" /></a> + <a href="javascript:zoom(0);" title="zoom_in" onclick="click(this);"><img src="resources/zoom-100.png" /></a> + <a href="javascript:zoom(10);" title="zoom_in" onclick="click(this);"><img src="resources/zoom-in.png" /></a> <a href="javascript:startAutoBrowse();" title="auto browsing"><img id="autobrowse_ico" src="resources/32_play.png" /></a> {if $extern_link } <a href="{$extern_link}" title="Use this link to return to the current view"><img src="resources/link.png" /></a> @@ -62,16 +65,20 @@ { /if} </div> + <!-- the photo itself --> + <div style="text-align: left; margin-top: 20px; margin-left: 20px;"> { if $next_url == "" } <a href="javascript:showPhotoIndex();" onclick="click(this);" name="photo"> { else } <a href="{$next_url}" onclick="click(this);" title="click for the next photo" name="photo"> { /if } - <img src="{$image_url}" width="{$width}" height="{$height}" alt="{$image_filename}" /> + <img src="{$image_url}" width="{$width}" height="{$height}" alt="{$image_filename}" id="photo" /> </a> </div> + <!-- navigation arrows --> + <div style="margin-left: 20px;"> { if $previous_url == "" } <img src="resources/arrow_left_gray.png" alt="first photo reached" /> |
