jQuery和CSS3推拉式隐藏侧边栏网格图片画廊特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款效果非常炫酷的jQuery和CSS3推拉式隐藏侧边栏网格图片画廊特效。这个图片画廊特效中所有缩略图以网格形式排列，当用户点击相应的缩略图后，高清大图从右边滑出，整个缩略图面板被向左推，右侧显示大图及图片的文字说明。

制作方法

HTML结构

这个图片画廊使用无序列表来制作，外部使用<section>来包裹，最外层使用<main>元素。

<main role="main" id="main">
  <section class="tiles-a">
    <ul>
      <li>
        <a class="gallery" href="#" style="background: url('http://i.imgur.com/J3gQPXH.jpg'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="http://i.imgur.com/t5Nd1jj.jpg" alt="...">
            <div class="text-copy wrapper">
              <h3>Name Here</h3>
              <p>...</p>
            </div>
          </div>
        </a>
      </li>
      ......
    </ul>
  </section>
</main>

右侧隐藏的滑动侧边栏使用的是<aside>元素，里面使用一个SVG来制作关闭按钮。

<aside role="complementary" id="aside" 
       aria-hidden="true" 
       aria-expanded="false"> 
  <a href="#" class="close">
    <img src="close.svg" alt="Close button">
      <span class="visually-hidden">Return to main content
      </span>
  </a>
  <div class="aside--details" tabindex="0" 
       aria-live="polite" 
       aria-atomic="true" 
       aria-label="Image details"> 
  </div>
</aside>

CSS样式

这个网格图片画廊的CSS样式比较简单，其中使用媒体查询来控制图片的网格布局。其它代码相对简单，请参考下载文件。

@media (min-width: 640px) {
  .tiles-a li {
    float: left;
    width: 33.33%;
  }
}

JAVASCRIPT

这个网格图片画廊的js代码中，所有的功能块都封装成了函数，showAside()是显示隐藏侧边栏，killAside()是关闭侧边栏。loadTileData()是为侧边栏加载数据。

// load data to aside
function loadTileData(target){
  var $this = $(target),
      itemHtml = $this.find(".details").html();
      $asideTarget.html(itemHtml);
      showAside();
}              
// show/hide aside
function showAside(){
  if(!$("html").hasClass(slideClass)){
    $("html").toggleClass(slideClass);
    $aside.attr("aria-hidden","false");
    focusCloseButton();
  }
}              
// kill aside
function killAside(){
  if($("html").hasClass(slideClass)){
    $("html").removeClass(slideClass);
    sendFocusBack();
    $aside.attr("aria-hidden","true");
    $tiles.attr("aria-expanded","false");
  }
}

其它js代码请参考下载文件。