Video Gallery + Fancybox

Bunch of CSS tweaks, both featured videos and gallery should now
work just fine. Gallery made to look more like petoskeyarea.

diff --git a/Toolkit/Page.php b/Toolkit/Page.php
index d7127f6..988d8bf 100755 (executable)
--- a/Toolkit/Page.php
+++ b/Toolkit/Page.php
@@ -160,6 +160,8 @@ class Toolkit_Page
         $GLOBALS['topScripts'][] = JQUERY_CDN_JS;
         $GLOBALS['bottomScripts'][] = MEDIA_BASE_URL . 'js/foundation.min.js';
         $GLOBALS['bottomScripts'][] = MEDIA_BASE_URL . 'js/pageSetup.js';
+        $GLOBALS['styleSheets'][] = $this->mediaBaseURL . 'fancybox/jquery.fancybox.css';
+        $GLOBALS['bottomScripts'][] = $this->mediaBaseURL . "fancybox/jquery.fancybox.js";
     }
 
     /**
@@ -186,12 +188,12 @@ class Toolkit_Page
 
     private function _video()
     {
-        $GLOBALS['styleSheets'][]
-           = GLM_APP_BASE_URL . 'gallery/colorbox/colorbox.css';
-        $GLOBALS['bottomScripts'][]
-            = GLM_APP_BASE_URL . 'libjs/plugins/colorbox/1.3.15/jquery.colorbox-min.js';
-        $GLOBALS['bottomScripts'][]
-            = BASE_URL . 'Toolkit/Videos/libjs/thickbox.js';
+        //$GLOBALS['styleSheets'][]
+        //   = GLM_APP_BASE_URL . 'gallery/colorbox/colorbox.css';
+        //$GLOBALS['bottomScripts'][]
+        //    = GLM_APP_BASE_URL . 'libjs/plugins/colorbox/1.3.15/jquery.colorbox-min.js';
+        //$GLOBALS['bottomScripts'][]
+        //    = BASE_URL . 'Toolkit/Videos/libjs/thickbox.js';
         $GLOBALS['bottomScripts'][]
             = BASE_URL . 'Toolkit/Videos/libjs/videos.js';
         $dbh = Toolkit_Database::getInstance();

diff --git a/Toolkit/Videos/WebDecorator.php b/Toolkit/Videos/WebDecorator.php
index 50c2092..c22d952 100644 (file)
--- a/Toolkit/Videos/WebDecorator.php
+++ b/Toolkit/Videos/WebDecorator.php
@@ -80,7 +80,7 @@ class Toolkit_Videos_WebDecorator
             if ($row) {
                 $tpl  = new HTML_Template_Flexy($this->_flexyOptions);
                 $page = new stdClass;
-                $page->videoUrl = Toolkit_Template_Page::getSeoUrl($gateway, 189);
+                $page->videoUrl = Toolkit_Template_Page::getSeoUrl($gateway, 37);
                 $videoMapper
                     = new Toolkit_Videos_VideoMapper($dbh);
                 $video = $videoMapper->getVideoById($row['id'], false);

diff --git a/Toolkit/Videos/config.ini b/Toolkit/Videos/config.ini
index ced83b7..af80382 100644 (file)
--- a/Toolkit/Videos/config.ini
+++ b/Toolkit/Videos/config.ini
@@ -1,6 +1,6 @@
 [conf]
 applicationName = "Videos"
-featuredVideos = Off
+featuredVideos = On
 
 [listing type]
 singular = "Video"

diff --git a/Toolkit/Videos/libjs/videos.js b/Toolkit/Videos/libjs/videos.js
index 6080caf..aa764e6 100644 (file)
--- a/Toolkit/Videos/libjs/videos.js
+++ b/Toolkit/Videos/libjs/videos.js
@@ -1,6 +1,8 @@
 var GLMColorBox = {
     init: function() {
-        $('a.colorbox').colorbox({iframe: true, innerWidth:425, innerHeight:344});
+               var width = $(window).width() * .85;
+        var height = $(window).height() * .8;
+        //$('a.colorbox').colorbox({iframe: true, innerWidth:425, innerHeight:344});
         $('select.posSelect').each(function () {
             $(this).change(function(){
                 var id = $(this).attr('rel');
@@ -12,3 +14,17 @@ var GLMColorBox = {
 };
 
 $(document).ready(GLMColorBox.init);
+
+$(document).ready(function() {
+       $(".various").fancybox({
+               maxWidth        : 1200,
+               maxHeight       : 800,
+               fitToView       : false,
+               width           : '100%',
+               height          : '100%',
+               autoSize        : false,
+               closeClick      : false,
+               openEffect      : 'none',
+               closeEffect     : 'none'
+       });
+});

diff --git a/Toolkit/Videos/templates/webDecorator.html b/Toolkit/Videos/templates/webDecorator.html
index d7114d0..b0414f5 100644 (file)
--- a/Toolkit/Videos/templates/webDecorator.html
+++ b/Toolkit/Videos/templates/webDecorator.html
@@ -1,11 +1,19 @@
 <div id="v" class="hBox">
-       <h2>Check out our Video Spotlight</h2>
-       <h3>{title:h}</h3>
-       <a href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1" class="colorbox">
-               <img src="http://img.youtube.com/vi/{vCode}/0.jpg" width="400">
-               <img src="assets/videoOverlay.png" width="400" id="videoOverlay">
+            <a href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1" class="various fancybox.iframe vidimg">
+            <img src="assets/video_image.png">
+            <span class="vidoverlay"></span> 
        </a>
-               <p>
-               <a href="{videoUrl}">See All Our Videos</a>
-       </p>
+       <a class="video_link_txt" href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1">{title}</a>
+       
+               
+    <!-- <p>{descr}</p> -->
+       <!-- <a id="video_link_main" href="{videoUrl}">See All Our Videos</a> -->
+       
+       <!-- 
+       <a href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1" class="various fancybox.iframe" id="vidimg">
+               <img src="http://img.youtube.com/vi/{vCode}/0.jpg">
+               <span id="video_link_txt">Watch {title}</span>
+               <span id="vidoverlay"></span>
+       </a>
+       <a id="video_link_main" href="{videoUrl}">See All Our Videos</a> -->
 </div>

diff --git a/Toolkit/Videos/templates/webPageDecorator.html b/Toolkit/Videos/templates/webPageDecorator.html
index 71622ca..257e1d9 100644 (file)
--- a/Toolkit/Videos/templates/webPageDecorator.html
+++ b/Toolkit/Videos/templates/webPageDecorator.html
@@ -1,14 +1,13 @@
-<div id="videoGallery">
-  {foreach:videos,v}
-  {if:v[firstInRow]}<div class="vRow">{end:}
-  <div class="vThumb">
-    <a href="http://www.youtube.com/embed/{v[code]}?rel=0&hd=1" class="colorbox">
-      <img src="http://img.youtube.com/vi/{v[code]}/default.jpg">
-    </a>
-    <div class="vTitle">
-      {v[title]:h}
-    </div>
-  </div>
-  {if:v[lastInRow]}</div><!-- /.galleryRow --> {end:}
-  {end:}
-</div>
+<ul id="videoGallery">
+    {foreach:videos,v}
+<!--        {if:v[firstInRow]}<div class="vRow">{end:}-->
+            <li class="vThumb">
+                <a href="http://www.youtube.com/embed/{v[code]}?rel=0&hd=1" class="various fancybox.iframe vidimg">
+                    <img src="http://img.youtube.com/vi/{v[code]}/default.jpg">
+                
+                <span class="vTitle">{v[title]:h}<span class="play"></span></span>
+                </a>
+            </li>
+<!--        {if:v[lastInRow]}</div> /.galleryRow  {end:}-->
+    {end:}
+</ul>

diff --git a/assets/video_overlay.png b/assets/video_overlay.png
new file mode 100644 (file)
index 0000000..f67bb11
Binary files /dev/null and b/assets/video_overlay.png differ

diff --git a/styles.css b/styles.css
index 8d91f50..e2a59fd 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -670,10 +670,11 @@ aside.right-off-canvas-menu ul.off-canvas-list li > ul.open {
 
 /* Homepage Video */
 #home_video_wrapper {
-       float: right;
-       width: 32.7%;
-       margin: 0 0 14px 3%;
+/*     float: left;*/
+/*     width: 32.7%;*/
+/*     margin: 0 0 14px 3%;*/
        overflow: hidden;
+        text-align: center !important;
 }
 #home_video_wrapper .hBox {
        display: block;
@@ -688,12 +689,13 @@ aside.right-off-canvas-menu ul.off-canvas-list li > ul.open {
        /*height: 250px;*/
 }
 #home_video_wrapper .hBox a.various img {
-       display: block;
+/*     display: block;
        width: 100%;
-       /*margin: -10% 0;*/
-       margin: 0;
+        text-align: center !important;
+       margin: -10% 0;
+       margin: 0;*/
 }
-#home_video_wrapper .hBox a.various #video_link_txt {
+#home_video_wrapper .hBox a.various .video_link_txt {
        display: block;
        position: absolute;
        top: 0;
@@ -707,24 +709,24 @@ aside.right-off-canvas-menu ul.off-canvas-list li > ul.open {
        font-size: 11px;
        line-height: 13px;
 }
-#home_video_wrapper .hBox a.various:hover #video_link_txt {
+#home_video_wrapper .hBox a.various:hover .video_link_txt {
        color: #FFF;
 }
-#home_video_wrapper .hBox a.various #vidoverlay {
+#home_video_wrapper .hBox a.various .vidoverlay {
        display: block;
        position: absolute;
        width: 20%;
        height: 22.70531400966184%;
        left: 40%;
        top: 38.64734299516908%;
-       background: url(assets/play.png) 50% 50% no-repeat;
+/*     background: url(assets/play.png) 50% 50% no-repeat;*/
        background-size: 100%;
 }
-#home_video_wrapper .hBox a.various:hover #vidoverlay {
-       background: url(assets/play_over.png) 50% 50% no-repeat;
+#home_video_wrapper .hBox a.various:hover .vidoverlay {
+/*     background: url(assets/play_over.png) 50% 50% no-repeat;*/
        background-size: 100%;
 }
-#home_video_wrapper .hBox a#video_link_main {
+#home_video_wrapper .hBox a.video_link_main {
        display: block;
        position: absolute;
        bottom: 0;
@@ -740,14 +742,13 @@ aside.right-off-canvas-menu ul.off-canvas-list li > ul.open {
        text-align: right;
        text-decoration: none;
 }
-#home_video_wrapper .hBox a#video_link_main:hover {
+#home_video_wrapper .hBox a.video_link_main:hover {
        color: #FFF;
 }
 .fancybox-inner {
        overflow: hidden !important;
 }
 
-
 /* Video Gallery */
 #video_wrapper {
        display: block;
@@ -813,7 +814,7 @@ ul#videoGallery li a img {
        display: block;
        width: 100%;
 }
-ul#videoGallery li a span#vidtitle {
+ul#videoGallery li a span.vTitle {
        display: block;
        position: relative;
        width: 100%;
@@ -822,10 +823,11 @@ ul#videoGallery li a span#vidtitle {
        font-size: 12px;
        min-height: 27px;
 }
-ul#videoGallery li a:hover span#vidtitle {
+ul#videoGallery li a:hover span.vTitle {
        color: #3FAC46;
 }
-ul#videoGallery li a span#vidtitle span#play {
+
+.play {
        display: block;
        position: absolute;
        z-index: 11;
@@ -834,13 +836,15 @@ ul#videoGallery li a span#vidtitle span#play {
        right: 0;
        top: 5px;
        background: url(assets/video_overlay.png)0 0 no-repeat;
-       backgorund-size: contain;
+/*     background-size: contain;*/
 }
-ul#videoGallery li:hover a span#vidtitle span#play {
+li:hover .play {
        background-position: 0 -27px;
 }
+
 /**/
 
+
 .bottom-content {
   position: relative;
 }
@@ -897,6 +901,11 @@ footer > .columns {
     margin: 0 auto !important;
   }
 }
+@media only screen and (max-width: 40.063em) { 
+  .play {
+      background: none;
+  }
+}
 footer .adventure-guide p {
   font-size: 18px;
 }
@@ -982,4 +991,4 @@ footer .copyright .separator {
 .txt    { background-image: url(images/file-ext/txt.png);}
 .xls    { background-image: url(images/file-ext/xls.gif);}
 .zip    { background-image: url(images/file-ext/zip.png);}
-.rar    { background-image: url(images/file-ext/rar.gif);}
\ No newline at end of file
+.rar    { background-image: url(images/file-ext/rar.gif);}

diff --git a/templates/template.html b/templates/template.html
index 765c7b0..50381a1 100644 (file)
--- a/templates/template.html
+++ b/templates/template.html
@@ -164,8 +164,8 @@
                   </div>
                 </div>
               </div>
-              <div class="small-12 medium-6 large-4 columns text-center video">
-                <a href="{getToolboxUrl(#37#):h}"><img src="{mediaBaseURL:h}assets/video_image.png" /></a>
+            <div id="home_video_wrapper" flexy:if="isHomePage" class="opensearchserver.ignore small-12 medium-6 large-4 columns text-center video">
+                {if:video}{video:h}{end:}
                 <a href="{getToolboxUrl(#37#):h}"><p>View our Videos</p></a>
               </div>
               <div class="small-12 medium-6 large-3 columns weather">