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

Advanced

[講義] OnePage網頁實作解析(二)

1. 相片分類與燈箱效果



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>
webdesign為分類。
col-sm-4為分欄大小,目前為三欄。
準備兩張照片,一為顯示大小550x480,一為燈箱照片大小820x620。
class="img-responsive" 響應式圖片,圖片會隨著螢幕大小縮放。


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/



2. 地圖設定



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