Widget:Frontpagegallery3: Difference between revisions

← Older edit Newer edit →

Revision as of 15:59, 28 December 2012

This widget displays a gallery of images for the main page.

@@ Line 1: / Line 1: @@
+<noinclude>This widget displays a gallery of images for the main page.
+<center>{{#Widget:Frontpagegallery3}}</center>
+</noinclude><includeonly>
+<!--Widget:Frontpagegallery-->
+<style type="text/css">
+#photos { }
+/* GALLERY CONTAINER */
+.gallery { background: #888f88; border: 0px solid #aaa; padding: 0px;}
+/* LOADING BOX */
+.loader { background: url(loader.gif) center center no-repeat #000; }
+/* GALLERY PANELS */
+.panel {}
+/* 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,
+.panel .overlay-background { height: 55px; padding: 0 1em; }
+/* PANEL OVERLAY BACKGROUND */
+.panel .overlay-background { background: #000; }
+/* 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; }
+/* FILMSTRIP */
+/* 'margin' will define top/bottom margin in completed gallery */
+.filmstrip {display:block;}
+/* FILMSTRIP FRAMES (contains both images and captions) */
+.frame { background: #000;}
+/* WRAPPER FOR FILMSTRIP IMAGES */
+.frame .img_wrap { border: 1px solid #aaa; }
+/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */
+.frame.current .img_wrap { border-color: #fff; }
+/* FRAME IMAGES */
+.frame img { border: 1px #fff; }
+/* FRAME CAPTION */
+.frame .caption { font-size: 11px; text-align: center; color: #888; }
+/* CURRENT FRAME CAPTION */
+.frame.current .caption { color: #ddd; }
+/* POINTER FOR CURRENT FRAME */
+.pointer {
+	border-color: #fff;
+}
+/* TRANSPARENT BORDER FIX FOR IE6 */
+/* NOTE - DO NOT CHANGE THIS RULE */
+*html .pointer {
+	filter: chroma(color=pink);
+}
+</style>
+<script type="text/javascript" src="/mediawiki/skins/csdmsskin_new/galleryview-2.1.1/jquery-1.4.2.min.js"></script>
+<script type="text/javascript" src="/mediawiki/skins/csdmsskin_new/galleryview-2.1.1/jquery.easing.1.3.js"></script>
+<script type="text/javascript" src="/mediawiki/skins/csdmsskin_new/galleryview-2.1.1/jquery.galleryview-2.1.1-pack.js"></script>
+<script type="text/javascript" src="/mediawiki/skins/csdmsskin_new/galleryview-2.1.1/jquery.timers-1.2.js"></script>
+<script type="text/javascript">
+	$(document).ready(function(){
+		$('#photos').galleryView({
+			panel_width: 680,
+			panel_height: 320,
+                        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: 'top',
+			overlay_position: 'bottom'
+		});
+	});
+</script>
+<ul id="photos">
+<!--Standard-names-->
+    <li>
+    	<span class="panel-overlay"><a href="/wiki/CSDMS_Standard_Names">CSDMS Standard Names</a><br />Mapping input and output variable names to CSDMS Standard Names in your source code</span>
+    	<img src="/mediawiki/images/Standard-names.png" />
+    </li>
+<!--Student modeling award 2012-->
+     <li>
+    	<span class="panel-overlay"><a href="/wiki/Student_Modeler_Award_2012">Student modeler award</a><br />Apply for the CSDMS annual student modeler award; now open till December 31<sup>st</sup>, 2012.</span>
+    	<img src="/mediawiki/images/Student-modeling-award.jpg" />
+    </li>
+<!--Elected-WG-chairs-->
+    <li>
+    	<span class="panel-overlay"><a href="/wiki/CSDMS_organization#CSDMS_Executive_Committee">Working Group Chairs</a><br />Meet the new and continuing chairs of your Working Group</span>
+    	<img src="/mediawiki/images/WG-elected-chairs.png" />
+    </li>
+<!--Wordle for DOI-->
+     <li>
+    	<span class="panel-overlay"><a href="/wiki/Doi for models">DOI for models</a><br />Models in the CSDMS repository now have their own digital identifier</span>
+    	<img src="/mediawiki/images/Wordle-DOI.png" />
+    </li>
+<!--Meeting 2011-->
+     <li>
+    	<span class="panel-overlay"><a href="/wiki/Form:CSDMS_2011_meeting">Register for the CSDMS 2011 meeting, October 28-30<sup>th</sup></a><br />CSDMS 2011 meeting: Impact of time and process scales.</span>
+    	<img src="/mediawiki/images/Frontpage_meeting_madeby_TEDxBoulder.jpg" />
+    </li>
+<!--Twitter-->
+     <li>
+    	<span class="panel-overlay"><a href="/wiki/Tweets">Follow CSDMS on Twitter</a><br />Be the first to find out what is new; the simple way to keep up with CSDMS</span>
+    	<img src="/mediawiki/images/Twitter_front_page1.jpg" />
+    </li>
+<!--Voting-->
+    <li>
+    	<span class="panel-overlay"><a href="/wiki/Why_vote_for_model_incorporation">Vote to incorporate models in CMT</a><br />Which models need to be coupled? Give us your opinion.</span>
+    	<img src="/mediawiki/images/Votingfrontpage.jpg" />
+    </li>
+<!--NSF Data management plan-->
+    <li>
+    	<span class="panel-overlay"><a href="/wiki/NSF_data_management_plan">NSF data management plan</a><br />NSF requirements on Data Management; how it involves model source code and data, and find out how CSDMS can help.</span>
+    	<img src="/mediawiki/images/NSF_data_management_plan.jpg" />
+    </li>
+<!--CMT modeling Tool-->
+    <li>
+    	<span class="panel-overlay"><a href="/wiki/CMT_information">CSDMS Modeling Tool (CMT)</a><br />CSDMS has developed a user friendly GUI (CMT) to couple and run modules on the CSDMS supercomputer. Find out more on how to download and use the CMT tool.</span>
+    	<img src="/mediawiki/images/Beach2a_(ippei_+_janine_Creative_commons_license_Flickr).jpg" />
+    </li>
+<!--beach CSDMS HPC cluster-->
+    <li>
+    	<span class="panel-overlay"><a href="/wiki/Help:CSDMS_HPCC">High Performance Computing Cluster (Code name: beach)</a><br />CSDMS High Performance Computing Cluster (Beach) is freely available for CSDMS members.</span>
+    	<img src="/mediawiki/images/Globe_puzzle.jpg" />
+    </li>
+    </ul>
+</includeonly>