第十八週

燈箱功能

網址：http://www.jacklmoore.com/colorbox/

引入CSS

請注意檔案的位置

<!-- 引入 燈箱 CSS -->
  <link rel="stylesheet" href="colorbox/colorbox.css" type="text/css" media="screen" />

引入JS

jquery.js 必須先執行

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src= "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" ></script>

請注意檔案的位置

  <!-- 引入燈箱js,注意須放在 jquery.min.js 後面-->
  <script defer src="colorbox/jquery.colorbox.js"></script>

  <!-- 引入燈箱js中文語系-->
  <script defer src="colorbox/jquery.colorbox-zh-TW.js"></script>

設定 javascript

  <script>
    $(document).ready(function(){
      //Examples of how to assign the Colorbox event to elements
      $(".group1").colorbox({rel:'group1'});
      $(".group2").colorbox({rel:'group2', transition:"fade"});
      $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
      $(".group4").colorbox({rel:'group4', slideshow:true});
      $(".ajax").colorbox();
      $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
      $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
      $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
      $(".inline").colorbox({inline:true, width:"50%"});
      $(".callbacks").colorbox({
        onOpen:function(){ alert('onOpen: colorbox is about to open'); },
        onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
        onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
        onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
        onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
      });

      $('.non-retina').colorbox({rel:'group5', transition:'none'})
      $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

      //Example of preserving a JavaScript event for inline calls.
      $("#click").click(function(){
        $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
        return false;
      });
    });
  </script>

HTML 原來縮圖列表

<img src="image/prod/pic_1_1.jpg" class="img-responsive" alt="提拉米蘇">

加上燈箱功能

        <a class="group1" href="image/prod/pic_1_1.jpg" title="提拉米蘇">
                <img src="image/prod/pic_1_1.jpg" class="img-responsive" alt="提拉米蘇">
        </a>

範本：下載

全部範本：下載