| 1 | {assign var='size' value=$current.selected_derivative->get_size()} |
|---|
| 2 | |
|---|
| 3 | |
|---|
| 4 | {combine_css path="themes/kardon/slideshow.css"} |
|---|
| 5 | |
|---|
| 6 | {footer_script require="jquery"}{literal} |
|---|
| 7 | jQuery(document).ready(function() { |
|---|
| 8 | var maxWidth = maxHeight = margin = 0; |
|---|
| 9 | var finalW = w = {/literal}{$size[0]}{literal}, finalH = h = {/literal}{$size[1]}{literal}; |
|---|
| 10 | if (typeof( window.innerWidth ) == 'number') { |
|---|
| 11 | // Non-IE |
|---|
| 12 | maxWidth = window.innerWidth; |
|---|
| 13 | maxHeight = window.innerHeight; |
|---|
| 14 | } |
|---|
| 15 | else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { |
|---|
| 16 | //IE 6+ in 'standards compliant mode' |
|---|
| 17 | maxWidth = document.documentElement.clientWidth; |
|---|
| 18 | maxHeight = document.documentElement.clientHeight; |
|---|
| 19 | } |
|---|
| 20 | else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { |
|---|
| 21 | // IE 4 compatible |
|---|
| 22 | maxWidth = document.body.clientWidth; |
|---|
| 23 | maxHeight = document.body.clientHeight; |
|---|
| 24 | } |
|---|
| 25 | |
|---|
| 26 | maxHeight = maxHeight-32; |
|---|
| 27 | if ((h > maxHeight) || (w > maxWidth)) { |
|---|
| 28 | if ((h > maxHeight) && (w > maxWidth)) { |
|---|
| 29 | if (maxHeight-h < maxWidth-w) { |
|---|
| 30 | finalH = maxHeight; |
|---|
| 31 | finalW = w * finalH / h; |
|---|
| 32 | } |
|---|
| 33 | else { |
|---|
| 34 | finalW = maxWidth; |
|---|
| 35 | finalH = h * finalW / w; |
|---|
| 36 | } |
|---|
| 37 | } |
|---|
| 38 | else if ((h > maxHeight) && (w < maxWidth)) { |
|---|
| 39 | finalH = maxHeight; |
|---|
| 40 | finalW = w * finalH / h; |
|---|
| 41 | } |
|---|
| 42 | else if ((h < maxHeight) && (w > maxWidth)) { |
|---|
| 43 | finalW = maxWidth; |
|---|
| 44 | finalH = h * finalW / w; |
|---|
| 45 | } |
|---|
| 46 | } |
|---|
| 47 | if ((maxHeight-finalH) > 0) { |
|---|
| 48 | margin = Math.round((maxHeight-finalH) / 2) |
|---|
| 49 | } |
|---|
| 50 | |
|---|
| 51 | jQuery("#theImage").append('<img style="margin-top:'+margin+'px; width:'+finalW+'px;height:'+finalH+'px" src="{/literal}{$current.selected_derivative->get_url()}{literal}" alt="">'); |
|---|
| 52 | }); |
|---|
| 53 | {/literal}{/footer_script} |
|---|
| 54 | |
|---|
| 55 | <div id="imageHeaderBar"> |
|---|
| 56 | <div class="browsePath"> |
|---|
| 57 | {if isset($U_SLIDESHOW_STOP) } |
|---|
| 58 | [ <a href="{$U_SLIDESHOW_STOP}">{'stop the slideshow'|@translate}</a> ] |
|---|
| 59 | {/if} |
|---|
| 60 | </div> |
|---|
| 61 | <div class="imageNumber">{$PHOTO}</div> |
|---|
| 62 | {if $SHOW_PICTURE_NAME_ON_TITLE } |
|---|
| 63 | <h2 class="showtitle">{$current.TITLE}</h2> |
|---|
| 64 | {/if} |
|---|
| 65 | </div> |
|---|
| 66 | |
|---|
| 67 | <div id="imageToolBar"> |
|---|
| 68 | {include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'} |
|---|
| 69 | </div> |
|---|
| 70 | |
|---|
| 71 | <div id="theImage"> |
|---|
| 72 | <noscript> |
|---|
| 73 | <div> |
|---|
| 74 | <img src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()} alt="{$ALT_IMG}"> |
|---|
| 75 | </div> |
|---|
| 76 | </noscript> |
|---|
| 77 | </div> <!-- theImage --> |
|---|
