jquery自动生成分类筛选标签按钮的图片分类插件下载

分享 :

网盘下载链接:

提取密码: czea
复制提取密码
这是一款简单的jQuery图片分类筛选插件。该jQuery图片分类筛选插件的特点是可以自动生成分类筛选按钮,通过点击分类筛选按钮,可以对图片进行筛选,只显示需要的图片。
  • 详情
    文件来源

    网络收集

    更新日期

    2018-01-03

    适用平台

    All

    系统位数

    ALL

    文件格式

    zip

    文件语言

    中文

    文件授权

    免费

    下载次数

    0次

    预览效果:

  • 使用说明

    在页面中引入style.css,jQuery和filter-tags.js文件。

    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/filter-tags.js"></script>
    

    HTML结构

    该jQuery图片分类筛选插件要进行分类筛选,只需要在图片中添加data-tags属性,该属性用来对图片进行分类,并通过该属性来自动生成分类筛选按钮。如果一张图片属于多个分类,可用逗号将标签进行分隔。

    <!--分类过滤按钮-->
    <div id="buttons"></div>
    <!--图片画廊-->
    <div id="gallery">
      <img src="img/Alexman.jpg" data-tags="博客" alt="Alex Man" />
      <img src="img/Bodypositive.jpg" data-tags="美女" alt="Body Positive" />
      <img src="img/Hostkey.jpg" data-tags="商业" alt="Host Key" />
      <img src="img/Ladyheavenly.jpg" data-tags="博客,美女" alt="Lady Heavenly" />
      <img src="img/Oceantrekmarine.jpg" data-tags="商业" alt="Ocean Trek Marine" />
      <img src="img/Schweeet.jpg" data-tags="博客,商品" alt="Schweeet" />
      <img src="img/ttownsessions.jpg" data-tags="博客,杂志" alt="TTown Sessions" />
      <img src="img/Unwastedmind.jpg" data-tags="博客" alt="Unwasted Mind" />
      <img src="img/SonalS.jpg" data-tags="博客,文件" alt="Sonal Srivastava" />
      <img src="img/Syntheticdramlawns.jpg" data-tags="商业" alt="Synthetic Dream Lawns" />
      <img src="img/bennyboardroom.jpg" data-tags="商品" alt="Benny Board Room" />
      <img src="img/Rusty.jpg" data-tags="商品,博客" alt="Rusty" />
    </div>           
    

    该jQuery图片分类筛选插件的github地址为:https://github.com/Ali-Azam-Khan/Filtering-Image-Gallery

  • 相关下载