首頁 > ECSHOP 相關舊文章 > Ecshop 綜合文章 > 不依賴 jquery 的燈箱插件 fancbox4

不依賴 jquery 的燈箱插件 fancbox4 在較低版本的 ecshop 使用，也就沒有 transport.js 的衝突問題，而且使用也非常簡單，可以使用在需要燈箱效果來顯示圖片、相簿、youtube視頻、HTML彈出視窗的地方，甚至是輪播圖片，同時還支援了移動設備的手指縮放與左右撥動效果，讓響應式的網頁也能提升客戶操作體驗。

使用前請先在入必要檔案 fancybox.css 和 fancybox.umd.js，ecshop 的話應該是模板目錄的 page_header.lbi 前面比較合適
需要注意的是 fancybox.umd.js 不能放到網頁後面，否則有些功能會無法動作...

圖片單張展示：
1、如果只有一張圖片，或是多張圖片中只想單獨展示，可以只設定 data-fancybox 不須給予任何的值
2、data-caption 屬性用來燈箱展示時顯示在圖片下方的文字，這個文字可以使用簡單的 HTML，例如：data-caption="<b style='color:red'>images/</b>1.jpg"

<a href="大圖網址" data-fancybox="" data-caption="簡單描述">
	<img src="縮圖網址" width="360">
</a>

以相簿展示多張圖片：
1、如果是多張圖片想以相簿展示，必須設定 data-fancybox 的值為相同，例如： data-fancybox="gallery"
2、data-caption 屬性用來在燈箱展示時顯示在圖片下方顯示文字，這個文字可以使用簡單的 HTML，例如：data-caption="images/1.jpg"
3、縮圖寬度應該自訂相同寬高以符合排版需求，例如：width="200" height="150"

<a href="大圖網址" data-fancybox="banner" data-caption="簡單描述">
	<img src="縮圖網址" style="width: 19%;	margin: 0 0.2%;">
</a>

展示 YOUTUBE 視頻
1、data-fancybox 屬性的設定和圖片是一樣的，例如： data-fancybox="youtube"
2、href 是 YouTube 視頻的完整網址
3、網址 v= 後面的字串，就是縮圖的部分網址，例如下方的 https://i3.ytimg.com/vi/sckDQ3o38SA/hqdefault.jpg ，其中的 sckDQ3o38SA 就是 v= 後面的字串，也就是說【https://i3.ytimg.com/vi/ v= 後面的字串 /hqdefault.jpg】就是縮圖的實際網址
4、縮圖寬度可以省略，多個請指定相同的寬度與高度，例如：width="200" height="150"

<a data-fancybox="YouTube" href="https://www.youtube.com/watch?v=sckDQ3o38SA">
	<img src="https://i3.ytimg.com/vi/sckDQ3o38SA/hqdefault.jpg" width="200" height="150">
</a>

使用 HTML 彈出視窗
當訪客點擊 【視窗標題】便會彈出 HTML 內容的提示視窗，這裡的【HTML 內容】也可以是表單或其他...

<button data-fancybox="" data-src="#dialog">
			<h2>HTML 訊息</h2>
		</button>
		<p id="dialog" style="display:none;">
			</p><h2>視窗標題</h2>
			<p>HTML 內容</p>

旋轉木馬(圖片輪播)
旋轉木馬和全景縮放都是 fancbox4 的新功能，不過功能還很陽春，選項也不足，因此目前尚不多做介紹

		<div id="myCarousel" class="carousel">
			<div class="carousel__slide"><img data-lazy-src="images/1.jpg" /></div>
			<div class="carousel__slide"><img data-lazy-src="images/2.jpg" /></div>
			<div class="carousel__slide"><img data-lazy-src="images/3.jpg" /></div>
			<div class="carousel__slide"><img data-lazy-src="images/4.jpg" /></div>
			<div class="carousel__slide"><img data-lazy-src="images/5.jpg" /></div>
		</div>
		<script>
			const myCarousel = new Carousel(document.querySelector(".carousel"), {});
		</script>

最後介紹的是很多購物網站都有用的商品相冊，總共分成三部分：

點擊圖片可以放大檢視

A、Css：
1、#mainbox = 相冊的容器，設置相冊的寬度
2、#mainCarousel = 相冊的預覽圖，最大度由 #mainbox 決定
3、.carousel__slide = 相冊的縮圖，預設寬高為 width: 96px;height: 64px;

		<style>
			#mainbox {
				width: 500px;
				margin: 0 auto;
			}
			#mainCarousel {
			  width: 100%;
			  margin: 0 auto 1rem auto;
			
			  --carousel-button-color: #170724;
			  --carousel-button-bg: #fff;
			  --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
				0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
			
			  --carousel-button-svg-width: 20px;
			  --carousel-button-svg-height: 20px;
			  --carousel-button-svg-stroke-width: 2.5;
			}
			
			#mainCarousel .carousel__slide {
			  width: 100%;
			  padding: 0;
			}
			
			#mainCarousel .carousel__button.is-prev {
			  left: -1.5rem;
			}
			
			#mainCarousel .carousel__button.is-next {
			  right: -1.5rem;
			}
			
			#mainCarousel .carousel__button:focus {
			  outline: none;
			  box-shadow: 0 0 0 4px #A78BFA;
			}
			
			#thumbCarousel .carousel__slide {
			  opacity: 0.5;
			  padding: 0;
			  margin: 0.25rem;
			  width: 96px;
			  height: 64px;
			  overflow: hidden;
			}
			
			#thumbCarousel .carousel__slide img {
			  width: 100%;
			  height: 100%;
			  object-fit: cover;
			  border-radius: 4px;
			}
			
			#thumbCarousel .carousel__slide.is-nav-selected {
			  opacity: 1;
			}
		</style>		

B、Html：
1、id="mainbox" => 相冊的容器，設置相冊的寬度
2、id="mainCarousel" => 相冊的預覽圖
2-1、class="carousel__slide" => 預覽圖所用的樣式表類
2-2、data-src="" => 相冊的大圖網址
2-3、data-fancybox="" => 相冊的群組名稱
2-4、data-caption="" => 相冊的標題或描述
3、img src="" => 相冊的預覽(中)圖網址
4、id="thumbCarousel" = 相冊的縮圖容器，預設為 width: 96px;height: 64px;
5、class="carousel__slide" => 必須與 2-1 的類名相同
6、id="mainCarousel" 與 id="thumbCarousel" 的圖片數量應該一樣

		<div id="mainbox">
			<div id="mainCarousel" class="carousel w-10/12 max-w-5xl mx-auto">
			  <div
				class="carousel__slide"
				data-src="https://lipsum.app/id/1/900x600"
				data-fancybox="gallerys"
				data-caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis ultricies ipsum, a maximus ligula dignissim in. Sed consectetur tellus egestas, consequat dolor at, tempus augue. Morbi quis ipsum quis velit."
			  >
				<img src="https://lipsum.app/id/1/600x400" />
			  </div>
			  <div
				class="carousel__slide"
				data-src="https://lipsum.app/id/2/900x600"
				data-fancybox="gallerys"
				data-caption="Ut semper, justo eget vehicula vestibulum, enim enim suscipit lectus, et sagittis nibh risus vel metus. Quisque eu ornare ante, et gravida mauris"
			  >
				<img src="https://lipsum.app/id/2/600x400" />
			  </div>
			  <div
				class="carousel__slide"
				data-src="https://lipsum.app/id/3/900x600"
				data-fancybox="gallerys"
				data-caption="Hello

如果你對不依賴 jquery 的燈箱插件 fancbox4 有任何問題請到討論區發帖。