1 | {html_head} |
---|
2 | <script src="//maps.googleapis.com/maps/api/js?sensor=false&language={$lang_info.code}" type="text/javascript"></script> |
---|
3 | {combine_script id='jquery' load='header' path='themes/default/js/jquery.min.js'} |
---|
4 | {combine_script id='jquery.colorbox' load='async' require='jquery' path='themes/default/js/plugins/jquery.colorbox.min.js'} |
---|
5 | {combine_css path='themes/default/js/plugins/colorbox/style2/colorbox.css'} |
---|
6 | {/html_head}{html_style} |
---|
7 | {$thumb_size=$current.derivatives.thumb->get_size()} |
---|
8 | #mapPicture{ |
---|
9 | float:left; |
---|
10 | width:{max(240,5+$thumb_size[0])}px; |
---|
11 | } |
---|
12 | |
---|
13 | #map{ |
---|
14 | position:relative; |
---|
15 | height:512px; |
---|
16 | min-width:300px; |
---|
17 | } |
---|
18 | |
---|
19 | #linkPrev,#linkNext{ |
---|
20 | display:none |
---|
21 | } |
---|
22 | @media screen and (-webkit-min-device-pixel-ratio:1.3){ |
---|
23 | #thumbImg{ |
---|
24 | width:{($thumb_size[0]/1.5)|intval}px; |
---|
25 | height:{($thumb_size[1]/1.5)|intval}px |
---|
26 | } |
---|
27 | } |
---|
28 | @media screen and (-webkit-min-device-pixel-ratio:2){ |
---|
29 | #thumbImg{ |
---|
30 | width:{($thumb_size[0]/2)|intval}px; |
---|
31 | height:{($thumb_size[1]/2)|intval}px |
---|
32 | } |
---|
33 | } |
---|
34 | |
---|
35 | @media screen and (max-height:512px){ |
---|
36 | #map{ height:400px;} |
---|
37 | } |
---|
38 | @media screen and (max-height:360px){ |
---|
39 | #map{ height:250px;} |
---|
40 | } |
---|
41 | @media screen and (max-height:320px){ |
---|
42 | #map{ height:200px;} |
---|
43 | } |
---|
44 | {/html_style} |
---|
45 | |
---|
46 | <div id="mapPicture"> |
---|
47 | <a href="{$U_NO_MAP}" title="{'return to normal view mode'|@translate}" rel="nofollow"><img id="thumbImg" src="{$current.THUMB_SRC}" width={$thumb_size[0]} height={$thumb_size[1]} alt="thumb"></a> |
---|
48 | <br/> |
---|
49 | <a href="{$U_BLOWUP}" onclick="return blowupUrl(this.href);">{'More photos near this location'|@translate}</a> |
---|
50 | <br/> |
---|
51 | {$COMMENT_IMG} |
---|
52 | <br/> |
---|
53 | </div> |
---|
54 | |
---|
55 | <div id="map"></div> |
---|
56 | |
---|
57 | <div style="clear:both"></div> |
---|
58 | <script type="text/javascript">{literal} |
---|
59 | //<![CDATA[ |
---|
60 | jQuery(document).ready( function () { |
---|
61 | var mapElement = document.getElementById("map"); |
---|
62 | var mapOpts = { |
---|
63 | {/literal}{if isset($coordinates)} |
---|
64 | center: new google.maps.LatLng( {$coordinates.LAT}, {$coordinates.LON} ), |
---|
65 | zoom : 12, |
---|
66 | {else} |
---|
67 | center: new google.maps.LatLng(0,0), |
---|
68 | zoom : 1, |
---|
69 | {/if}{literal} |
---|
70 | mapTypeId: google.maps.MapTypeId.{/literal}{$MAP_TYPE}{literal} |
---|
71 | }; |
---|
72 | |
---|
73 | var map = new google.maps.Map( mapElement, mapOpts ); |
---|
74 | |
---|
75 | {/literal}{if isset($coordinates)} |
---|
76 | var marker = new google.maps.Marker( {ldelim} |
---|
77 | position: map.getCenter(), |
---|
78 | map: map |
---|
79 | }); |
---|
80 | {/if}{literal} |
---|
81 | } |
---|
82 | ); |
---|
83 | |
---|
84 | function blowupUrl(theUrl) |
---|
85 | { |
---|
86 | jQuery.colorbox({href: theUrl, iframe: 1, width: "99%", height: "99%"}); |
---|
87 | return false; |
---|
88 | } |
---|
89 | |
---|
90 | //]]> |
---|
91 | {/literal}</script> |
---|