讓組件協同運作

關閉專家模式

專家模式

使用專家模式來隱藏為初學者提供的網路開發指南。

為圖片輪播加入互動功能

在前一個課程中，我們在網站上加入了圖片輪播。現在，我們想要改善這個功能。在網路開發中，常見的做法是在網站上發布功能，然後隨著我們收集使用者回饋，逐步改進它。

我們從測試人員那裡收到了關於輪播的以下回饋

「我想要直接跳到特定的幻燈片。」
「我看不出來目前在哪張幻燈片上。」
「圖片太小了。我看不到圖片的細節。」

根據這些回饋，Chico's Cheese Bikes 的產品經理制定了一個計畫，以解決這些關於圖片輪播的問題。我們將對圖片輪播進行以下改進

點擊縮圖水平列表中的圖片應該將輪播移動到對應的幻燈片。
點擊輪播圖片幻燈片應該在彈出視窗中顯示圖片的放大版本。

最終，我們將在輪播下方新增一些縮圖。這些縮圖將與輪播對應，就像我們的測試人員所期望的那樣。

我們將一次實作這些需求。在此過程中，我們將引入額外的 AMP 組件，並將它們與事件和動作連接起來。我們也將學習如何透過組合組件並使其協同運作來建構更精緻的使用者介面設計。

練習 5：新增縮圖預覽

第一步是在現有的圖片輪播下方新增一組縮圖預覽圖片。現有的輪播一次只顯示一張圖片，因為其 type 設定為 slides。輪播的預設 type 是 carousel。它不是一次顯示單張圖片，而是水平滾動顯示輪播內的所有圖片。我們可以透過縮小第二個輪播中的圖片尺寸來製作縮圖。

但是，我們也需要讓點擊縮圖集中的圖片也能將輪播前進到對應的幻燈片。我們可以將此需求理解為兩個更簡單的需求的組合：1) 偵測幻燈片何時被點擊，以及 2) 變更輪播的幻燈片。

稍早，在本訓練課程的「處理使用者互動」章節中，我們討論了事件和動作。「偵測點擊」聽起來像是一個事件。「變更幻燈片」聽起來像是一個動作。我們使用 on 屬性註冊事件。tap 事件是一種偵測某個項目在觸控螢幕上被點擊或觸摸的方式。我們可以在縮圖輪播中的每張圖片上處理此事件。

動作就像我們可以在組件上呼叫以使其變更的函式。我們需要找到變更輪播所選幻燈片的動作。為此，我們查看 <amp-carousel> 文件的行為章節。在那裡，我們看到動作 goToSlide() 將輪播前進到特定的幻燈片。goToSlide() 動作像函式方法一樣使用：carousel-id.goToSlide(index=N)。在這裡，carousel-id 是較大輪播組件的 ID，而 N 是點擊圖片的零索引編號（零索引表示第一張圖片是 0，第二張圖片是 1，依此類推）。

例如，如果我們有以下輪播

<amp-carousel id="myCustomCarousel" type="slides" ...>
    ...
</amp-carousel>

那麼點擊以下按鈕會將上述輪播設定為其第二張幻燈片

<button on="tap:myCustomCarousel.goToSlide(index=1)">
   Set Carousel To Second Slide (Index 1)
</button>

有了這些資訊，請使用 assets 資料夾中較小的圖片，在現有輪播下方新增一個縮圖輪播，並使用以下設定

新增一個 <amp-carousel>，其類型為 carousel，版面配置類型為 fixed-height。
為每張縮圖圖片提供 fixed 版面配置類型。
依序將名為 cheddar-chaser-thumb、cheese-thumb 和 mouse-thumb 的圖片新增到輪播中。
使其在點擊縮圖圖片時，顯示原始輪播中對應的圖片。提示：原始輪播的 ID 應為 carousel。縮圖圖片在輪播中的索引分別為 0、1 和 2。
請確保圖片具有適當的 tabindex 和 button 角色。

建議的樣式指南

為縮圖輪播提供 78 的 height。
為縮圖輪播提供 thumbnail-carousel 類別。
為每張縮圖圖片提供以下尺寸屬性：width="96" height="72"。

完成後，您的頁面應如下所示

具有圖片縮圖的輪播

解答

<amp-carousel layout="responsive" width="412" height="309" type="slides" loop id="carousel">
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser.jpg?1540228205366"
        width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese.jpg?1540228223785"
        width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse.jpg?1540228223963"
        width="412" height="309" layout="responsive"></amp-img>
</amp-carousel>
<amp-carousel class="thumbnail-carousel" layout="fixed-height" width="auto" height="78">
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser-thumb.jpg?1540228250623"
        on="tap:carousel.goToSlide(index=0)" width="96" height="72" layout="fixed" role="button" tabindex="0"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese-thumb.jpg?1540228249992"
        on="tap:carousel.goToSlide(index=1)" width="96" height="72" layout="fixed" role="button" tabindex="1"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse-thumb.jpg?1540228249062"
        on="tap:carousel.goToSlide(index=2)" width="96" height="72" layout="fixed" role="button" tabindex="2"></amp-img>
</amp-carousel>

練習 6：追蹤選取的縮圖

接下來，我們希望使用者選取的縮圖看起來與其他縮圖不同，以便他們知道自己選取了哪個。這對於我們目前建構的功能來說是不可能的，因為沒有辦法追蹤主輪播目前在哪張幻燈片上。為了滿足此需求，我們需要一個 AMP 組件，讓使用者可以從列表中進行選擇並追蹤他們的選擇。

<amp-selector> 組件呈現一個選項選單，並讓使用者從中選擇。任何 HTML 或其他 AMP 組件都可以包含在 <amp-selector> 組件中並進行深度巢狀結構（除了另一個 <amp-selector> 組件）。可選取的選項由具有 option 屬性的元素和/或組件決定。每當選取一個選項時，該元素或組件也會被賦予 selected 屬性。selected 屬性可透過 CSS 定義目標，因此我們可以使用它為目前選取的圖片新增獨特的樣式。

如果我們現在要實作 <amp-selector>，我們會注意到，如果使用者手動變更較大輪播上的幻燈片，則選取的縮圖不會變更。我們需要一種方法來偵測較大輪播上的幻燈片何時變更，並將其用作觸發器，以在 <amp-selector> 組件中設定選取的縮圖。「偵測幻燈片何時變更」聽起來像是一個事件。「設定選取的縮圖」聽起來像是一個動作。在文件中，我們看到 <amp-carousel> 允許您將 slideChange 事件用於 slides 類型的輪播，其中新幻燈片的索引為 event.index。這讓您知道輪播何時移動到給定的幻燈片。

我們也在文件中看到，<amp-selector> 公開了一個名為 toggle 的動作，該動作採用索引並從對應的選項中新增或移除 selected。如果 <amp-selector> 組件僅允許單一選擇，則切換不同的選項也會導致從所有其他選項中移除 selected 狀態。

實作視覺上區分選取縮圖的功能，並符合以下規格

新增一個 <amp-selector> 組件，其 ID 為 ampSelector，名稱為 single_image_select，版面配置為 container，並圍繞縮圖圖片的 <amp-carousel>。
為每個縮圖圖片組件新增一個 option 屬性，其 value 與圖片在輪播中的索引相符。
為較大的圖片輪播新增一個事件處理常式，以便在輪播的幻燈片變更時切換適當的圖片選項。

建議的樣式指南

只要您遵循了指南，樣式就已經包含在檔案頂端的 CSS 中，並且不需要編輯。如果您想查看規則，可以使用識別碼 amp-selector amp-img[option] 和 amp-selector amp-img[option][selected] 查看。

完成後，結果應如下所示

樣式化的縮圖輪播圖片

解答

<amp-carousel on="slideChange:ampSelector.toggle(index=event.index)"
    layout="responsive" width="412" height="309" type="slides" loop id="carousel">
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser.jpg?1540228205366"
        width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese.jpg?1540228223785"
        width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse.jpg?1540228223963"
        width="412" height="309" layout="responsive"></amp-img>
</amp-carousel>
<amp-selector layout="container" name="single_image_select" id="ampSelector">
    <amp-carousel class="thumbnail-carousel" layout="fixed-height" width="auto" height="78">
        <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser-thumb.jpg?1540228250623"
            option="0" selected on="tap:carousel.goToSlide(index=0)" tabindex="1" role="button"
            width="96" height="72" layout="fixed"></amp-img>
        <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese-thumb.jpg?1540228249992"
            option="1" on="tap:carousel.goToSlide(index=1)" tabindex="1" role="button"
            width="96" height="72" layout="fixed"></amp-img>
        <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse-thumb.jpg?1540228249062"
            option="2" on="tap:carousel.goToSlide(index=2)" tabindex="1" role="button"
            width="96" height="72" layout="fixed"></amp-img>
    </amp-carousel>
</amp-selector>

請記住在 <head> 中包含 <amp-selector> 函式庫

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

練習 7：放大輪播圖片

最後，我們希望在使用者點擊輪播圖片時放大圖片，以便更詳細地顯示圖片。一種常見的實現方式是使用燈箱效果。燈箱組件會取得一個元素（例如圖片），並將其放置在頁面上其餘內容的上方。這樣您就可以專注於該圖片或元素，頁面的其餘部分會被半透明的背景部分遮蔽。

<amp-image-lightbox> 是一個全螢幕彈出組件，可實作燈箱模式。如果您在 <amp-img> 組件的事件處理常式中包含 <amp-image-lightbox> 的 ID，則會出現一個包含該圖片的燈箱，並擴展直到燈箱填滿整個螢幕。例如，將以下程式碼新增到頁面頂端的大圖片，以查看燈箱方法的工作原理

<amp-image-lightbox id="ricotta-racer-lightbox" layout="nodisplay"></amp-image-lightbox>
<amp-img on="tap:ricotta-racer-lightbox" role="button" tabindex="0" src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746" layout="responsive" width="640" height="480"></amp-img>

請記住在 <head> 中包含 <amp-image-lightbox> JavaScript

<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>

我們可以將此方法應用於較大輪播中的每張圖片，以實作我們的需求。但是，還有一種更自然的方式可以完成相同的操作。<amp-lightbox-gallery> 組件透過新增 lightbox 屬性來擴展 <amp-img> 和 <amp-carousel> 組件的行為。具有 lightbox 屬性的組件在被點擊時會開啟樣式化的燈箱。無需使用 <amp-image-lightbox> 進行連接，也無需在圖片或輪播上使用點擊處理常式來在燈箱中開啟。

若要在較大的輪播上實作燈箱效果

將 <amp-lightbox-gallery> 腳本新增到您的 <head>。
將 lightbox 屬性新增到您較大的 <amp-carousel>。

解答

<amp-carousel on="slideChange:ampSelector.toggle(index=event.index)"
    layout="responsive" width="412" height="309" type="slides" loop id="carousel" lightbox>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser.jpg?1540228205366"
        width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese.jpg?1540228223785"
        width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse.jpg?1540228223963"
        width="412" height="309" layout="responsive"></amp-img>
</amp-carousel>

請記住在 <head> 中包含 <amp-lightbox-gallery> 函式庫

<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>