Widget:Frontpagegallery: Difference between revisions

From CSDMS
m Created page with '<noinclude>This widget displays a gallery of images for the main page. Dependencies: <pre> /wiki/skins/csdmsskin_new/js/jquery/jquery-galleryview-2.1.1/* </pre> {{#Widget:Front…'
 
Undo revision 52476 by WikiSysop (talk)
 
(122 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude>This widget displays a gallery of images for the main page.
<noinclude>This widget displays a gallery of images for the main page.


Dependencies:
<center>{{#Widget:Frontpagegallery}}</center>
<pre>
/wiki/skins/csdmsskin_new/js/jquery/jquery-galleryview-2.1.1/*
</pre>
 
{{#Widget:Frontpagegallery}}
</noinclude><includeonly>
</noinclude><includeonly>
<!--Widget:Frontpagegallery-->
<!--Widget:Frontpagegallery-->
<style type="text/css">
<style type="text/css">
.galleryview { font-size: 12px; font-family: Arial, Helvetica, sans-serif; width: 620px; height: 320px; }
#photos { }
.galleryview .panel-overlay h2, .panel-overlay p { margin: .3em 0 !important; }
 
.galleryview .panel-overlay h2 { border-bottom: none; line-height: normal; }
/* GALLERY CONTAINER */
.galleryview .panel-overlay h2 a { text-decoration: none !important; }
.gallery { background: #888f88; border: 0px solid #aaa; padding: 0px;}
.panel-overlay p { line-height: 1.2em; }
 
/* 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>
</style>
<script type="text/javascript" src="/wiki/skins/csdmsskin_new/js/jquery/jquery-galleryview-2.1.1/jquery.galleryview-2.1.1-pack.js"></script>
 
<script type="text/javascript" src="/wiki/skins/csdmsskin_new/js/jquery/jquery-galleryview-2.1.1/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="/mediawiki/skins/csdmsskin_new/galleryview-2.1.1/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<script type="text/javascript" src="/mediawiki/skins/csdmsskin_new/galleryview-2.1.1/jquery.easing.1.3.js"></script>
$(document).ready(function(){
<script type="text/javascript" src="/mediawiki/skins/csdmsskin_new/galleryview-2.1.1/jquery.galleryview-2.1.1-pack.js"></script>
if ($.browser.msie) { theme = "gif"; } else { theme = "light"; }
<script type="text/javascript" src="/mediawiki/skins/csdmsskin_new/galleryview-2.1.1/jquery.timers-1.2.js"></script>
$('#photos').galleryView({ panel_width: 620, panel_height: 320, transition_interval: 7000, border: "1px solid #CCC", pause_on_hover: true, nav_theme: theme });
 
$('#photos').css("margin", "0 auto");
<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>
</script>
<div id="photos" class="galleryview">
<!--Better Biofuels-->
<div class="panel" style="display:none;">
<a href="/wiki/Models" onclick="pageTracker._trackEvent('Main Page Gallery', 'Click', 'Better Biofuels');">
<img src="/wiki/images/8/8b/Rann_of_Kutch_India_w230.jpg" width="620" height="563" alt="Bubbles Forming Within a Vial of Biofuel" />
</a>
<div class="panel-overlay">
<h2><a href="/wiki/Models" onclick="pageTracker._trackEvent('Main Page Gallery', 'Click', 'Better Biofuels');">Better Biofuels</a></h2>
<p>
Studying Plant cell walls for better biofuels at Lawrence Berkeley National Laboratory and the National Renewable Energy Laboratory.
</p>
</div>
</div>
<!--end Better Biofuels-->


</div></includeonly>
<ul id="photos">
<!--Meeting 2013-->
    <li>
    <span class="panel-overlay"><a href="/wiki/Form:CSDMS_annual_meeting">CSDMS 2013 meeting, March 23-25<sup>th</sup></a><br />CSDMS 2.0: Moving Forward. Registration deadline: February 14<sup>th</sup></span>
    <img src="/mediawiki/images/Frontpage_meeting_madeby_TEDxBoulder.jpg" />
    </li>
 
 
<!--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>
<!--Wordle for DOI-->
    <li>
    <span class="panel-overlay"><a href="/wiki/DOI system for models">DOI system for models</a><br />Models in the CSDMS repository now have their own digital identifier</span>
    <img src="/mediawiki/images/Wordle-DOI.png" />
    </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>
<!--Meeting 2011-->
<!--    <li>
    <span class="panel-overlay"><a href="/wiki/CSDMS_meeting_2011">Presentations and more of the CSDMS 2011 meeting</a><br />Impact of time and process scales</span>
    <img src="/mediawiki/images/Frontpage_meeting_madeby_TEDxBoulder.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/Globe_puzzle.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/Beach2a_(ippei_+_janine_Creative_commons_license_Flickr).jpg" />
    </li>
 
    </ul>
</includeonly>

Latest revision as of 10:48, 29 December 2012

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

Retrieved from "https://csdms.colorado.edu/csdms_wiki/index.php?title=Widget:Frontpagegallery&oldid=52477"