From 8a039a51e0d425cf61338e82b3dd45fb4aef5d25 Mon Sep 17 00:00:00 2001 From: Laury GvR Date: Thu, 14 Aug 2014 11:30:53 -0400 Subject: [PATCH] Video Gallery + Fancybox Bunch of CSS tweaks, both featured videos and gallery should now work just fine. Gallery made to look more like petoskeyarea. --- Toolkit/Page.php | 14 ++--- Toolkit/Videos/WebDecorator.php | 2 +- Toolkit/Videos/config.ini | 2 +- Toolkit/Videos/libjs/videos.js | 18 ++++++- Toolkit/Videos/templates/webDecorator.html | 24 ++++++--- .../Videos/templates/webPageDecorator.html | 27 +++++----- assets/video_overlay.png | Bin 0 -> 1240 bytes styles.css | 51 ++++++++++-------- templates/template.html | 4 +- 9 files changed, 88 insertions(+), 54 deletions(-) create mode 100644 assets/video_overlay.png diff --git a/Toolkit/Page.php b/Toolkit/Page.php index d7127f6..988d8bf 100755 --- 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 --- 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 --- 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 --- 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 --- a/Toolkit/Videos/templates/webDecorator.html +++ b/Toolkit/Videos/templates/webDecorator.html @@ -1,11 +1,19 @@
-

Check out our Video Spotlight

-

{title:h}

- - - + + + -

- See All Our Videos -

+ {title} + + + + + +
diff --git a/Toolkit/Videos/templates/webPageDecorator.html b/Toolkit/Videos/templates/webPageDecorator.html index 71622ca..257e1d9 100644 --- a/Toolkit/Videos/templates/webPageDecorator.html +++ b/Toolkit/Videos/templates/webPageDecorator.html @@ -1,14 +1,13 @@ -
- {foreach:videos,v} - {if:v[firstInRow]}
{end:} -
- - - -
- {v[title]:h} -
-
- {if:v[lastInRow]}
{end:} - {end:} -
+ diff --git a/assets/video_overlay.png b/assets/video_overlay.png new file mode 100644 index 0000000000000000000000000000000000000000..f67bb11ec00acd0f29052e900b1336333a9a0c06 GIT binary patch literal 1240 zcmV;}1Sk86P)P001@!1^@s6G7~a@00004b3#c}2nYxW zd-%|4TRLhOlV=Oskm+rRrQ}3!N|u`f6@PAuWu+5L!r4=nIi< zfsQgaSP&O%nw3ErjDjx$Mra|WEtX_y+^ln$vCUdF(LwAsGZT_D$=&&)_w+7*R<7w~ zFT@`_+>so=&pqGgd49j|Q9RFsq9_V$K?wr@cyi@=p4?XzRLP))K_EN;j@(xZlO|^* zgO&hTVQ|90W?^&*L>&wUZ%s^090i~kh7N!RfJ%6VlE^C?LT1DO(9kqp-_+DJK07<> zv)k=v0NX0TD2k%x!f45r5fT6Z^m@Ier>7_2^ZCwnc6OQo7zCIWfLeH-mIEU*PzwnR zp-||L(uY``1AascuG3XrVVUO)2LfjZcJ{rPyuNp!^tyY^_TU$qFW@fzo z{rxYZWcLBsI)sG5V0g2;yE`~FHT9XzX4?hvpjW>p8wJO4vG(@%mmzF(#b!bxkw{z` z8yh`w6EI0-S2fxSKZX?xu>yUgte=ib=4EOc*eS_j^K(;YoHH4fK zkH>S-@At1rk{1DZo-c#Q>J!Oia>ncR4vmhE{(|B|Sb*4f)|=d>W|GZj?<_7Zo*oz& zn8%tlYKvlJW#zKV<#J9>Pgl~N zg^d1BW!R_m0Is8Euem7AQz zX5C6v)<}-;TK8U6`>rS9AQdl=mEu2aQxA^4eXDiYQd^r!(Nw*Dk73+0(&1}-|ApGx zR9eeeOz$)V-ZOV2=gKvZ)kJ z8Migoowc|-{QEv?sjW?=HH>*@%dRW?KW}$69D822O)Z7UT1fSF&3mSI8zx^r_tvKX zj3{=GWfE3>;whRkYIp1G2R(8X(eUv_vKKWMIKQ^^ha5YpBk z+52%dFj_@FTi3kf#Gb>?Jx!^o>&d&1(hy3L;ssJ=RG+9nviDm^D!Ss3LMneL_Vur| zv8im9y_Wdtf#a?_qP$Jz3*5cr@;}3ob3Z6=Q+bY0 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 --- a/templates/template.html +++ b/templates/template.html @@ -164,8 +164,8 @@ -
- +
+ {if:video}{video:h}{end:}

View our Videos
-- 2.17.1