PDO $dbh,
$gateway = null
) {
- $GLOBALS['styleSheets'][]
- = MEDIA_APP_BASE_URL . 'gallery/colorbox/colorbox.css';
- $GLOBALS['bottomScripts'][]
- = MEDIA_APP_BASE_URL . 'libjs/plugins/colorbox/1.3.15/jquery.colorbox-min.js';
+ //$GLOBALS['styleSheets'][]
+ // = MEDIA_APP_BASE_URL . 'gallery/colorbox/colorbox.css';
+ //$GLOBALS['bottomScripts'][]
+ // = MEDIA_APP_BASE_URL . 'libjs/plugins/colorbox/1.3.15/jquery.colorbox-min.js';
+ $GLOBALS['styleSheets'][] = MEDIA_BASE_URL . 'fancybox/jquery.fancybox.css';
+ $GLOBALS['bottomScripts'][] = MEDIA_BASE_URL . "fancybox/jquery.fancybox.js";
$GLOBALS['bottomScripts'][]
= MEDIA_BASE_URL . 'Toolkit/Videos/libjs/videos.js';
$dbh = Toolkit_Database::getInstance();
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:width, innerHeight:height});
$('select.posSelect').each(function () {
$(this).change(function(){
var id = $(this).attr('rel');
};
$(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'
+ });
+});
<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">
+ <!--<h2>Check out our Video Spotlight</h2>-->
+ <!--<a id="video_link_img" href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1" class="colorbox" style="background: url(http://img.youtube.com/vi/{vCode}/0.jpg) 50% 50%; background-size: cover;">
+ <img src="http://img.youtube.com/vi/{vCode}/0.jpg">
</a>
- <p>
- <a href="{videoUrl}">See All Our Videos</a>
- </p>
+ <a id="video_link_txt" href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1" class="colorbox">{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>
-<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 id="video_wrapper">
+<!--<h2>Videos</h2>-->
+<ul id="videoGallery">
+ {foreach:videos,v}
+ <li>
+ <a href="http://www.youtube.com/embed/{v[code]}?rel=0&hd=1" class="various fancybox.iframe" id="vidimg">
+ <img src="http://img.youtube.com/vi/{v[code]}/0.jpg">
+ <span class="vidtitle">{v[title]:h}<span class="play"></span></span>
+
+ </a>
+ </li>
+ {end:}
+</ul>
</div>
+
+<script type="text/javascript">
+var screenWidth = 0;
+var colCount = 0;
+var rowCount = 0;
+var cellCount = 0;
+var maxHeight = 0;
+
+$(window).load(function() {
+ getScreenWidth();
+ fixVidTitles();
+});
+
+$( window ).resize(debouncer(function(e) {
+ getScreenWidth();
+ $('#videoGallery #vidimg').css("height", "auto");
+ colCount = 0;
+ rowCount = 0;
+ cellCount = 0;
+ maxHeight = 0;
+ fixVidTitles();
+}));
+
+
+function fixVidTitles() {
+ /* Get the number of columns */
+ if(screenWidth >= 600) {
+ colCount = 4;
+ } else if (screenWidth < 599) {
+ colCount = 2;
+ }
+ $('#videoGallery #vidimg').each(function(index) {
+ /* Get the current row. */
+ if(index == 0) {
+ rowCount = 0;
+ } else {
+ rowCount = Math.floor(index / colCount);
+ }
+ /* Get the current cell withing this row. */
+ var intRegex = /^\d+$/;
+ if((intRegex.test(index / colCount)) && (cellCount != 0)) {
+ cellCount = 0;
+ maxHeight = 0;
+ } else {
+ if(index != 0) {
+ cellCount++;
+ }
+ }
+ /* Find the tallest height in this row. */
+ var currentHeight = $(this).outerHeight();
+ if(currentHeight > maxHeight) {
+ maxHeight = currentHeight;
+ }
+ /* Set other cells in this row to the new max height */
+ if((cellCount == colCount - 1) || (index + 1 == $('#videoGallery #vidimg').length)) {
+ for(i = 0; i < cellCount + 1; i++) {
+ var oldHeight = $('#videoGallery #vidimg').eq(index-i).height();
+ $('#videoGallery #vidimg').eq(index-i).css("height", maxHeight + "px");
+ var newPadding = maxHeight - oldHeight;
+ //$('#hHlines ul li a h3.hHlinesHeader').eq(index-i).css("padding-top", newPadding + "px");
+ }
+ }
+ });
+}
+
+/* Get screen Width and Send it to global variable. */
+function getScreenWidth() {
+ screenWidth = $.viewportW();
+}
+
+/* Run resize events only when the users pauses their resize movement. */
+function debouncer(func,timeout) {
+ var timeoutID , timeout = timeout || 200;
+ return function () {
+ var scope = this , args = arguments;
+ clearTimeout( timeoutID );
+ timeoutID = setTimeout( function () {
+ func.apply( scope , Array.prototype.slice.call( args ) );
+ } , timeout );
+ }
+}
+</script>
\ No newline at end of file
--- /dev/null
+<?php
+$gallery = new Toolkit_Videos_WebPageDecorator();
+echo $gallery->toHtml(
+ Toolkit_Database::getInstance(),
+ null
+);
\ No newline at end of file
ul#videoGallery li {
display: block;
float: left;
- width: 22%;
+ width: 180px;
margin: 0 1.5% 24px 1.5%;
padding: 0;
border: 1px solid #DDDFDD;
ul#videoGallery li:nth-child(4n-3) {
clear: left;
width: 180px;
- margin: 0 3% 24px 0;
+ margin: 0 1% 24px 0;
}
ul#videoGallery li:nth-child(4n-2) {
width: 180px;
- margin: 0 3% 24px 0;
+ margin: 0 1% 24px 0;
}
ul#videoGallery li:nth-child(4n-1) {
width: 180px;
- margin: 0 3% 24px 0;
+ margin: 0 1% 24px 0;
}
ul#videoGallery li:nth-child(4n) {
width: 180px;
position: relative;
z-index: 10;
display: block;
- width: 100%;
+ width: 90%;
overflow: hidden;
padding: 10px;
text-decoration: none;
projects / web / CedarvilleMarine.git / commitdiff