热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

好用的JQ图片特效jquerypoptroxpopupgalleries

jQueryPoptrox–PopupgalleriesRatethis(1Vote)DownloadDemojQueryPoptroxAddspopupgalleriestojQ

jQuery Poptrox – Popup galleries
技术分享
 
 
Rate this (1 Vote)

技术分享

Download   Demo

jQuery Poptrox Adds popup galleries to jQuery. Heavily customizable, easy to use, and built to support images, YouTube videos, Vimeo videos, Soundcloud tracks, IFRAMEs, and AJAX content.

1. INCLUDE JS FILES

2. HTML

"gallery">
    "path/to/image1.jpg">"path/to/image1_thumbnail.jpg" />
    "path/to/image2.jpg">"path/to/image2_thumbnail.jpg" />
    "path/to/image3.jpg">"path/to/image3_thumbnail.jpg" />
    "path/to/image4.jpg">"path/to/image4_thumbnail.jpg" />
    "path/to/image5.jpg">"path/to/image5_thumbnail.jpg" />
    "path/to/image6.jpg">"path/to/image6_thumbnail.jpg" />

3. Javascript

var foo = $(‘#gallery‘);
foo.poptrox();

4. OPTIONS

poptrox() has numerous options one can use or override, if one were so inclined:

foo.poptrox({
    preload:                    false,          // If true, preload fullsize images in
                                                // the background
    baseZIndex:                 1000,           // Base Z-Index
    fadeSpeed:                  300,            // Global fade speed
    overlayColor:               ‘#000000‘,      // Overlay color
    overlayOpacity:             0.6,            // Overlay opacity
    windowMargin:               50,             // Window margin size (in pixels; only comes into
                                                // play when an image is larger than the viewport)
    windowHeightPad:            0,              // Window height pad
    selector:                   ‘a‘,            // Anchor tag selector
    popupSpeed:                 300,            // Popup (resize) speed
    popupWidth:                 200,            // Popup width
    popupHeight:                100,            // Popup height
    popupIsFixed:               false,          // If true, popup won‘t resize to fit images
    useBodyOverflow:            true,           // If true, the BODY tag is set to overflow: hidden
                                                // when the popup is visible
    usePopupEasyClose:          true,           // If true, popup can be closed by clicking on
                                                // it anywhere
    usePopupLoader:             true,           // If true, show the popup loader
    usePopupCloser:             true,           // If true, show the popup closer button/link
    usePopupCaption:            false,          // If true, show the popup image caption
    usePopupNav:                false,          // If true, show (and use) popup navigation
    usePopupDefaultStyling:     true,           // If true, default popup styling will be applied
                                                // (background color, text color, etc)
    popupBackgroundColor:       ‘#FFFFFF‘,      // (Default Style) Popup background color (when 
                                                // usePopupStyling = true)
    popupTextColor:             ‘#000000‘,      // (Default Style) Popup text color (when
                                                // usePopupStyling = true)
    popupLoaderTextSize:        ‘2em‘,          // (Default Style) Popup loader text size
    popupCloserBackgroundColor: ‘#000000‘,      // (Default Style) Popup closer background color
                                                // (when usePopupStyling = true)
    popupCloserTextColor:       ‘#FFFFFF‘,      // (Default Style) Popup closer text color (when
                                                // usePopupStyling = true)
    popupCloserTextSize:        ‘20px‘,         // (Default Style) Popup closer text size
    popupPadding:               10,             // (Default Style) Popup padding (when
                                                // usePopupStyling = true)
    popupCaptionHeight:         60,             // (Default Style) Popup height of caption area
    popupCaptionTextSize:       null,           // (Default Style) Popup caption text size
    popupBlankCaptionText:      ‘(untitled)‘,   // Applied to images that don‘t have captions
                                                // (when captions are enabled)
    popupCloserText:            ‘ב,       // Popup closer text
    popupLoaderText:            ‘••‘, // Popup loader text
    popupClass:                 ‘poptrox-popup‘,// Popup class
    popupSelector:              null,           // (Advanced) Popup selector (use this if you 
                                                // want to replace the built-in popup)
    popupLoaderSelector:        ‘.loader‘,      // (Advanced) Popup Loader selector
    popupCloserSelector:        ‘.closer‘,      // (Advanced) Popup Closer selector
    popupCaptionSelector:       ‘.caption‘,     // (Advanced) Popup Caption selector
    popupNavPreviousSelector:   ‘.nav-previous‘,// (Advanced) Popup Nav Previous selector
    popupNavNextSelector:       ‘.nav-next‘,    // (Advanced) Popup Nav Next selector
    onPopupClose:               null,           // Called when popup closes
    onPopupOpen:                null            // Called when popup opens
});

5. SUPPORTED TYPES

In addition to images, popups can also show other stuff (like YouTube videos). To do this, point your thumbnail’s anchor to the appropriate URL (see below for specifics) and give it a data-poptrox attribute like so:


The data-poptrox attribute breaks down like this:

  • type: The type (eg. youtube)
  • (width)x(height): An optional width and height for the popup (eg. 800×400)

YouTube Videos

  • Link format: http://youtu.be/xxxxxxxxxxx (found via the “Share” link)
  • Type: youtube
  • Example:

Vimeo Videos

  • Link format: http://vimeo.com/xxxxxxxx (found via the “Share” button under “Embed”)
  • Type: vimeo
  • Example:

Soundcloud Tracks

  • Link format: https://api.soundcloud.com/tracks/xxxxxxxx (found via the “Share” button under “Widget Code” or “WordPress Code”)
  • Type: soundcloud
  • Example:

IFRAMEs

  • Link format: Anything.
  • Type: iframe
  • Example:

AJAX Content

  • Link format: Anything (as long as it’s on the same domain)
  • Type: ajax
  • Example:

Ignore

This “special” (unspecial?) type just tells Poptrox to treat whatever’s in href as if it were a normal link.

  • Link format: Anything.
  • Type: ignore
  • Example:

好用的JQ图片特效jquery-poptrox-popup-galleries


推荐阅读
  • 本文探讨了使用普通生成函数和指数生成函数解决组合与排列问题的方法,特别是在处理特定路径计数问题时的应用。文章通过详细分析和代码实现,展示了如何高效地计算在给定条件下不相邻相同元素的排列数量。 ... [详细]
  • 网络流24题——试题库问题
    题目描述:假设一个试题库中有n道试题。每道试题都标明了所属类别。同一道题可能有多个类别属性。现要从题库中抽取m道题组成试卷。并要求试卷包含指定类型的试题。试设计一个满足要求的组卷算 ... [详细]
  • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • 本文介绍了SIP(Session Initiation Protocol,会话发起协议)的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • 本文介绍了如何通过C#语言调用动态链接库(DLL)中的函数来实现IC卡的基本操作,包括初始化设备、设置密码模式、获取设备状态等,并详细展示了将TextBox中的数据写入IC卡的具体实现方法。 ... [详细]
  • 本文详细介绍了iOS应用的生命周期,包括各个状态及其转换过程中的关键方法调用。 ... [详细]
  • Windows操作系统提供了Encrypting File System (EFS)作为内置的数据加密工具,特别适用于对NTFS分区上的文件和文件夹进行加密处理。本文将详细介绍如何使用EFS加密文件夹,以及加密过程中的注意事项。 ... [详细]
  • 回顾两年前春节期间的一个个人项目,该项目原本计划参加竞赛,但最终作为练习项目完成。独自完成了从编码到UI设计的全部工作,尽管代码量不大,但仍有一定的参考价值。本文将详细介绍该项目的背景、功能及技术实现。 ... [详细]
  • 如何在PHP中安装Xdebug扩展
    本文介绍了如何从PECL下载并编译安装Xdebug扩展,以及如何配置PHP和PHPStorm以启用调试功能。 ... [详细]
  • JavaScript 页面卸载事件详解 (onunload)
    当用户从页面离开时(如关闭页面或刷新页面),会触发 onunload 事件,此时可以执行预设的脚本。需要注意的是,不同的浏览器对 onunload 事件的支持程度可能有所不同。 ... [详细]
  • 探索Java 11中的ZGC垃圾收集器
    Java 11引入了一种新的垃圾收集器——ZGC,由Oracle公司研发,旨在支持TB级别的内存容量,并保证极低的暂停时间。本文将探讨ZGC的开发背景、技术特点及其潜在的应用前景。 ... [详细]
  • 在Notepad++中配置Markdown语法高亮及实时预览功能
    本文详细介绍了如何在Notepad++中配置Markdown语法高亮和实时预览功能,包括必要的插件安装和设置步骤。 ... [详细]
  • 探讨如何在映射文件中处理重复的属性字段,以避免数据操作时出现错误。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
author-avatar
王孟儒062
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有