From 8b46241a43f7f2654009159dfe5fe6fb3befa7ac Mon Sep 17 00:00:00 2001
From: Matthew Juhl <mjuhl24@gmail.com>
Date: Wed, 16 Sep 2009 18:17:40 +0000
Subject: [PATCH] Add scrolling capability to video thumbnails.
---
.../views/default/customindex/content.php | 122 +++++++++++++++++-
.../views/default/customindex/globesplash.js | 8 +-
2 files changed, 120 insertions(+), 10 deletions(-)
diff --git a/customindex/views/default/customindex/content.php b/customindex/views/default/customindex/content.php
index 3685af47..9a533836 100644
--- a/customindex/views/default/customindex/content.php
+++ b/customindex/views/default/customindex/content.php
@@ -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>
diff --git a/customindex/views/default/customindex/globesplash.js b/customindex/views/default/customindex/globesplash.js
index b977cae2..6bb0bce7 100644
--- a/customindex/views/default/customindex/globesplash.js
+++ b/customindex/views/default/customindex/globesplash.js
@@ -1,6 +1,6 @@
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"),
--
GitLab