圖片幻燈片
您正在查詢的標題為：關注組織
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：機動特遣隊
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：基金會設施
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：員工與角色檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：世界線中心頁
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：系列檔案室
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：競賽資料庫
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：異常物品紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：超常事件紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：未解明地點列表
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：基金會故事
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您現在最好給我停下來
本頁面內包含基金會維基內部使用的模板。
嚴禁任何人員在未經網站行政人員
之授權下修訂本頁面
使用方式
請在你所想使用圖片幻燈片的地方，使用以下的代碼來取代標準的圖片框。
請確保你想要使用的圖片都已經上傳到頁面上了，如果你選擇無視這項睿智的提醒，則你的圖片將無法正常的顯示，直到你好好的重新整理整個頁面（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的功能