4-16. 新車展場: 軌跡移動的影像展現

需要的外掛：jquery plugin fancybox，看看範例，下載檔案。

需要的 HTML 部份

<li class="item wow fadeInUp"> 
  <a class="car" rel="group" title="堪稱世界級的《德國DTM房車賽》..." href="images/show/show-L/car1.jpg">
    <img src="images/show/show/car1.jpg" alt="">
  </a>
  <h2>堪稱世界級的《德國DTM房車賽》驚爆出Audi車隊因刻意衝撞而遭審判</h2>
  <p>位居全球房車賽事領先地位的《德國DTM房車賽》...... <a href="javascript:;"> more... </a></p>
</li>

需要的 CSS 檔案：jquery.fancybox-1.3.4.css

  <link rel="stylesheet" href="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css">

需要的 JS 檔案：jquery.easing-1.3.pack.js、jquery.fancybox-1.3.4.pack.js

  <script src="js/jquery.fancybox-1.3.4/fancybox/jquery.easing-1.3.pack.js"></script>
  <script src="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

※ 這個外掛必須搭配 jquery 函式庫 1.8.3 以前的舊版本。

需要的 JS 程式部份

  $("a.car").fancybox({
    'transitionIn'   : 'elastic',
    'transitionOut'  : 'elastic',
    'speedIn'        : 600, 
    'speedOut'       : 200, 
    'overlayShow'    : true,
    'overlayColor'   : '#000',
    'overlayOpacity' : 0.8
  });

調整 CSS 樣式。