Widget:Frontpagegallery: Difference between revisions

From CSDMS
← Older editNewer edit →
No edit summary
No edit summary
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:
<pre>
/mediawiki/skins/csdmsskin_new/galleryview-2.1.1/*
</pre>


{{#Widget:Frontpagegallery}}
{{#Widget:Frontpagegallery}}
</noinclude><includeonly>
</noinclude><includeonly>
<!--Widget:Frontpagegallery-->
<!--Widget:MainPageGallery-->
<style type="text/css">
<style type="text/css">
.galleryview { font-size: 12px; font-family: Arial, Helvetica, sans-serif; width: 680px; 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: 1px solid #aaa; padding: 1px;}
.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: 50px; 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="/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.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" src="/mediawiki/skins/csdmsskin_new/galleryview-2.1.1/jquery.timers-1.2.js"></script>
<script type="text/javascript">
 
$(document).ready(function(){
<script type="text/javascript">  
if ($.browser.msie) { theme = "gif"; } else { theme = "light"; }
$(document).ready(function(){
$('#photos').galleryView({ panel_width: 680, panel_height: 320, transition_interval: 7000, border: "1px solid #aaa", pause_on_hover: true, nav_theme: theme });
$('#photos').galleryView({
$('#photos').css("margin", "0 auto");
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: 'bottom',
overlay_position: 'bottom'
});
});
</script>
</script>
<div id="photos" class="galleryview">
 
<!--Voting-->
<ul id="photos">
<div class="panel" style="display:none;">
 
<a href="/wiki/Why_vote_for_model_incorporation" onclick="pageTracker._trackEvent('Front Page Gallery', 'Click', 'Vote to incorporate models in CMT');">
    <li>
<img src="/mediawiki/images/Votingfrontpage.jpg" width="680" height="320" alt="Vote to incorporate models in CMT" />
    <span class="panel-overlay"><a href="/wiki/SummerInstitute2011">The AJU Encyclopedia - Click here</a><br />Search the web's most comprehensive glossary on jewelry related terms</span>
</a>
    <img src="/mediawiki/images/Votingfrontpage.jpg" />
<div class="panel-overlay">
    </li>
<h2><a href="/wiki/Why_vote_for_model_incorporation" onclick="pageTracker._trackEvent('Front Page Gallery', 'Click', 'Vote to incorporate models in CMT');">Vote to incorporate models in CMT</a></h2>
 
<p>
    </ul>
Which models need to be coupled? Give us your opinion.
</includeonly>
</p>
</div>
</div>
<!--end Voting-->
<!--SummerInstitute2011-->
<div class="panel" style="display:none;">
<a href="/wiki/SummerInstitute2011" onclick="pageTracker._trackEvent('Front Page Gallery', 'Click', 'NCED summer institute 2011');">
<img src="/mediawiki/images/SummerInstitute2011frontpage.jpg" width="680" height="320" alt="NCED summer institute 2011" />
</a>
<div class="panel-overlay">
<h2><a href="/wiki/SummerInstitute2011" onclick="pageTracker._trackEvent('Front Page Gallery', 'Click', 'NCED summer institute 2011');">NCED and CSDMS joint Summer Institute</a></h2>
<p>
NCED and CSDMS teach joint Summer Institute on Coastal Processes and Deltas, 10-19th of August, Univ. of Minnesota.
</p>
</div>
</div>
<!--end SummerInstitute2011-->
<!--NSF Data management plan-->
<div class="panel" style="display:none;">
<a href="/wiki/NSF_data_management_plan" onclick="pageTracker._trackEvent('Front Page Gallery', 'Click', 'NSF data management plan');">
<img src="/mediawiki/images/NSF_data_management_plan.jpg" width="680" height="320" alt="NSF data management plan" />
</a>
<div class="panel-overlay">
<h2><a href="/wiki/NSF_data_management_plan" onclick="pageTracker._trackEvent('Front Page Gallery', 'Click', 'NSF data management plan');">CSDMS help with NSF Data Management</a></h2>
<p>
NSF requirements on Data Management; how it involves model source code and data, and find out how CSDMS can help.
</p>
</div>
</div>
<!--end NSF Data management plan-->
<!--CMT modeling Tool-->
<div class="panel" style="display:none;">
<a href="/wiki/CMT_information" onclick="pageTracker._trackEvent('Front Page Gallery', 'Click', 'CSDMS Modeling Tool (CMT)');">
<img src="/mediawiki/images/Globe_puzzle.jpg" width="680" height="320" alt="CMT modeling Tool" />
</a>
<div class="panel-overlay">
<h2><a href="/wiki/CMT_information" onclick="pageTracker._trackEvent('Front Page Gallery', 'Click', 'CSDMS Modeling Tool (CMT)');">CSDMS Modeling Tool (CMT)</a></h2>
<p>
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.
</p>
</div>
</div>
<!--end CMT modeling Tool-->
<!--beach CSDMS HPC cluster-->
<div class="panel" style="display:none;">
<a href="/wiki/Help:CSDMS_HPCC" onclick="pageTracker._trackEvent('Front Page Gallery', 'Click', 'CSDMS HPCC');">
<img src="/mediawiki/images/Beach2a_(ippei_+_janine_Creative_commons_license_Flickr).jpg" width="680" height="320" alt="CSDMS HPCC" />
</a>
<div class="panel-overlay">
<h2><a href="/wiki/Help:CSDMS_HPCC" onclick="pageTracker._trackEvent('Front Page Gallery', 'Click', 'Help:CSDMS_HPCC');">High Performance Computing Cluster (Code name: beach)</a></h2>
<p>
CSDMS High Performance Computing Cluster (Beach) is freely available for CSDMS members.
</p>
</div>
</div>
<!--END beach CSDMS HPC cluster-->
</div></includeonly>

Revision as of 09:54, 23 June 2011

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=24061"