圖片分類Lightbox問題- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
1441

會員總數：246738
討論主題：190152

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> ASP.NET >> 圖片分類Lightbox問題

[]

[我要回覆]

圖片分類Lightbox問題
價值 : 100 QP 點閱數:311 回應數:0

樓主

小裕

137	231
3628	422

發送站內信

想請問一個圖片分類跳lightbox問題
如下的套件可以分類完成
透過 data-filter跟data-category的關係

現在的問題是假設我用rel的屬性去分類，然後套
swipebox的套件是可以分類

但如果是all顯示全部圖片的時候
他還是分類了
變成全部圖片10張，我在瀏覽時，
但我點了某張圖片，他可能只會顯示2張圖片

<div class="row">
					
					<ul class="simplefilter">
					
						<li class="active" data-filter="all">All</li>
						<li data-filter="1">Category- 1</li>
						<li data-filter="2">Category- 2</li>
						<li data-filter="3">Category- 3</li>
						<li data-filter="4">Category- 4</li>
						<li data-filter="5">Category- 5</li>
						
					</ul>
				</div>

<div class="row">
					
					<div class="filtr-container">
						<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1, 5" data-sort=" ">
							<div class="gallery_grid">
								<a href="images/3.jpg" rel="g1" class="sb" title="quis nostrud exercitation ullamco laboris quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum">
									<img src="images/3.jpg" alt=" " class="img-responsive" /> 
									<div class="p-mask">
										<h4>Production</h4>
										<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</p>
									</div>
								</a>
							</div>
						</div>
						<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="2, 5" data-sort=" ">
							<div class="gallery_grid">
								<a href="images/4.jpg" rel="g1"  class="sb" title="quis nostrud exercitation ullamco laboris quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum">
									<img src="images/4.jpg" alt=" " class="img-responsive" /> 
									<div class="p-mask">
										<h4>Production</h4>
										<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</p>
									</div>
								</a>
							</div>
						</div>
						<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1, 4" data-sort=" ">
							<div class="gallery_grid">
								<a href="images/5.jpg"  rel="g2" class="sb" title="quis nostrud exercitation ullamco laboris quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum">
									<img src="images/5.jpg" alt=" " class="img-responsive" /> 
									<div class="p-mask">
										<h4>Production</h4>
										<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</p>
									</div>
								</a>
							</div>
						</div>
						<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="3" data-sort=" ">
							<div class="gallery_grid">
								<a href="images/7.jpg" rel="g2" class="sb" title="quis nostrud exercitation ullamco laboris quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum">
									<img src="images/7.jpg" alt=" " class="img-responsive" /> 
									<div class="p-mask">
										<h4>Production</h4>
										<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</p>
									</div>
								</a>
							</div>
						</div>
						<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="3, 4" data-sort=" ">
							<div class="gallery_grid">
								<a href="images/8.jpg" class="sb" title="quis nostrud exercitation ullamco laboris quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum">
									<img src="images/8.jpg" alt=" " class="img-responsive" /> 
									<div class="p-mask">
										<h4>Production</h4>
										<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</p>
									</div>
								</a>
							</div>
						</div>
						<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="2, 4" data-sort=" ">
							<div class="gallery_grid">
								<a href="images/9.jpg" class="sb" title="quis nostrud exercitation ullamco laboris quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum">
									<img src="images/9.jpg" alt=" " class="img-responsive" /> 
									<div class="p-mask">
										<h4>Production</h4>
										<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</p>
									</div>
								</a>
							</div>
						</div>
						<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1, 5" data-sort=" ">
							<div class="gallery_grid">
								<a href="images/10.jpg" class="sb" title="quis nostrud exercitation ullamco laboris quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum">
									<img src="images/10.jpg" alt=" " class="img-responsive" /> 
									<div class="p-mask">
										<h4>Production</h4>
										<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</p>
									</div>
								</a>
							</div>
						</div>
						<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="2, 4" data-sort=" ">
							<div class="gallery_grid">
								<a href="images/11.jpg" class="sb" title="quis nostrud exercitation ullamco laboris quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum">
									<img src="images/11.jpg" alt=" " class="img-responsive" /> 
									<div class="p-mask">
										<h4>Production</h4>
										<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</p>
									</div>
								</a>
							</div>
						</div>
						<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="3" data-sort=" ">
							<div class="gallery_grid">
								<a href="images/12.jpg" class="sb" title="quis nostrud exercitation ullamco laboris quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum">
									<img src="images/12.jpg" alt=" " class="img-responsive" /> 
									<div class="p-mask">
										<h4>Production</h4>
										<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</p>
									</div>
								</a>
							</div>
						</div>
						<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1, 5" data-sort=" ">
							<div class="gallery_grid">
								<a href="images/4.jpg" class="sb" title="quis nostrud exercitation ullamco laboris quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum">
									<img src="images/4.jpg" alt=" " class="img-responsive" /> 
									<div class="p-mask">
										<h4>Production</h4>
										<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</p>
									</div>
								</a>
							</div>
						</div>
						<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="2, 5" data-sort=" ">
							<div class="gallery_grid">
								<a href="images/5.jpg" class="sb" title="quis nostrud exercitation ullamco laboris quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum">
									<img src="images/5.jpg" alt=" " class="img-responsive" /> 
									<div class="p-mask">
										<h4>Production</h4>
										<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</p>
									</div>
								</a>
							</div>
						</div>
						<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1, 4" data-sort=" ">
							<div class="gallery_grid">
								<a href="images/3.jpg" class="sb" title="quis nostrud exercitation ullamco laboris quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum">
									<img src="images/3.jpg" alt=" " class="img-responsive" /> 
									<div class="p-mask">
										<h4>Production</h4>
										<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</p>
									</div>
								</a>
							</div>
						</div>
						<div class="clearfix"> </div>
						<script type="text/javascript" src="js/smoothbox.jquery2.js"></script>
					</div>
				</div>
			</div>
					
					<script src="js/jquery.filterizr.js"></script>
					<script src="js/controls.js"></script>
					<script type="text/javascript">
						$(function() {
							//Initialize filterizr with default options
							$('.filtr-container').filterizr();
						});
					</script>
		</div>
	</div>

搜尋相關Tags的文章： [ 圖片分類Lightbox問題 ] ,
本篇文章發表於2022-04-14 08:06

目前尚無任何回覆

回覆

如要回應,請先登入.