Test
From NUEESS
(Difference between revisions)
m |
m |
||
Line 1: | Line 1: | ||
- | {{# | + | <noinclude>This widget displays a gallery of images for the main page. |
- | + | ||
- | + | <center>{{#Widget:MainPageGallery}}</center> | |
- | + | </noinclude><includeonly> | |
- | + | <!--Widget:MainPageGallery--> | |
- | + | <style type="text/css"> | |
- | + | #photos { } | |
- | + | ||
- | + | /* GALLERY CONTAINER */ | |
- | + | .gallery { background: #888f88; border: 1px solid #aaa; padding: 1px;} | |
- | + | ||
- | + | /* 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> | ||
+ | |||
+ | <script type="text/javascript" src="/university/galleryview-2.1.1/jquery-1.4.2.min.js"></script> | ||
+ | <script type="text/javascript" src="/university/galleryview-2.1.1/jquery.easing.1.3.js"></script> | ||
+ | <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> | ||
+ | |||
+ | |||
+ | <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> |
Latest revision as of 16:20, 16 December 2011
This widget displays a gallery of images for the main page.
Whos here now: Members 0 Guests 0 Bots & Crawlers 14 |