jq图片展示插件highslide.js简单dom

时间:2022-09-24 12:49:27

今天用用了一款图片展示插件highslide.js,感觉用起来很是舒畅,几乎不用怎么写代码,只需要知道如何写参数就行了。

那么这么牛叉的插件我们该如何用哪,下面我就跟大家讲解一下。

    一、引入  

    首先我们运用绝对路径引入,这一般都是在实际项目中引用的方法,我们下载时候会有个文件包,里面包含样式文件和脚本文件。

jq图片展示插件highslide.js简单dom                jq图片展示插件highslide.js简单dom

            

                  jq图片展示插件highslide.js简单dom

用的时候只需引入这两个文件即可,然后代码中这样写:

<link rel="stylesheet" type="text/css" href="<%=controller.getStaticPath(request)%>/js/highslide.css" />
<script type="text/javascript" src="<%=controller.getStaticPath(request)%>/js/highslide-with-gallery.js"></script>

我这项目是jsp文件,所以说引入的根目录的方式不同,小伙伴们可以根据自己的项目来具体如何引入吧。

然后我们要做的是调用我们的插件,传入参数:

            jq图片展示插件highslide.js简单dom

二、配置参数

上面是我的参数配置图

          hs.graphicsDir = '<%=controller.getStaticPath(request)%>/js/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.wrapperClassName = 'dark borderless floating-caption';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.75; // Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .6,
position: 'bottom center',
hideOnMouseOut: true
}
});

上面的代码除了文件地址需要根据自己的路径配置外,其他的都可以不用改变。

三、如何展示

插件配备好了我们该如何将我们的图片展示出来哪,这个更简单了。

jq图片展示插件highslide.js简单dom

上图几个箭头指示的方向是一定要配置的。

1、最外层div的类名要是highslide-gallery,这样的话我们完成的图片展示就轮播会展示这层div内的所有图片。

jq图片展示插件highslide.js简单dom

2、图片外层要包裹一个A标签,并且A标签的地址要是真正大图的地址,也就是要展示图片的地址。然后在给A价格点击事件onclick="return hs.expand(this),不加的话会使点击没有效果。

jq图片展示插件highslide.js简单dom

记住点击事件的写法return hs.expand(this),其实这样就能完成一个小图点击展示大图播放的交互效果了。当然也可以把图片改成文字或其他的,这样也能完成点击展示的功能。下面就给大家看一下最终的效果吧。

四、展示效果

            jq图片展示插件highslide.js简单dom

这是点击前

            jq图片展示插件highslide.js简单dom

这是点击后,是不是很简单。其实难点在于配置参数,但是我已经配置了,所以各位大大就很轻松的使用吧。

jq图片展示插件highslide.js简单dom的更多相关文章

  1. 手机触屏滑动图片切换插件swiper&period;js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. 【JavaScript 插件】图片展示插件 PhotoSwipe 初识

    前言: 考虑自己网站的图片展示,而且要支持移动端和PC端.自己写的代码也不尽如意,要写好的话也需要时间,于是就想到了使用相关插件. 准备: PhotoSwipe 官网地址:http://photosw ...

  3. 基于jq图片居中插件 &lbrack;center&rsqb;

    最近在做一个项目,大量的图片基于js进行缩放(图片放大镜),考虑用css要写许多hack,而已经基于jq了,干脆写个方法得了. 代码很简单,不用多讲但是很实用. $.fn.extend({ cente ...

  4. PhotoSwipe图片展示插件

    这个插件相当棒!功能也很强大,可以自行体会. 官方网址:http://www.photoswipe.com/ github地址:https://github.com/codecomputerlove/ ...

  5. 强大的图片展示插件&comma;JQuery图片预览展示插件

    只需要引入JQuery.js , viewer.css 和 viewer.js <!DOCTYPE html> <html lang="en"> <h ...

  6. jQuery图片剪裁插件Cropper&period;js的使用

    插件下载地址及文档说明 1.引入必要的js和css核心文件 <link rel="stylesheet" href="../css/cropper.css&quot ...

  7. &lbrack;原创&rsqb; JavaScript 图片放大镜插件 enlarge&period;js 以及移动版 enlarge&period;touch&period;js

    拖拖拉拉准本了一个月,终于把网站做好了.也终于可以分享这两个插件了.这两个插件,一个是 jQuery 版本,适合鼠标使用的,另一个是原生 JavaScript 制作,适合触摸屏使用(touch 事件) ...

  8. Lightbox 图片展示插件

    html <a href="<?php echo RESOURCES_BASE_FOLDER;?>image/default_pic.jpg" target=&q ...

  9. 十个jQuery图片画廊插件推荐

    jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuery的重要性不能被忽视.下面为你介绍了10个最有美感,创新性和创造性的jQu ...

随机推荐

  1. Navi&period;Soft30&period;开放平台&period;腾讯&period;开发手册

    1系统简介 1.1功能简述 现在是一个信息时代,并且正在高速发展.以前获取信息的途径非常少,可能只有电视台,收音机等有限的来源,而现在的途径数不胜数,如:QQ,微信,官方网站,个人网站等等 本开发手册 ...

  2. Mybatis3&plus;Spring4&plus;SpringMVC4 整合

    首先在整合这个框架的时候,想想其一般的步骤是怎样的,先有个步骤之后,不至于在后面的搞混了,这样在整合的时候也比较清晰些. 然后我们就细细的一步一步来整合. 1  创建一个Web项目. 2  导入Myb ...

  3. LeetCode First Bad Version (二分查找)

    题意: 有一个bool序列表示对应下标的版本是否出问题(下标从1开始),如果一个版本出了问题,那么其后面全部版本必定出问题.现在给出判断任意版本是否出问题的API,请找到第一个出问题的版本. 思路: ...

  4. CentOS&lowbar;5&period;6下使用cmake编译MySQL&lowbar;5&period;5&period;11教程

    注:资料来自网络    Centos 5.6编译安装mysql 5.5.11 2011年06月24日 星期五 05:33 MySQL 最新的版本5.5.11需要cmake编译安装,估计以后的版本也会采 ...

  5. d4d&num;9 玩Docker只要浏览器就够了,PWD是个神奇的网站

    本文是d4d系列的第9篇,在这一篇中给大家介绍一个学习Docker最为快捷高效的方式,你不需要自己搭建环境,也不用担心把自己的开发环境搞乱,你需要的只是一个浏览器,就可以立即开始学习Docker的常用 ...

  6. UVA 536 Tree Recovery 建树&plus;不建树

    题意: 给出先序和中序,求后序. 思路: ①建树然后递归输出. //建树的 #include<iostream> #include<cstdio> #include<qu ...

  7. 【js】js声明与数据类型

    之前整理知识点感觉有点没有针对性,每期知识点之间都没有关联,不成体系,其实对学习与运用知识并无益,随着知识的积累,不使用就会忘记.所以从本次开始,将对知识点进行体系化.先列出本期知识体系图,再进行逐步 ...

  8. 论文笔记:Fast Neural Architecture Search of Compact Semantic Segmentation Models via Auxiliary Cells

    Fast Neural Architecture Search of Compact Semantic Segmentation Models via Auxiliary Cells 2019-04- ...

  9. css3&plus;html5特效-向上滑动

    css+html5特效-向上滑动 效果描述:切换的下拉和上拉状态 鼠标悬浮:下拉鼠标离开:上拉 /*外容器设置*/ .box1{position:relative;top:100px;left:100 ...

  10. MicroPython的开发板

    比如: pyboard micro:bit ESP8266/ESP32 stm32等等 什么是pyboard? pyboard是官方的MicroPython微控制器板,完全支持软件功能.硬件有: ST ...