Change History

相片分類與燈箱效果

相片分類與燈箱��
<ul class="controls"><br /> <li class="filter" data-filter="all">Show All</li><br /> <li class="filter" data-filter="webdesign">We Design</li><br /> <li class="filter" data-filter="printing">Printing</li><br /> <li class="filter" data-filter="development">We Development</li><br /> <li class="filter" data-filter="seo">SEO Optimization</li><br /> </ul>


<li class="mix webdesign col-sm-4"><br /> <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><br /> </li>

>
webdesign為分類col-sm-4。
col-sm-4為分欄大小，重
，目前為三欄。若要調整成四欄，可修改為四組col-sm-3
準備兩張照片，一為顯示大小550x480，一為燈箱照片大小820x620。
class="img-responsive" 響應式圖片，圖片會隨著螢幕大小縮放。
style.css
Ctrl+F 搜尋 Grid 或 workArea 
 

/web/img/filter-4.jpg" border="0">

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

#workArea ul#Grid li a {
<br /> display: block;<br /> color: #fff;<br /> background: #E67E22;<br /> font-weight: 700;<br /> text-transform: uppercase; <br /> 
}<br /> <br /> #workArea ul#Grid li a:hover img {<br /> opacity: 0.2;
<br /> }

圖片設定連結後之底色設定：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/
lightbox燈箱效果
tp://lokeshdhakar.com/
https://www.google.com.tw/maps/@24.2201031,120.9558744,10z?hl=zh-TW
pedia.com/~jinjin/web/img/map-2.jpg" border="0">


html


 <div style="margin-top:-30px;"><br /> <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><br /> </iframe>

地圖區域高度設為500px，寬度100%

課程影片

https://youtu.be/aGO1GQxbwTI