Skip to content
Snippets Groups Projects
Commit 8b46241a authored by Matthew Juhl's avatar Matthew Juhl
Browse files

Add scrolling capability to video thumbnails.

parent 581d67ee
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
customindex/views/default/customindex/content.php
+ 116
− 6
View file @ 8b46241a
......@@ -23,6 +23,98 @@
<script type="text/javascript" src="http://globe.poly9.com/api.js"></script>
<script type="text/javascript" src="<?php echo $CONFIG->url ?>mod/customindex/witw_people.js"></script>
<script type="text/javascript" src="<?php echo $CONFIG->url ?>mod/customindex/views/default/customindex/globesplash.js"></script>
<?php echo '<script type="text/javascript">WDN.loadJS("'.$vars['url'] . 'mod/unl_theme/scripts/jquery.tools.min.js"); $(document).ready(function(){$("div.scrollable").scrollable()});</script>'; ?>
<style type="text/css">
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
div.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 538px;
height:90px;
}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it's enough that you set width and height for the root element and
not for this element.
*/
div.scrollable div.items {
/* this cannot be too large */
width:20000em;
position:absolute;
}
/*
a single item. must be floated in horizontal scrolling.
typically, this element is the one that *you* will style
the most.
*/
div.scrollable div.items div {
float:left;
}
/* this makes it possible to add next button beside scrollable */
.scrollable {
float:left;
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
background:url(http://static.flowplayer.org/tools/img/scrollable/arrow/hori_large.png) no-repeat;
display:block;
width:30px;
height:30px;
float:left;
margin-top:20px;
cursor:pointer;
font-size:1px;
}
/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 27px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
/* left */
a.left { margin-left: 5px; margin-right: 5px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
/* up and down */
a.up, a.down {
background:url(http://static.flowplayer.org/tools/img/scrollable/arrow/hori_large.png) no-repeat;
float: none;
margin: 10px 50px;
}
/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }
/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }
/* disabled navigational button */
a.disabled {
visibility:hidden !important;
}
div.items a.active {
border: none;
}
</style>
<!-- begin splash code from ucommcoleman/workspace/wdntempaltes/splash.shtml -->
<div id="splashwrapper">
......@@ -269,6 +361,28 @@
</div>
<div id="poster3" style="display:none;">
<div style="position:absolute; margin-top: 408px;">
<a class="prevPage browse left"></a>
<div id="promoVideoList0" class="scrollable">
<div class="items">
<a href="http://ucomm.unl.edu/av/video/pyotm/PutYourselfOnTheMap.mp4"><img src="mod/customindex/videoThumbPromo.jpg" alt="Promo Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/JerryHudginsPYOTM.mp4"><img src="mod/customindex/videoThumbHudgins.jpg" alt="Jerry Hudgins Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/MicrogravityU_PYOTM.mp4"><img src="mod/customindex/videoThumbMicrogravity.jpg" alt="Microgravity Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/ZNETprojectPYOTM.mp4"><img src="mod/customindex/videoThumbZNet.jpg" alt="Zero Net Energy Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/EricaPetersonPYOTM.mp4"><img src="mod/customindex/videoThumbErica.jpg" alt="Video Thumbnail" /></a>
<!-- -->
<a href="http://ucomm.unl.edu/av/video/pyotm/JerryHudginsPYOTM.mp4"><img src="mod/customindex/videoThumbHudgins.jpg" alt="Jerry Hudgins Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/MicrogravityU_PYOTM.mp4"><img src="mod/customindex/videoThumbMicrogravity.jpg" alt="Microgravity Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/ZNETprojectPYOTM.mp4"><img src="mod/customindex/videoThumbZNet.jpg" alt="Zero Net Energy Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/EricaPetersonPYOTM.mp4"><img src="mod/customindex/videoThumbErica.jpg" alt="Video Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/JerryHudginsPYOTM.mp4"><img src="mod/customindex/videoThumbHudgins.jpg" alt="Jerry Hudgins Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/MicrogravityU_PYOTM.mp4"><img src="mod/customindex/videoThumbMicrogravity.jpg" alt="Microgravity Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/ZNETprojectPYOTM.mp4"><img src="mod/customindex/videoThumbZNet.jpg" alt="Zero Net Energy Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/EricaPetersonPYOTM.mp4"><img src="mod/customindex/videoThumbErica.jpg" alt="Video Thumbnail" /></a>
</div>
</div>
<a class="nextPage browse right"></a>
</div>
<div id="promoVideo">This is the content replaced by the video.
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
......@@ -288,12 +402,8 @@
var attributes = {}
swfobject.embedSWF("http://www.unl.edu/ucomm/templatedependents/templatesharedcode/scripts/components/mediaplayer/player.swf", "promoVideo", "640", "408", "10.0.0", false, flashvars, params, attributes);
</script>
<div id="promoVideoList">
<a href="http://ucomm.unl.edu/av/video/pyotm/JerryHudginsPYOTM.mp4"><img src="mod/customindex/videoThumbHudgins.jpg" alt="Jerry Hudgins Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/MicrogravityU_PYOTM.mp4"><img src="mod/customindex/videoThumbMicrogravity.jpg" alt="Microgravity Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/ZNETprojectPYOTM.mp4"><img src="mod/customindex/videoThumbZNet.jpg" alt="Zero Net Energy Thumbnail" /></a>
<a href="http://ucomm.unl.edu/av/video/pyotm/EricaPetersonPYOTM.mp4"><img src="mod/customindex/videoThumbErica.jpg" alt="Video Thumbnail" /></a>
</div>
</div>
</div>
</div>
......
customindex/views/default/customindex/globesplash.js
+ 4
− 4
View file @ 8b46241a
function showLinks() {
WDN.jQuery("#promoVideoList").show();
WDN.jQuery("#promoVideoList0").show();
};
WDN.jQuery(window).load(function(){
......@@ -27,12 +27,12 @@
}
});
//Controls for the video section
WDN.jQuery('#promoVideoList a').click(function() {
WDN.jQuery("#promoVideoList").hide();
WDN.jQuery('#promoVideoList0 a').click(function() {
WDN.jQuery("#promoVideoList0").hide();
//unload the current swfObject
swfobject.removeSWF("promoVideo");
//create a new div since it was removed
WDN.jQuery('#poster3').prepend("<div id='promoVideo'></div>");
WDN.jQuery('#poster3').append("<div id='promoVideo'></div>");
//run swfObject again with the new video
var flashvars = {
file: WDN.jQuery(this).attr("href"),
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment