800+ HTML5 響應式模板免費下載 
目前位置: 首頁 > Ecshop 綜合文章 > 不依賴 jquery 的燈箱插件 fancbox4

不依賴 jquery 的燈箱插件 fancbox4 超大 稍大 正常

發表於: 2022-02-02 最後更新: 最後更新時間:2022-02-03
不依賴 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
您必須先 登入 或 註冊 才能下載附件!
對於本站文章有任何問題或建議歡迎到 : 討論區寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 最後更新時間:2022-02-03