相册展示了PhotoSwipe.js插件的实现

时间：2021-09-07 来源：互联网编辑：宝哥软件园浏览：次

官网：http://photoswipe.com/,你可以在这个网站上下载PhotoSwipe文件和相关的例子。

这个组件主要用来显示图片和相册，非常实用。

1.要使用该组件，必须引入两个js文件1 script type=' text/JAVAScript ' src=' http 3360 simple-inheritation . min . js ' 2 script type=' text/JAVAScript ' src=' http : code-photos wipe-1 . 0 . 11 . min . js '！-最新版本应该是1.0.11-

其次，页面结构可以是这样的

Div id=' Gallery ' Div class=' Gallery-row ' Div class=' Gallery-item ' a href=' images/full/01 . jpg ' img src=' http : images/thumb/01 . jpg ' alt=' Image 01 '/a/Div class=' Gallery-item ' a href=' images/full/02 . jpg ' img src=' http : images/thumb/02 . jpg ' alt=' Image 02 '/a/Div 只有id='Gallery '和a href=' picture path' /a(后面会解释)才是真正有用的，其他类只起到美化原始页面结构的作用(不同于你真正想要的效果的页面，也就是说你只需要按照上面页面的结构进行排版，你想要的页面效果是由插件js自己完成的，所以不需要写效果布局)。

页面所需的js和页面结构是可用的，所以下面是插件的使用。

第三，您可以通过两种方式声明插件

1.这是通过添加addEventListener()来完成的，这是浏览器的默认方式

document . addeventlistener(' DOMContentLoaded '，function(){ Code.photoSwipe('a '，' # Gallery ')；//在这里，id='Gallery '和a href=' . '/a涉及到上面页面结构中的，其中id='Gallery '是容器//a href='图片路径'/a，其中href必须是当前指向图片的路径}，false)；2.使用Jquery:

$(文档)。ready(function(){ $('#Gallery a ')。photoSwipe()；});第四，通过这个设置，你的页面大概会像这样初始页面效果：

点击任意图片后，页面的形式变成如下(这个页面其实就是我真正想要的):

在页面顶部的img/中可以清晰的看到alt中的内容，底部有四个按钮，依次代表：关闭页面返回原显示(即上一张图片)、自动播放、上一张图片、下一张图片。

这样的专辑效果就显现出来了。当然，在这个页面上，你可以用鼠标左右滑动来切换。如果你在手持设备上，你也可以用手指左右滑动。

这个插件也有自己的许多属性：

AllowUserZoom:允许用户双击放大/缩小模式来查看图片。默认值=trueautoStartSlideshow:当照片擦除被激活时，自动播放幻灯片。默认值=falsealowrotationuserzoom :仅iOS支持-允许用户在平移模式下用手势放大和缩小/旋转图像。默认值=fallbackbuttonhideenabled:按回车键隐藏相册幻灯片。它主要被安卓和黑莓使用。支持bb6和安卓v2.1。IOS 4及更高版本。默认值=true options and toolbarautoxide lay :自动隐藏标题栏和工具栏的延迟时间。默认值=5000(毫秒)。如果设置为0，则不会自动隐藏(点击/点击切换显示和隐藏)captionandtoolbarfliposition :标题栏和工具栏切换位置(标题显示在底部，工具栏显示在顶部)。默认值=falsecaption和toolbarhide :隐藏标题栏和工具栏。默认值=falsecaption和toolbaropacity:标题栏和工具栏的透明度(0-1)。默认值=0.8 CaptionandToolbarShowEmptyAdaptions :即使当前图片的标题为空，也显示标题栏。默认值=truecacheMode:缓存模式，代码。photoswipe.cache.mode.normal(默认，正常)或代码。PhotoSwipe.cache.mode .进取(进取，进取)。确定photoswipe如何管理图片缓存。进取模式会主动设置非'当前，上一个，下一个'图片为空的类型。这对于旧iOS浏览器中的大图片内存溢出将非常有用。大多数情况下，正常模式就可以了。双击速度：双击之间的最大间隔。默认值=300(毫秒)双击缩放级别：当用户双击时，放大倍数，默认的“放大”级别。默认值=2.5enableDrag:允许将上一张/下一张图片拖动到当前界面。默认值=trueenableKeyboard:允许键盘操作(左右箭头切换，Esc退出，Enter自动播放，空格键显示/隐藏标题栏/退出)。默认值=trueenableMouseWheel:允许鼠标滚轮操作。Default=truefadeInSpeed:淡入效果元素速度(持续时间)，毫秒。Default=250fadeOutSpeed:淡出效果元素速度(持续时间)，毫秒。default=250 imagescaledmethod :图片缩放方法(模式)。可选值：“适合”。“缩放”和“缩放”。“适合”模式确保图像适合屏幕。“fitNoUpscale”和“fit”类似，但不会放大图像。”“缩放”将使图像全屏显示，但图像可能没有按比例缩放。默认=“适合”翻转鼠标滚轮3360翻转鼠标滚轮。默认情况下，向下滚动将切换到下一页，向上滚动到上一页。Default=falsejQueryMobile:指示PhotoSwipe是否集成到jQueryMobile项目中。默认情况下，Photoswipe会尝试为jQuery Mobile的窗口和对话框页面使用的youjQuery Mobile日志哈希：哈希标记解决这个问题。

默认值='ui-state=dialog'loop:相册是否自动循环。默认值=truemargin:两张图片之间的间隔。单位是像素。默认值=20maxUserZoom:最大放大倍数。默认值=5.0(设置为0将被忽略)最小放大倍数为：倍。默认=0.5(设置为0将被忽略)鼠标滚轮对鼠标滚轮的灵敏度。默认值=500(毫秒)NextPreviousSlideSpeed:当您单击上一个按钮和下一个按钮时，切换会延迟多少毫秒？默认值=0(立即切换)preventHide:防止用户关闭照片擦除。同时，它还隐藏了工具栏上的“关闭”按钮。它在独占页面上使用(示例是源代码中的exclusive-mode . html/08)。default=false preventslideshow :阻止自动播放模式。同时，它隐藏了工具栏中的播放按钮。default=false slideshowdelay :在自动播放模式下，需要多长时间才能播放下一个。默认值=3000(毫秒)幻灯片速度：图片。default=250(ms)swipetthreshold :一个手指滑动多少像素才能触发一个滑动手势事件。default=50swipetimethreshold :定义触发滑动手势的最大毫秒数。如果太慢，就不会触发刷卡。只会拖动当前照片的位置。默认=250滑动定时功能：滑动时：激活功能。默认值=“放松”zIndex :初始zIndex值。default=1000 enableuiwebviewreptiontimeout :检查设备的方向是否改变。Default=false uiwebviewrestposiondelay :检查设备方向是否定期变化的时间Default=500(毫秒)preventDefaultTouchEvents:防止默认触摸事件，如页面滚动。Default=truetarget:必须是合法的DOM元素(如DIV)。默认为窗口(整页)。而且如果是低级DOM，会显示在DOM中，可能不是全屏。

如果不需要展示第一个页面直接展示第二个页面，可以这样设置：

$(文档)。就绪(函数(){ //设置照片擦除，设置preventhide : true ' var拇指=code。PhotoSwipe(' a '，' #Gallery '，{ preventhide : true })；代码。当前显示(0);});当然这个插件还有很多其他的监听函数：

文件。add event listener(' DOmContentLoaded '，函数(){ //onBeforeShow在走廊将要展示之前调用该方法代码。当前。添加事件侦听器（代码PhotoSwipe。事件类型。onBeforeShow，函数(e){ console。日志(' onBeforeShow ')；});//昂秀在走廊展示的时候调用代码。当前。添加事件侦听器（代码PhotoSwipe。EventTypes.onShow，function(e){ console。日志(' OnShaw ')；});//OnBeforHeide在走廊隐藏之前代码。当前。添加事件侦听器（代码PhotoSwipe。事件类型。OnBeforHeide，函数{控制台。日志(' OnBeforHeide ')；});//在侧面在走廊隐藏的时候代码。当前。添加事件侦听器（代码PhotoSwipe。事件类型。在侧面，函数(e){控制台。日志(“现有”)；});//onshawsnext在展示下一个的时候代码。当前。添加事件侦听器（代码PhotoSwipe。事件类型。OnShawnxt，函数{控制台。日志(' OnShanxt ')；});//onShowPrevious在展示上一个的时候代码。当前。添加事件侦听器（代码PhotoSwipe。事件类型。在上一次，函数{控制台。日志(' OnShowPrevious ')；});//显示图像在图片展示代码。当前。添加事件侦听器（代码PhotoSwipe。事件类型。在显示图像上，函数{控制台。日志(“显示图像”)；});//onResetPosition当走廊的大小和位置发生变化时或者设备的方向或者窗口大小改变时，出发该方法代码。当前。添加事件侦听器（代码PhotoSwipe。事件类型。在预设位置，功能(e){控制台。log(' on reset position ')；});//onSlideshowStart当走廊开始滑动展示的时候（此方法可能是我理解有误，实验过程中一直没有触发过的),原文是：当图库启动幻灯片显示代码时。当前。添加事件侦听器（代码PhotoSwipe。事件类型。onSlideshowStart，函数(e){ console。日志(' onSlideshowStart ')；});//onSlideshowStop当走廊活动结束的时候代码。当前。添加事件侦听器（代码PhotoSwipe。事件类型。onSlideshowStop，函数(e){ console。日志(' onSlideshowStop ')；});//onbeforecaoptions和toolbarshow在顶部状态栏和底部的工具栏展示之前触发代码。当前。添加事件侦听器（代码PhotoSwipe。事件类型。and选项和工具栏显示，函数{控制台。日志(' onbeforecaoptions和toolbarshow ')；});//onbeforecaoptions和toolbarhide在顶部状态栏和底部的工具栏隐藏之前触发代码。当前。添加事件侦听器（代码PhotoSwipe。事件类型。onbeforecaoptions和toolbarhide，函数{控制台。日志(' onbeforecaoptions和toolbarhide ')；});//onViewportClick在走廊中点击屏幕的时候触发，此时一般会触发onBeforeCaptionAndToolbarShow和ToolbarShow和工具栏显示或者onbeforecaoptions和toolbarhide方法代码。当前。添加事件侦听器（代码PhotoSwipe。事件类型。onview portclick，function(e){ console。日志(' onview portclick ')；});}，false)；由于在照片擦除官网中没有发现美国石油学会(美国石油协会)接口的调用方式，且现在的射流研究…水平也不咋地，所以它的一些美国石油学会(美国石油协会)接口基本上不是很了解，但是我在查看它的例子的时候发现有个变量会经常出现，代码。照片擦除或者代码。照片擦除。当前，所有我就在控制台中进行了一些实验，当我输入代码。照片擦除的时候，出现了如下内容：