source: extensions/rv_gmaps/trunk/template/picture_map_content.tpl @ 24745

Revision 24745, 2.3 KB checked in by rvelices, 6 years ago (diff)

rv_gmaps compatibility with small screens / mobile devices

  • Property svn:eol-style set to LF
Line 
1{html_head}
2<script src="//maps.googleapis.com/maps/api/js?sensor=false&amp;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[
60jQuery(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
84function blowupUrl(theUrl)
85{
86        jQuery.colorbox({href: theUrl, iframe: 1, width: "99%", height: "99%"});
87        return false;
88}
89
90//]]>
91{/literal}</script>
Note: See TracBrowser for help on using the repository browser.