m |
m |
| (6 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | {{Widget
| + | <noinclude>This widget displays a gallery of images for the main page. |
| - | |author=Sergey Chernyshev
| + | |
| - | |provider=Google Maps
| + | |
| - | |providerurl=http://code.google.com/apis/maps/
| + | |
| - | |addedon=June 10, 2008
| + | |
| - | }}
| + | |
| - | This widget allows you to add '''[http://code.google.com/apis/maps/ Google Maps]''' widget to your wiki page. | + | |
| | | | |
| - | Created by [[mediawikiwiki:User:Sergey Chernyshev|Sergey Chernyshev]]
| + | <center>{{#Widget:MainPageGallery}}</center> |
| | + | </noinclude><includeonly> |
| | + | <!--Widget:MainPageGallery--> |
| | + | <style type="text/css"> |
| | + | #photos { } |
| | | | |
| - | <div style="float: right">__TOC__</div>
| + | /* GALLERY CONTAINER */ |
| | + | .gallery { background: #888f88; border: 1px solid #aaa; padding: 1px;} |
| | | | |
| - | == Parameters ==
| + | /* LOADING BOX */ |
| - | * '''key''' - Google developer key for your site (you must [http://code.google.com/apis/ajaxsearch/signup.html get your own] or it will not work).
| + | .loader { background: url(loader.gif) center center no-repeat #000; } |
| - | * '''height''' and '''width''' define map dimensions, 420x350 is default | + | |
| - | * '''lat''' - map center latitude | + | |
| - | * '''lng''' - map center longitude
| + | |
| - | * '''maptype''' - type of the map, ''roadmap'' (default), ''satellite'', ''hybrid''
| + | |
| - | * '''zoom''' - zoom level (defaults to 16)
| + | |
| - | * '''xml''' - URL of XML (KML/GeoRSS) data source (only one can be used for now) [[#Map types|*]]
| + | |
| - | * Markers:
| + | |
| - | ** '''centermarker''' - if set, then marker is added in the center of the map
| + | |
| - | ** Custom markers are defined using '''marker.''name''.lat''', '''marker.''name''.lng''', additional parameters can be set to customize a marker:
| + | |
| - | *** '''marker.''name''.title''' - title (only works on JavaScript-powered maps)
| + | |
| - | *** '''marker.''name''.letter''' - letter icon (capital A-Z, only works on JavaScript-powered maps)
| + | |
| - | *** '''marker.''name''.icon''' - URL for the custom icon, 20x34px (only works on JavaScript-powered maps)
| + | |
| - | * Controls [[#Map types|*]]:
| + | |
| - | ** '''maptypecontrol''' - buttons that let the user toggle between map types (such as Map and Satellite)
| + | |
| - | ** '''largemapcontrol''' - displays a large pan/zoom control used on Google Maps
| + | |
| - | ** '''smallmapcontrol''' - displays a smaller pan/zoom control used on Google Maps
| + | |
| - | ** '''smallzoomcontrol''' - displays a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps
| + | |
| - | ** '''scalecontrol''' - displays a map scale
| + | |
| - | ** '''overviewmapcontrol''' - displays a collapsible overview map in the corner of the screen
| + | |
| - | ** '''hierarchicalmaptypecontrol''' - displays a selection of nested buttons and menu items for placing many map type selectors
| + | |
| | | | |
| - | === Map types ===
| + | /* GALLERY PANELS */ |
| - | By default, map is displayed using dynamic user interface with movable map, controls, loadable XML and so on.
| + | .panel {} |
| | | | |
| - | If you want static map image to be displayed, add '''static=yes''' which will tell widget to use [http://code.google.com/apis/maps/documentation/staticmaps/ Google Static Maps API]. It does not support XML (KML or GeoRSS) and controls, but supports markers. Use this one when you want map to load faster and to avoid JavaScript slowing down your page. Static map is also used for graceful degradation when dynamic map is specified, but client doesn't support dynamic features like JavaScript.
| + | /* DEFINE HEIGHT OF PANEL OVERLAY */ |
| | + | /* NOTE - It is best to define padding here as well so overlay and background retain identical dimensions */ |
| | + | .panel .panel-overlay, |
| | | | |
| - | == Bookmarklet ==
| |
| - | Sometimes it's hard to get all the parameters you need for a map to display - coming up with longitude and latitude, correct zoom levels and so on might take too much time.
| |
| | | | |
| - | To help with this problem, we created a bookmarklet that you can use on Google Maps site to grab map widget code for current location with just one click.
| + | .panel .overlay-background { height: 50px; padding: 0 1em; } |
| | | | |
| - | Drag this bookmarklet {{#widget:Bookmarklets/Google Maps|key=ABQIAAAAq_i4aTseMGLic8bgu1NQHRRuMGSDM4hOrlKevQrS9qsdJ_NOCxRsXLLNmhAg5xMn9btyuqHxCavIxw|text=Maps Widget Code}} to your links toolbar and just click it when you want to post a location on the map to your wiki.
| + | /* PANEL OVERLAY BACKGROUND */ |
| | + | .panel .overlay-background { background: #000; } |
| | | | |
| - | You can insert this bookmarklet (with your Google Maps developer key preset) into your wiki using [[Widget:Bookmarklets/Google Maps|Google Maps bookmarklet widget]].
| + | /* PANEL OVERLAY CONTENT */ |
| | + | .panel .panel-overlay { text-align: left; color: white; font-size: 1em; } |
| | + | .panel .panel-overlay a { text-align: left; color: #87d5fd; font-size: 1.2em; text-decoration: none; font-weight: bold; } |
| | | | |
| - | == Sample results ==
| + | /* FILMSTRIP */ |
| - | === Moscow, Russia (static map with center marker) ===
| + | /* 'margin' will define top/bottom margin in completed gallery */ |
| - | <nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
| + | .filmstrip {display:block;} |
| - | |key=ABQIAAAAhAOcbFC8nSENkE4ukJ3oZhR18gmkJU7F4I-dl_qiW5ru7cc2CxQrzsZSdDvv8F9OXkePS6UzGObP1g
| + | |
| - | |width=600
| + | |
| - | |height=400
| + | |
| - | |lat=55.754796
| + | |
| - | |lng=37.621479
| + | |
| - | |zoom=12
| + | |
| - | |static=yes
| + | |
| - | |centermarker=yes
| + | |
| - | }}</nowiki>
| + | |
| | | | |
| - | {{#widget:{{PAGENAME}} | + | /* FILMSTRIP FRAMES (contains both images and captions) */ |
| - | |key=ABQIAAAAhAOcbFC8nSENkE4ukJ3oZhR18gmkJU7F4I-dl_qiW5ru7cc2CxQrzsZSdDvv8F9OXkePS6UzGObP1gw
| + | .frame { background: #000;} |
| - | |width=600
| + | |
| - | |height=400
| + | |
| - | |lat=55.754796
| + | |
| - | |lng=37.621479
| + | |
| - | |zoom=12
| + | |
| - | |static=yes
| + | |
| - | |centermarker=yes
| + | |
| - | }}
| + | |
| | | | |
| - | === KML feed from ([http://www.melpedia.com.au/wiki/Landmarks Melbourne Landmark Locations from Melpedia]) ===
| + | /* WRAPPER FOR FILMSTRIP IMAGES */ |
| - | <nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
| + | .frame .img_wrap { border: 1px solid #aaa; } |
| - | |key=ABQIAAAAhAOcbFC8nSENkE4ukJ3oZhR18gmkJU7F4I-dl_qiW5ru7cc2CxQrzsZSdDvv8F9OXkePS6UzGObP1g
| + | |
| - | |width=600
| + | |
| - | |height=400
| + | |
| - | |lat=-37.813683
| + | |
| - | |lng=144.963183
| + | |
| - | |zoom=14
| + | |
| - | |xml=http://www.melpedia.com.au/wiki/Special:KMLExport/Landmarks
| + | |
| - | }}</nowiki>
| + | |
| | | | |
| - | {{#widget:{{PAGENAME}}
| + | /* WRAPPER FOR CURRENT FILMSTRIP IMAGE */ |
| - | |key=ABQIAAAAhAOcbFC8nSENkE4ukJ3oZhR18gmkJU7F4I-dl_qiW5ru7cc2CxQrzsZSdDvv8F9OXkePS6UzGObP1g
| + | .frame.current .img_wrap { border-color: #fff; } |
| - | |width=600
| + | |
| - | |height=400
| + | |
| - | |lat=-37.813683
| + | |
| - | |lng=144.963183
| + | |
| - | |zoom=14
| + | |
| - | |xml=http://www.melpedia.com.au/wiki/Special:KMLExport/Landmarks
| + | |
| - | }}
| + | |
| | | | |
| - | === Metropolitan Museum of Art (with two markers and lots of controls) ===
| + | /* FRAME IMAGES */ |
| - | <nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
| + | .frame img { border: 1px #fff; } |
| - | |key=ABQIAAAAq_i4aTseMGLic8bgu1NQHRRuMGSDM4hOrlKevQrS9qsdJ_NOCxRsXLLNmhAg5xMn9btyuqHxCavIxw
| + | |
| - | |width=600
| + | |
| - | |height=400
| + | |
| - | |lat=40.77895
| + | |
| - | |lng=-73.96231
| + | |
| - | |marker.met.lat=40.77895
| + | |
| - | |marker.met.lng=-73.96231
| + | |
| - | |marker.met.title=Metropolitan Museum of Art
| + | |
| - | |marker.met.letter=M
| + | |
| - | |marker.met.icon=http://www.metmuseum.org/content/img/presentation/icons/favicon.ico
| + | |
| - | |marker.met.text=The Metropolitan Museum of Art (colloquially The Met) is a renowned art museum in New York City. Its permanent collection contains more than two million works, divided into nineteen curatorial departments.
| + | |
| - | |marker.centralpark.lat=40.78
| + | |
| - | |marker.centralpark.lng=-73.965
| + | |
| - | |marker.centralpark.title=Central Park
| + | |
| - | |marker.centralpark.text=Central Park is a public park in the center of Manhattan.
| + | |
| - | |marker.centralpark.letter=C
| + | |
| - | |maptypecontrol=yes
| + | |
| - | |largemapcontrol=yes
| + | |
| - | |overviewmapcontrol=yes
| + | |
| - | |scalecontrol=yes
| + | |
| - | }}</nowiki> | + | |
| | | | |
| - | {{#widget:{{PAGENAME}} | + | /* FRAME CAPTION */ |
| - | |key=ABQIAAAAq_i4aTseMGLic8bgu1NQHRRuMGSDM4hOrlKevQrS9qsdJ_NOCxRsXLLNmhAg5xMn9btyuqHxCavIxw
| + | .frame .caption { font-size: 11px; text-align: center; color: #888; } |
| - | |width=600
| + | |
| - | |height=400
| + | /* CURRENT FRAME CAPTION */ |
| - | |lat=40.779
| + | .frame.current .caption { color: #ddd; } |
| - | |lng=-73.963
| + | |
| - | |marker.met.lat=40.77895
| + | /* POINTER FOR CURRENT FRAME */ |
| - | |marker.met.lng=-73.96231
| + | .pointer { |
| - | |marker.met.title=Metropolitan Museum of Art
| + | border-color: #fff; |
| - | |marker.met.letter=M
| + | } |
| - | |marker.met.icon=http://www.metmuseum.org/content/img/presentation/icons/favicon.ico
| + | |
| - | |marker.met.text=The Metropolitan Museum of Art (colloquially The Met) is a renowned art museum in New York City. Its permanent collection contains more than two million works, divided into nineteen curatorial departments.
| + | /* TRANSPARENT BORDER FIX FOR IE6 */ |
| - | |marker.centralpark.lat=40.78
| + | /* NOTE - DO NOT CHANGE THIS RULE */ |
| - | |marker.centralpark.lng=-73.965
| + | *html .pointer { |
| - | |marker.centralpark.title=Central Park
| + | filter: chroma(color=pink); |
| - | |marker.centralpark.text=Central Park is a public park in the center of Manhattan.
| + | } |
| - | |marker.centralpark.letter=C
| + | </style> |
| - | |maptypecontrol=yes
| + | |
| - | |largemapcontrol=yes
| + | <script type="text/javascript" src="/university/galleryview-2.1.1/jquery-1.4.2.min.js"></script> |
| - | |overviewmapcontrol=yes
| + | <script type="text/javascript" src="/university/galleryview-2.1.1/jquery.easing.1.3.js"></script> |
| - | |scalecontrol=yes
| + | <script type="text/javascript" src="/university/galleryview-2.1.1/jquery.galleryview-2.1.1-pack.js"></script> |
| - | }}
| + | <script type="text/javascript" src="/university/galleryview-2.1.1/jquery.timers-1.2.js"></script> |
| - | {{Comments}}
| + | |
| | + | |
| | + | <script type="text/javascript"> |
| | + | $(document).ready(function(){ |
| | + | $('#photos').galleryView({ |
| | + | panel_width: 630, |
| | + | panel_height: 220, |
| | + | frame_width: 50, |
| | + | frame_height: 30, |
| | + | transition_speed: 1200, |
| | + | transition_interval: 6000, |
| | + | background_color: '#222', |
| | + | border: 'none', |
| | + | easing: 'easeInOutBack', |
| | + | pause_on_hover: true, |
| | + | nav_theme: 'light', |
| | + | overlay_opacity: 0.5, |
| | + | filmstrip_position: 'bottom', |
| | + | overlay_position: 'bottom' |
| | + | }); |
| | + | }); |
| | + | </script> |
| | + | |
| | + | <ul id="photos"> |
| | + | |
| | + | <li> |
| | + | <span class="panel-overlay"><a href="/university/index.php/Encyclopedia_Index">The AJU Encyclopedia - Click here</a><br />Search the web's most comprehensive glossary on jewelry related terms</span> |
| | + | <img src="/university/images/d/d6/Encygalpic630x220.png" /> |
| | + | </li> |
| | + | <li> |
| | + | <span class="panel-overlay"><a href="/university/index.php/Articles">Articles - Click here</a><br />Read our indepth articles on jewelry history, art history and much, much more...</span> |
| | + | <img src="/university/images/d/db/Articlegal2.png" /> |
| | + | </li> |
| | + | <li> |
| | + | <span class="panel-overlay"><a href="/university/index.php/Timeline">Timeline - Click here</a><br />Chronology!</span> |
| | + | <img src="/university/images/5/5c/Timelinegal.png" /> |
| | + | </li> |
| | + | <li> |
| | + | <span class="panel-overlay"><a href="/university/index.php/Library">The AJU Library - Click here</a><br />Read hundreds of books in our online research library</span> |
| | + | <img src="/university/images/7/79/Bookworm.png" /> |
| | + | </li> |
| | + | <li> |
| | + | <span class="panel-overlay"><a href="/university/index.php/Image_Gallery">The Image Gallery - Click here</a><br />Access to thousands of images</span> |
| | + | <img src="/university/images/7/7c/Imagegal.png" /> |
| | + | </li> |
| | + | <li> |
| | + | <span class="panel-overlay"><a href="/university/index.php/Videos">AJU Videos - Click here</a><br />Jewelry history made easy, bring out the popcorn!</span> |
| | + | <img src="/university/images/8/80/Videogal6.png" /> |
| | + | </li> |
| | + | <li> |
| | + | <span class="panel-overlay"><a href="/university/index.php/Calendar">The AJU Calendar - Click here</a><br />Find out when and where you can visit great exhibits</span> |
| | + | <img src="/university/images/b/b5/Calendargal2.png" /> |
| | + | </li> |
| | + | <li> |
| | + | <span class="panel-overlay"><a href="/university/index.php/Forum">The AJU Forum - Click here</a><br />Communicate with fellow jewelry lovers and learn from the gurus</span> |
| | + | <img src="/university/images/2/23/Forumgal_copy.png" /> |
| | + | </li> |
| | + | |
| | + | |
| | + | </ul> |
| | + | </includeonly> |
