Widget:Widgets Catalog - Revision history

Dl88008: Created page with "This widget displays a gallery of images for the main page. {{#Widget:MainPageGallery}}
2013-01-01T00:32:07Z

Created page with "<noinclude>This widget displays a gallery of images for the main page. <center>{{#Widget:MainPageGallery}}</center> </noinclude><includeonly>  <s..."

New page
<noinclude>This widget displays a gallery of images for the main page.

<center>{{#Widget:MainPageGallery}}</center>
</noinclude><includeonly>

<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: white; 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="/w/galleryview-2.1.1/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/w/galleryview-2.1.1/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/w/galleryview-2.1.1/jquery.galleryview-2.1.1-pack.js"></script>
<script type="text/javascript" src="/w/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="/index.php">SCIENTOLIPEDIA</a><br />All About Scientology</span>
<img src="/images" />
</li>
<li>
<span class="panel-overlay"><a href="http://scientolipedia.org/index.php?title=File:Anglerfish.jpg</a><br />Anthology Article by Ian Waxler</span>
<img src="/images" />
</li>
<li>
<span class="panel-overlay"><a href="http://scientolipedia.org/index.php?title=File:LRH_Ship12.jpg">[[Ken Urquhart - What Was Ron Really Like?]]</a><br />What Was Ron Really Like</span>
<img src="/images" />
</li>

</ul>
</includeonly>