您正在查詢的標題為:關注組織
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:機動特遣隊
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:基金會設施
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:員工與角色檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:世界線中心頁
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:系列檔案室
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:競賽資料庫
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:異常物品紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:超常事件紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:未解明地點列表
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:基金會故事
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您現在最好給我停下來
本頁面內包含基金會維基內部使用的模板。
嚴禁任何人員在未經網站行政人員
之授權下修訂本頁面
使用方式
請在你所想使用圖片幻燈片的地方,使用以下的代碼來取代標準的圖片框。
請確保你想要使用的圖片都已經上傳到頁面上了,如果你選擇無視這項睿智的提醒,則你的圖片將無法正常的顯示,直到你好好的重新整理整個頁面(Ctrl+Shitf+R)。
[[include component:carousel
| images=photograph.png,old-map.png,jumpscare.gif
| caption=一些圖片
| interval=5
| wiki=scp-wiki
| page=SCP-173
| width=300px
| height=240px
| position=right
| no-caption=false
| background=white
| options=yes
]]
這些選項是什麼
任何標示為斜體字 的部分都是選填 的 ,而其他部分則是必選。
如果你忽略選填 的選項,那它將會被設為預設值。而如果你忽略了非選填的選項,則這個幻燈片將無法正常的運作。
images: | 填寫圖片清單的位置,請使用半型的逗號「,」將每個圖片分隔開來。請確保所有要使用的圖片都已經上傳到指定的頁面上了。 也可以用以 http・https 開始的連結。 這些圖片將會以你所排列的順序,顯示在幻燈片上。 |
links: (選填) |
填寫圖片清單的網址連結,請使用半型的逗號「,」將每個圖片分隔開來。 每個連結以 images 中排列的順序,讓圖像可以被點擊飛到網站。 |
caption: (選填) |
出現在幻燈片下方的說明。 如果你沒有任何的說明,請確保你有將no-caption設定成true。 預設值:"{$caption}" |
interval: (選填) |
如果你在這個選項設置了一個不為零的數字,則幻燈片將在經過這個數字這麼久的秒數後自動換成下一張圖片。 如果你桉了箭頭來手動的更換圖片,或是你將游標懸符在幻燈片上,則圖片將不會繼續輪替。 預設值:"0" |
wiki: | 你幻燈片所使用的圖片所在的wiki網站名稱。舉例來說,scp-wiki、scp-sandbox-3或topia。而以我們自己的網站和沙盒站來說分別是scp-zh-tr和scp-sandbox-zh。 |
page: | 你幻燈片所使用的圖片所在的頁面名稱,如果這個頁面有分類名的話1,請記得將其一併填上。 |
width: (選填) |
你所要設定給這個幻燈片的最大寬度。 預設值: "300px" |
height: (選填) |
你所要設定給這個幻燈片的最大高度。 預設值將根據你所使用的瀏覽器而變。 |
position: (選填) |
根據你所希望幻燈片出現的位置,填入「left」左、「right」右或是「center」中間。 預設值:"right" |
no-caption: (選填) |
如果你不需要使用圖片說明,請將這裡設為"true"。否則,請將這裡留空或者是填入"false",或者是把這整行刪掉。 預設值:"false" |
background: (選填) |
在圖片背後的背景顏色。 預設值:"transparent" |
options: (選填) |
你想要一些播放幻燈片時的細部選項(播放/暫停鈕跟一列小圓圈)嗎?如果不需要的話請填入"yes"以外的任何東西。 預設值:"yes" |
我想讓我的幻燈片橫跨整個頁面,這樣我就能跟 kaktus 一樣,不,甚至比他更酷!
設置你的width為"100%",並且將position設為"center"。
我把寬/高設定成最大的圖片的大小了,但這東西變得太大了!
選用小一點的數字,或者是把你的圖片縮小一點。
{$caption}
基底代碼
幻燈片的HTML架構
<html ng-app="carousel" ng-controller="CarouselController"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script> <script src="http://scp-zh-tr.wikidot.com/local--code/component%3Acarousel/2"></script> <link href="http://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/base/css/style.css" rel="stylesheet"> <link href="http://www.scp-wiki.net/component:theme/code/1" rel="stylesheet"> <link href="http://topia.wikidot.com/local--code/cqb%3Acarousel/4" rel="stylesheet"> </head> <body> <div class="wrapper" id="background"> <div class="carousel"> <div class="horsie" ng-repeat="image in images track by $index" ng-class="[index > $index ? 'past' : null, index === $index ? 'present' : null, index < $index ? 'future' : null]"> <img ng-src="{{image}}" ng-if="!links[$index]"> <a href="{{links[$index]}}" target="_blank" ng-if="links[$index]"><img ng-src="{{image}}"></a> </div> </div> <div class="arrow decrementor" ng-class="index === 0 ? 'inactive' : 'active'" ng-click="increment(-1)"> <div class="image"></div> </div> <div class="arrow incrementor" ng-class="index === images.length-1 ? 'inactive' : 'active'" ng-click="increment(1)"> <div class="image"></div> </div> <div class="bubble-holder" ng-class="[options === 'yes' ? null : 'invisible']"> <div class="bubble" ng-repeat="image in images track by $index" ng-class="[index === $index ? 'present' : null]" ng-click="selectImage($index)"> </div> </div> <div class="control play" ng-click="control('play')" ng-class="[state === 'play' ? 'active' : null, options === 'yes' ? null : 'invisible']"></div> <div class="control pause" ng-click="control('pause')" ng-class="[state === 'pause' ? 'active' : null, options === 'yes' ? null : 'invisible']"></div> </div> </body> </html>
用來運行幻燈片的JS
function getQueryVariable(variable) { var query = document.location.href.match(/\?.*$/g)[0].substring(1); var vars = query.split("&"); for(var i = 0; i < vars.length; i++) { // > var pair = vars[i].split("="); if(pair[0] === variable) return pair[1]; } return false; } (function(){ var carousel = angular .module('carousel',[]) .controller('CarouselController',CarouselController); CarouselController.$inject = ['$scope','$timeout']; function CarouselController($scope,$timeout){ $scope.images = getQueryVariable("images").split(","); $scope.links = getQueryVariable("links").split(","); var wiki = getQueryVariable("wiki") || "scp-wiki"; var page = getQueryVariable("page"); for(var i = 0; i < $scope.images.length; i++) { // > if(!/^https?:\/\//.test($scope.images[i])) $scope.images[i] = `http://${wiki}.wdfiles.com/local--files/${page}/${$scope.images[i]}`; } // $scope.images is an array of image URLs if($scope.links[0] == "{$links}") $scope.links = []; // no parameter given $scope.index = 0; $scope.increment = function(amount) { if(amount > 0 && $scope.index < $scope.images.length-1) { $scope.index += amount; } if(amount < 0 && $scope.index > 0) { $scope.index += amount; } $scope.state = "pause"; } var interval = getQueryVariable("interval") || 0; if(interval === "{$interval}") interval = 0; $scope.state = "play"; if(interval === 0) $scope.state = "pause"; function oscillate() { $timeout(function() { if(!mouseover && $scope.state === "play") { if($scope.index < $scope.images.length-1) { $scope.index++; } else { $scope.index = 0; } } if($scope.state === "play") { oscillate(); } }, interval*1000, true); } var mouseover = false; document.documentElement.onmouseover = function () { mouseover = true; } document.documentElement.onmouseout = function () { mouseover = false; } if($scope.state === "play") { oscillate(); } document.getElementById('background').style.background = getQueryVariable("background"); $scope.selectImage = function(index) { $scope.index = index; $scope.state = "pause"; } $scope.control = function(direction) { switch(direction) { case "play": $scope.state = "play"; oscillate(); break; case "pause": $scope.state = "pause"; break; } } $scope.options = getQueryVariable("options"); if($scope.options === "{$options}") $scope.options = "yes"; } })();
圖片說明框的樣式
.carousel-container { position: relative; z-index: 1; float: right; margin: 0 1em 1em 1em; } .carousel-container.left { float: left; } .carousel-container.center { float: none; clear: both; margin: 0 auto 1em auto; } .carousel-container iframe { position: relative; z-index: 2; width: 334px; border: none; } .carousel-container .carousel-caption { position: relative; background-color: #eee; border: solid 1px #666; padding: 2px 0; font-size: 80%; font-weight: bold; text-align: center; width: 300px; margin-top: -3px; box-shadow: 0 1px 6px rgba(0,0,0,.25); z-index: 3; max-width: 675px; } #page-content .carousel-container .carousel-caption-wrapper { max-width: 673px; } .carousel-container .carousel-caption-wrapper { padding: 0 16px; } .carousel-container .carousel-caption p { margin: 0; padding: 0 10px; } .carousel-container .carousel-caption.true { display: none; }
幻燈片其他細節的樣式
html { width: calc(100% - 32px); height: calc(100% - 4px); margin: 0; padding: 0; } body { width: 100%; height: 100%; margin: 0; padding: 2px 16px; background: transparent; } .wrapper { position: relative; width: 100%; height: 100%; } .carousel{overflow-y: hidden!important;} .carousel { position: relative; width: calc(100% - 2px); height: calc(100% - 2px); overflow-x: hidden; border: 1px solid #666; box-shadow: 0 1px 6px rgba(0,0,0,.25); box-sizing: content-box; } .horsie { position: absolute; height: 100%; width: 100%; top: 0; left: 0; transform: translate(0,0); transition: transform 0.3s ease-in-out; } .horsie img { object-fit: contain; width: 100%; height: 100%; } .horsie.past { transform: translate(-100%,0); } .horsie.future { transform: translate(100%,0); } .arrow { height: 30px; width: 30px; border: 1px solid #666; border-radius: 50%; position: absolute; top: 50%; background: #eee; box-shadow: 0 1px 6px rgba(0,0,0,.25); cursor: pointer; } .arrow .image { height: 30px; width: 30px;position: absolute; top: 0; left: 0; background-position: 50% 50%; background-size: 80% 80%; background-repeat: no-repeat; opacity: 0.6; transition: opacity 0.1s ease-in-out; } .arrow.inactive { cursor: default; } .arrow.inactive .image { opacity: 0; } .decrementor { left: 0; transform: translate(-50%,-50%); } .decrementor .image { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAdElEQVR4AezQJwKAMBQD0DCOjAfD9j1BXVUdR0OxkWzCJvHvD/x5aVxEDMZBWVfAIDB1JQwOY96IUSzGYjCaxdgMJuMwOQJ4c51jlnc0HgsCUs5pPbX82csozaQsFqVuSpksSjIpg0OJBdACqlorw7AEowAAblWUrl8sD5AAAAAASUVORK5CYII='); } .incrementor { right: 0; transform: translate(50%,-50%); } .incrementor .image { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAcUlEQVR4Ae3QpwJAUACF4WM+sU6xV9M0TdI8mmR389j+07878PfSHOjYnYAETTdtP5Sh4VAik8pZlMSkChYlM6mSRalLKWN2FqolVLNqGgsyOE/zOZ+9i5FZTMFgJBaT34gRWUzGYAABKYMZizvm75W1TreU8DMmtioAAAAASUVORK5CYII='); } .bubble-holder { display: flex; position: absolute; width: calc(100% - 60px); height: 20%; justify-content: center; align-items: flex-end; flex-wrap: wrap; align-content: flex-end; bottom: 0; margin: 5px 0; left: 30px; } .bubble { border: 2px solid #666; height: 0; width: 0; margin: 5px; border-radius: 50%; transition: all 0.2s ease-in-out; background-color: white; } .bubble.present { height: 2px; width: 2px; background-color: white; margin: 4px; } .bubble-holder:hover .bubble { height: 6px; width: 6px; margin: 2px; cursor: pointer; } .bubble-holder:hover .bubble.present { height: 12px; width: 12px; margin: -1px; } .control { position: absolute; height: 10px; width: 10px; left: 5px; bottom: 5px; background-size: contain; opacity: 0.3; cursor: pointer; } .control.active { opacity: 1; cursor: default; } .control.play { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAgElEQVR4Ae2UQRWAIBBEJwIRjGAEI9hEG0ATaaINtIE0kAbqnrh4/M/Tzr//B7A78nzF0wvKraiAiF5ODYzIWBQIkXFpZETGqo4R2bkmRmTs6hmRERUIURsKQNSGAhBlQlSYqyXisQ/i+6tmYiA3YkUqs7SZqJHCFFtS+Lf8PZ4HilOsPBFiYmoAAAAASUVORK5CYII='); } .control.pause { left: 20px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAOUlEQVR4Ae3WoQ0AMAwDwY7ezdsFzKyg3EthBgdzJCl309X7opev3wMBAQEtAQEBAQEBAU09+ZL0AdrO+xGDE6h0AAAAAElFTkSuQmCC'); } .invisible { display: none; }
待辦事項:
修復移動裝置上,寬度和說明的問題
顯示幻燈片有多少張圖片的小圓點
讓使用者可以自由選擇是否使用細部功能
點擊來切換至下一張圖片
用來重新開啟輪替波放功能的按鈕(在底下角落會但出的暫停/開始按鈕?
透過url來導入css的功能