Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[講義] OnePage網頁實作解析(二)相片分類與燈箱效果、地圖設定

1. 相片分類與燈箱效果prettyPhoto



延續同一OnePage範例
線上範例
http://mepopedia.com/~jinjin/ex/onepage/

範例下載

1. 相簿分類語法說明


篩選帶排序插件:
首先佈局要過濾內容的部分,給最外框添加一個可以定位的class,這裡是container
如果要按照順序排序的話,還得另外添加一個以date開頭的數據,後面的值就是決定了最後的排序依據。

標題欄位HTML圖解


html

<ul class="controls"> <li class="filter" data-filter="all">Show All</li> <li class="filter" data-filter="webdesign">We Design</li> <li class="filter" data-filter="printing">Printing</li> <li class="filter" data-filter="development">We Development</li> <li class="filter" data-filter="seo">SEO Optimization</li> </ul>

<li class="mix webdesign col-sm-4"> <a href="images/image_820x620.jpg" data-rel="prettyPhoto">
 <img alt="" src="images/image_550x480.jpg" class="img-responsive"><span>Eligendi optio cumque</span></a> </li>

2. 相簿分欄語法說明


webdesign為分類。
col-sm-4為分欄大小,重複三組,目前為三欄。若要調整成四欄,可修改為四組col-sm-3
準備兩張照片,一為顯示大小550x480,一為燈箱照片大小820x620。
class="img-responsive" 響應式圖片,圖片會隨著螢幕大小縮放。

照片分類HTML圖解(col-sm-4 三欄)


照片分類網頁示意(col-sm-4 三欄)


 


照片分類HTML圖解(col-sm-3 四欄)


照片分類網頁示意(col-sm-3 四欄)


 

3. CSS語法說明


滑鼠移過後,照片區塊呈現透明色塊效果


CSS部分可以按右鍵,選擇『檢查』觀察原始碼位置


或至style.css檔案中 
Ctrl+F 搜尋 Grid 或 workArea 
 

#workArea ul#Grid li a {
 display: block; color: #fff; background: #E67E22; font-weight: 700; text-transform: uppercase; 
} #workArea ul#Grid li a:hover img { opacity: 0.2;
 }
圖片設定連結後之底色設定:background: #E67E22;
圖片設定連結後,滑鼠移過後所顯示之底色透明度設定: opacity: 0.2;




prettyPhoto-jCarousel和lightbox的混合應用套件

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto

jCarousel網站圖片展示
https://sorgalla.com/jcarousel/
https://www.tellustek.com/web-design/163-jquery-slide-jcarousel

lightbox燈箱效果
http://lokeshdhakar.com/projects/lightbox2/" target="_blank'>http://lokeshdhakar.com/projects/lightbox2/



2. 地圖設定


https://www.google.com.tw/maps/@24.2201031,120.9558744,10z?hl=zh-TW" target="_blank'>https://www.google.com.tw/maps/@24.2201031,120.9558744,10z?hl=zh-TW





html

<div style="margin-top:-30px;"> <iframe class="gmap" style="width:100%; height:500px; margin:0px; border:0px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3618.367960538061!2d121.05275031483811!3d24.919531849024906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3468303d0cc14615%3A0x63a5462452de09bb!2z5Lit5ZyL56eR5oqA5aSn5a24!5e0!3m2!1szh-TW!2stw!4v1524065033383" width="600" height="450" frameborder="0" style="border:0" allowfullscreen> </iframe>
地圖區域高度設為500px,寬度100%

3. 課程影片


https://youtu.be/aGO1GQxbwTI





Edited 1 time(s). Last edit at 10/28/2019 05:31PM by JinJin.
(編輯記錄)