WowWindow 運用 CSS3 的動畫方式來展示對話視窗

by - 下午5:10

WowWindow 對話視窗 - 動畫執行中 A-Fu Design
WowWindow 對話視窗 - 動畫執行中
WowWindow 是一個高級模式對話框的程式類似於 Lightbox 。能夠讓你從圖片、HTML內容或者是影片建立一個可以縮放的對話視窗。WowWindow 運用 CSS3 的過場動畫來展示對話視窗，並不是所有瀏覽器都支援這樣的轉換效果。IE系列瀏覽器因為對 CSS3 的支援太少，所以僅支援 IE9 以上的版本，其他像 Google Chrome、FireFox、Apple Safari 都可以正常支援。

使用方法：
第一步 載入 WowWindow 需要用到的 JavaScript 檔案
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- WowWindow 的主程式碼 -->
<script type="text/javascript" src="js/jquery.wowwindow.min.js"></script>

第二步 寫入 HTML 的圖片連結
<div id="wrapper">
  <div class="popup-section">
<h2>照片</h2>
<h3>Default:</h3>
<div class="popups">
      <a href="images/sample1.jpg"><img src="images/thumbnails/sample1.jpg" alt="sample 1"></a>
      <a href="images/sample2.jpg"><img src="images/thumbnails/sample2.jpg" alt="sample 2"></a>
      <a href="images/sample3.jpg"><img src="images/thumbnails/sample3.jpg" alt="sample 3"></a>
      <a href="images/sample4.jpg"><img src="images/thumbnails/sample4.jpg" alt="sample 4"></a>
      <a href="images/sample5.jpg"><img src="images/thumbnails/sample5.jpg" alt="sample 5"></a>
</div>
<h3>With Rotation:</h3>
<div class="popups-rotate">
      <a href="images/sample1.jpg"><img src="images/thumbnails/sample1.jpg" alt="sample 1"></a>
      <a href="images/sample2.jpg"><img src="images/thumbnails/sample2.jpg" alt="sample 2"></a>
      <a href="images/sample3.jpg"><img src="images/thumbnails/sample3.jpg" alt="sample 3"></a>
      <a href="images/sample4.jpg"><img src="images/thumbnails/sample4.jpg" alt="sample 4"></a>
      <a href="images/sample5.jpg"><img src="images/thumbnails/sample5.jpg" alt="sample 5"></a>
</div>
<h3>With Multiple Rotations:</h3>
    <div class="popups-rotate-multiple">
      <a href="images/sample1.jpg"><img src="images/thumbnails/sample1.jpg" alt="sample 1"></a>
      <a href="images/sample2.jpg"><img src="images/thumbnails/sample2.jpg" alt="sample 2"></a>
      <a href="images/sample3.jpg"><img src="images/thumbnails/sample3.jpg" alt="sample 3"></a>
      <a href="images/sample4.jpg"><img src="images/thumbnails/sample4.jpg" alt="sample 4"></a>
      <a href="images/sample5.jpg"><img src="images/thumbnails/sample5.jpg" alt="sample 5"></a>
    </div>
  </div>

  <div class="popup-section">

    <h2>Inline Content</h2>
 
    <h3>Default:</h3>
    <div class="popups">
      <p><a title="Example 1" href="#example1">Example 1</a>,&nbsp;
      <a title="Example 2" href="#example2">Example 2</a>,&nbsp;
      <a title="Example 3" href="#example3">Example 3</a></p>
</div>
    <h3>With Rotation:</h3>
    <div class="popups-rotate">
      <p><a title="Example 1" href="#example1">Example 1</a>,&nbsp;
      <a title="Example 2" href="#example2">Example 2</a>,&nbsp;
      <a title="Example 3" href="#example3">Example 3</a></p>
    </div>
    <h3>With Multiple Rotations:</h3>
    <div class="popups-rotate-multiple">
      <p><a title="Example 1" href="#example1">Example 1</a>,&nbsp;
      <a title="Example 2" href="#example2">Example 2</a>,&nbsp;
      <a title="Example 3" href="#example3">Example 3</a></p>
    </div>
  </div>
  <div class="popup-section">
    <h2>Iframe Content</h2>
    <h3>Default:</h3>
    <div class="popups">
      <p><a title="Google" href="http://www.google.com">Google</a>,&nbsp;
   <a title="Yahoo" href="http://www.yahoo.com">Yahoo</a></p>
    </div>
    <h3>With Rotation:</h3>
    <div class="popups-rotate">
      <p><a title="Google" href="http://www.google.com">Google</a>,&nbsp;
 <a title="Yahoo" href="http://www.yahoo.com">Yahoo</a></p>
</div>
    <h3>With Multiple Rotations:</h3>
    <div class="popups-rotate-multiple">
      <p><a title="Google" href="http://www.google.com">Google</a>,&nbsp;
 <a title="Yahoo" href="http://www.yahoo.com">Yahoo</a></p>
    </div>
  </div>
  <div class="popup-section">
<h2>Video Content</h2>
<h3>Standard:</h3>
<p><a rel="video" title="Corus 2010 - Round 1" href="http://www.youtube.com/watch?v=h8EOm9fuqhE&feature=grec_index"><img src="images/thumbnails/video1.jpg" alt="" /></a> &nbsp; <a rel="video" title="unTitle Sequence" href="http://vimeo.com/7459910"><img src="images/thumbnails/video2.jpg" alt="" /></a></p>
<h3>With Rotation:</h3>
<p><a rel="video_rotate" title="Corus 2010 - Round 1" href="http://www.youtube.com/watch?v=h8EOm9fuqhE&feature=grec_index"><img src="images/thumbnails/video1.jpg" alt="" /></a> &nbsp; <a rel="video_rotate" title="unTitle Sequence" href="http://vimeo.com/7459910"><img src="images/thumbnails/video2.jpg" alt="" /></a></p>
<h3>With Multiple Rotation:</h3>
<p><a rel="video_multi_rotate" title="Corus 2010 - Round 1" href="http://www.youtube.com/watch?v=h8EOm9fuqhE&feature=grec_index"><img src="images/thumbnails/video1.jpg" alt="" /></a> &nbsp; <a rel="video_multi_rotate" title="unTitle Sequence" href="http://vimeo.com/7459910"><img src="images/thumbnails/video2.jpg" alt="" /></a></p>
    </div>
    <div id="youtube-auto-thumbnails">
<h2>YouTube Content with Auto-Generating Thumbnails</h2>
<a title="I Heard Angels Singing" href="http://www.youtube.com/watch?v=s0WDTtIeSAI"><img src="images/play.gif" alt=""></a>
<a title="Theory Of A Deadman - Hell Just Aint The Same" href="http://www.youtube.com/watch?v=LY4Nph4SKwQ"><img src="images/play.gif" alt=""></a>
<a title="Bob Dylan - Ballad of a Thin Man" href="http://www.youtube.com/watch?v=FjcSjEVndZw"><img src="images/play.gif" alt=""></a>
<a title="Adenyum - Tes Etats d'Ame" href="http://www.youtube.com/watch?v=muR48HtgcN0"><img src="images/play.gif" alt=""></a>
<a title="Halloween" href="http://www.youtube.com/watch?v=mH9VpTGIjj8"><img src="images/play.gif" alt=""></a>
<a title="King Crimson - Ladies Of The Road" href="http://www.youtube.com/watch?v=WQKp5FVslG0"><img src="images/play.gif" alt=""></a>
<a title="The Ramones - We're a Happy Family" href="http://www.youtube.com/watch?v=7rzUHBrGHdo"><img src="images/play.gif" alt=""></a>
<a title="David Gilmore - Echos Acoustic Version" href="http://www.youtube.com/watch?v=KPXWKO-EBgc"><img src="images/play.gif" alt=""></a>
<a title="Mystical Dream" href="http://www.youtube.com/watch?v=nN_ny1Y1g3g"><img src="images/play.gif" alt=""></a>
<a title="Foggy Mountain Breakdown" href="http://www.youtube.com/watch?v=icMTVV5Lwaw&NR=1"><img src="images/play.gif" alt=""></a>
<a title="Bible Black - Heaven and Hell" href="http://www.youtube.com/watch?v=QUs3i9oCs3U"><img src="images/play.gif" alt=""></a>
<a title="Awesome Australian Anthem" href="http://www.youtube.com/watch?v=iwlAUZ1QrtE"><img src="images/play.gif" alt=""></a>
<a title="Queen of Ragtime" href="http://www.youtube.com/watch?v=6nTeAkfPNUY"><img src="images/play.gif" alt=""></a>
<a title="Tribute to the Eagles" href="http://www.youtube.com/watch?v=NMEB13mrU-I"><img src="images/play.gif" alt=""></a>
<a title="Hit Me Baby One More Time" href="http://www.youtube.com/watch?v=-NwqN-xj9Xs"><img src="images/play.gif" alt=""></a>
<a title="In A Gadda Da Vida" href="http://www.youtube.com/watch?v=2bQZ6l_cq5Y"><img src="images/play.gif" alt=""></a>
<a title="21st Century Schizoid Man" href="http://www.youtube.com/watch?v=8Qa0hvtEvn4"><img src="images/play.gif" alt=""></a>
<a title="Always look on the bright side of life" href="http://www.youtube.com/watch?v=dQ4ZkbldTsw"><img src="images/play.gif" alt=""></a>
<a title="Genesis - Entangled live" href="http://www.youtube.com/watch?v=_FFgpcYHQzg"><img src="images/play.gif" alt=""></a>
<a title="Live and Let Die" href="http://www.youtube.com/watch?v=JK2hKzZss5Y"><img src="images/play.gif" alt=""></a>
<a title="When An Old Cricketer Leaves The Crease" href="http://www.youtube.com/watch?v=Xt1C00e__5c"><img src="images/play.gif" alt=""></a>
    </div>

    <div style="display:none;">
<div id="example1">
    <div class="window-inner">
<h3>Example 1</h3>

<img src="images/sample1.jpg" alt="sample1" class="left" />
<p>Here is some content that is displayed on the page, but is hidden from the browsers by default.  It is then placed into the wowwindow by targeting its ID in the HREF attribute of the link.</p>
    </div>
</div>
<div id="example2">
    <div class="window-inner">
<h3>Example 2</h3>
<img src="images/sample2.jpg" alt="sample1" class="left" />

<p>The nice thing about inline content, is that it is easily read by search engines spiders, while displayed in an elegant manner to users.  This is nice when doing Search Engine Optimization for websites.</p>
    </div>
</div>
<div id="example3">
    <div class="window-inner">
<h3>Example 3</h3>
<img src="images/sample3.jpg" alt="sample1" class="left" />
<p>Here is some more content....</p>

    </div>
</div>
    </div>

    </div>

第三步 設計整體的 CSS 樣式
#wowwindow {
    position: absolute;
    left: 50%;/*margins are adjusted by plugin to place window at center center*/
    top: 50%;
    -moz-box-shadow: 0 0 15px #252525;
    -webkit-box-shadow: 0 0 15px #252525;
    box-shadow: 0 0 15px #252525;
    background: #fff;
    border: 1px solid #7f7f7f;
    position: absolute;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
#wowwindow-image {
    line-height: 0;
}
#wowwindow-image-loading {
    background: url(images/wowwindow-loading.gif) center center no-repeat;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
#wowwindow-iframe, #wowwindow-video-flash {
    /*position: absolute;
    left: 10px;
    top: 10px;*/
    position: relative;
    z-index: 10;
}
.wowwindow-title {
    font-weight: bold;
    font-size: 11px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #bfbfbf;
    cursor: default;
    /*IE6 rules*/
    _display: block;
    _position: relative;
}
#wowwindow-inner {
    padding: 10px;
    position: relative;
    overflow: hidden; /*contains floating elements*/
    /*IE6 rule*/
    _zoom: 1;
}
.wowwindow-controlbar {
    background: #252525 url(images/wowwindow-controlbar.gif) repeat-x;
    overflow: hidden;
    border-bottom: 1px solid #252525;
    padding: 0 30px 0 10px;
    line-height: 18px;
    /*IE6 rule*/
    _zoom: 1;
}
a.wowwindow-close {
    display: block;
    float: right;
    height: 20px;
    width: 20px;
    margin-right: -30px;
    text-indent: -999em;
    background: url(images/wowwindow-close.gif) no-repeat top left;
    border-left: 1px solid #7f7f7f;
    border-bottom: 1px solid #7f7f7f;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
    /*rules for IE7 and below*/
    *position: relative;
    *right: -9px;
    /*IE6 rule*/
    _display: inline;
}
a.wowwindow-close:hover {
    background-position: bottom left;
}
body {background:#333;}
img {border: 2px solid #fff;}
a:hover img {border: 2px solid #666;}
#wrapper {background:#ddd;width:940px;margin: 5px auto;border: 2px solid #fff;padding: 20px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.popup-section {padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px dashed #333;}

第四步 寫入 JavaScript 程式片段
$(document).ready(function() {
  $('.popups a').wowwindow({
draggable: true
  });
  $('.popups-rotate a').wowwindow({
rotate: true,
draggable: true
  });
  $('.popups-rotate-multiple a').wowwindow({
rotate: true,
rotations: 3,
draggable: true
  });
  $('a[rel=video]').wowwindow({
draggable: true,
height: 225,
width: 400,
videoIframe: false
  });
  $('a[rel=video_rotate]').wowwindow({
draggable: true,
rotate: true,
height: 225,
width: 400,
videoIframe: false
  });
  $('a[rel=video_multi_rotate]').wowwindow({
draggable: true,
rotate: true,
rotations: 3,
height: 225,
width: 400,
videoIframe: false
  });
  $('#youtube-auto-thumbnails a').wowwindow({
draggable: true,
width: 480,
height: 390,
videoIframe: false,
autoYouTubeThumb: 'default'
  });
});

附上 WowWindow 可修改參數
 $(elements).wowwindow({
    testMode: false,//是否進入除錯模式
    draggable: false,//是否可以拖曳
    fixedWindow: false,//是否為絕對位置
    width: 500,//iframe 和影片的寬度設定
    height: 500,//iframe 和影片的高度設定
    overlay: {  //CSS 設定項目
        background: '#000',    // 背景顏色
        opacity: .6,           // 顏色透明度
        zIndex: 1000,          // 圖層
        fixed: true,           // 絕對位置
        clickToClose: true,    // 隨意按下關閉
        destroyOnClose: false  // 關閉後摧毀物件
    },
    before: function() {},//打開之前執行
    after: function() {},//打開之後執行
    onclose: function() {},//關閉之後執行
    zoom: true,  
    rotate: false,
    rotations: 1,
    clockwise: true,
    speed: 800,    // 動畫速度
    autoplay: true,// 自動撥放
    videoIframe: true,// 影片放置於框架內
    showRelated: true,// 只使用 YouTube
    autoYouTubeThumb: null,// YouTube 所圖 可設定 0,1,2,3,default
    closeButton: '<a class="wowwindow-close" title="close" href="javascript:jQuery(document.body).overlayPlayground(\'close\');void(0)">Close</a>',
    wrapHTML: '<div id="wowwindow-inner"></div>',
    beforeHTML: '<div class="wowwindow-controlbar">{%close%} <span class="wowwindow-title">{%title%}</span></div>',
    afterHTML: '',
    verticalCenter: true,
    forceImageFade: false,
    yabbadabbadoo: false //take the red pill, take the blue pill
});
作者網站：http://wayfarerweb.com/jquery/plugins/wowwindow/
檔案大小：221 KB (包含範例)
檔案下載：http://wayfarerweb.com/jquery/plugins/wowwindow/jquery.wowwindow.0.6.2.zip
檔案備份：下載

Share
Tweet
Pin
Share
Tags : , , , , , , , ,

You May Also Like

0 意見