video list 版面設計完成(no grid)

video-list.php

@@ -51,9 +51,27 @@ if (!isset($_SESSION['loggedin'])) {
 	<!-- Icon -->
 	<link rel="shortcut icon" href="assets/images/favicon.ico" />
 	<style>
+		.panel {
+			position: relative;
+		}
+
 		.thumbnails {
-			width: 640px;
-			height: 360px;
+			width: 100%;
+
+		}
+
+		.static {
+			width: 100%;
+			position: absolute;
+			background: white;
+		}
+
+		.static:hover {
+			opacity: 0;
+		}
+
+		.active {
+			width: 100%;
 		}
 	</style>
 </head>
@@ -195,45 +213,32 @@ if (!isset($_SESSION['loggedin'])) {
 			<section role="main" class="content-body">
 				<header class="page-header">
 					<h2>BIM影音網</h2>
+					<button class="mb-xs mt-xs mr-xs btn btn-default right" type="button" style="float: right;" onclick="goBack(parent)">回上層</button>
 				</header>
-				<div class="row">
-					<div class="col-md-6">
+				<div class="row" id="video-list">
+					<!--<div class="col-md-3">
 						<section class="panel">
-							<button type="button" onclick="goBack(parent)">回上層</button>
-							<div class="panel-body" id="video-list">
-
+							<a href="#">
+								<img class="static" src="./assets/videos/教育訓練/108年Revit上課影音檔/1-模型基本操作瀏覽.jpg">
+								<img class="active" src="./assets/videos/教育訓練/108年Revit上課影音檔/1-模型基本操作瀏覽.gif">
+							</a>
+							<div class="panel-body" id="">
 							</div>
-
-							<img class="thumbnails" id="myImg" src="./assets/videos/教育訓練/108年Revit上課影音檔/1-模型基本操作瀏覽.jpg" />
 						</section>
-					</div>
-
-
+					</div>-->
 				</div>
-		</div>
-	</section>
+			</section>
 
 
-	</div>
+		</div>
 	</section>
 	</div>
 	<script>
 		$(document).ready(function() {
-
-			$("#myImg").hover(
-				function() {
-					$(this).attr("src", "./assets/videos/教育訓練/108年Revit上課影音檔/1-模型基本操作瀏覽.gif");
-				},
-				function() {
-					$(this).attr("src", "./assets/videos/教育訓練/108年Revit上課影音檔/1-模型基本操作瀏覽.jpg");
-				}
-			);
 			initList(".");
-
 		});
 
 		function initList(dir) {
-
 			$.ajax({
 				url: "./script/php/video/getDir.php",
 				type: "POST",
@@ -252,18 +257,34 @@ if (!isset($_SESSION['loggedin'])) {
 
 				//directory
 				for (i = 0; i < dir_names.length; i++) {
-					$("#video-list").append("<p id='p_dir" + i + "'></p>");
-					$("#p_dir" + i).append("<i class='fa fa-folder'></i><a href='#' onclick='initList(\"" + dir_names[i]["dir_name"] + "\")'>" + dir_names[i]["dir_name"] + "</a>");
+					$("#video-list").append('<div class="col-md-3">' +
+						'<section class="panel">' +
+						"<a href='#' onclick='initList(\"" + dir_names[i]["dir_name"] + "\")'>" +
+						'<img class="active" src="./assets/images/folder-icon.png">' +
+						'</a>' +
+						'<div class="panel-body" id="">' +
+						"<p><i class='fa fa-folder'></i><a href='#' onclick='initList(\"" + dir_names[i]["dir_name"] + "\")'>" + dir_names[i]["dir_name"] + "</a></p>" +
+						'</div>' +
+						'</section>' +
+						'</div>');
 				}
 
 				//video
 				for (j = 0; j < file_tables.length; j++) {
 					if (file_tables[j]["file_path"].includes(".mp4")) {
-						$("#video-list").append("<p id='p_vid" + j + "'></p>");
-						$("#p_vid" + j).append("<i class='fa fa-video-camera'></i><a href='#' onclick='getVideo(" + file_tables[j]["title"].split("-")[0] + ",\"" + file_tables[j]["title"] + "\")'>" + file_tables[j]["title"] + "</a>");
+						$("#video-list").append('<div class="col-md-3">' +
+							'<section class="panel">' +
+							"<a href='#' onclick='getVideo(" + file_tables[j]["title"].split("-")[0] + ",\"" + file_tables[j]["title"] + "\")'>" +
+							'<img class="static" src="./assets/videos/教育訓練/108年Revit上課影音檔/' + file_tables[j]["title"] + '.jpg">' +
+							'<img class="active" src="./assets/videos/教育訓練/108年Revit上課影音檔/' + file_tables[j]["title"] + '.gif">' +
+							'</a>' +
+							'<div class="panel-body" id="">' +
+							"<p><i class='fa fa-video-camera'></i><a href='#' onclick='getVideo(" + file_tables[j]["title"].split("-")[0] + ",\"" + file_tables[j]["title"] + "\")'>" + file_tables[j]["title"] + "</a></p>" +
+							'</div>' +
+							'</section>' +
+							'</div>');
 					}
 				}
-
 			}).error(function(error) {
 				console.log(error);
 			});