Carousel

原文:Image Carousel


原作者:CroquemboucheCroquembouche


譯者:Viken-KViken-K

使用方式

請在你所想使用圖片幻燈片的地方,使用以下的代碼來取代標準的圖片框。

請確保你想要使用的圖片都已經上傳到頁面上了,如果你選擇無視這項睿智的提醒,則你的圖片將無法正常的顯示,直到你好好的重新整理整個頁面(Ctrl+Shitf+R)。

[[include cqb: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: 填寫圖片清單的位置,請使用半型的逗號「,」將每個圖片分隔開來。請確保所有要使用的圖片都已經上傳到指定的頁面上了。
這些圖片將會以你所排列的順序,顯示在幻燈片上。
caption:
(選填)
出現在幻燈片下方的說明。
如果你沒有任何的說明,請確保你有將no-caption設定成true。
預設值:"{$caption}"
interval:
(選填)
如果你在這個選項設置了一個不為零的數字,則幻燈片將在經過這個數字這麼久的秒數後自動換成下一張圖片。
如果你桉了箭頭來手動的更換圖片,或是你將游標懸符在幻燈片上,則圖片將不會繼續輪替。
預設值:"0"
wiki: 你幻燈片所使用的圖片所在的wiki網站名稱。舉例來說,scp-wikiscp-sandbox-3topia。而以我們自己的網站和沙盒站來說分別是scp-zh-trscp-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"。

我把寬/高設定成最大的圖片的大小了,但這東西變得太大了!
選用小一點的數字,或者是把你的圖片縮小一點。



基底代碼

幻燈片的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://topia.wikidot.com/local--code/cqb%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}}">
     </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.url = getQueryVariable("url").split(",");
     var wiki = getQueryVariable("wiki") || "scp-wiki";
     var page = getQueryVariable("page");
 
     for(var i = 0; i < $scope.images.length; i++) { // >
     $scope.images[i] = `http://${wiki}.wdfiles.com/local--files/${page}/${$scope.images[i]}`;
 
     }
     // $scope.images is an array of image URLs
 
     $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(onmousedown = true) {
     window.open("$scope.url[index]");
     }
     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 { 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的功能

除非特別註明,本頁內容採用以下授權方式: Creative Commons Attribution-ShareAlike 3.0 License