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

Advanced

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

網頁設計與語法（HTML/CSS） 文章列表 發表文章 PDF 列印（下載）
JinJin [ 站內寄信 / PM ]
[講義] OnePage網頁實作解析(二）相片分類與燈箱效果、地圖設定

分類標籤: 網頁設計與語法（HTML/CSS）  106-2《中國》竹視傳二B-進階網頁設計  106-2《中國》竹視傳二C-進階網頁設計  107-1《中國》竹視傳二A-進階網頁設計  107-1《中國》竹視傳二C-進階網頁設計  108-1《中國》竹視傳二A-進階網頁設計
  1. 1. 相片分類與燈箱效果prettyPhoto
  2. 1.0.1 相簿分類語法說明
  3. 1.0.2 相簿分欄語法說明
  4. 1.0.3 CSS語法說明
  5. 2. 地圖設定
  6. 3. 課程影片

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



延續同一OnePage範例
線上範例


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燈箱效果




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.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
Newer Topic Older Topic