热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

jQueryPoptrox–PopupgalleriesRatethis

jQuery Poptrox – Popup galleries
 
Rate this (1 Vote)

> "path/to/image1_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:

推荐阅读
  • 在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]
  • 在网站制作中随时可用的10个 HTML5 代码片段
    HTML很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这篇文章中,我收集了10个超有用的HTML代码片段,有HTML5启动模板、空白图片、打电话和发短信、自动完 ... [详细]
  • 优化网页加载速度:JavaScript 实现图片延迟加载
    本文介绍如何使用 JavaScript 实现图片延迟加载,从而显著提升网页的加载速度和用户体验。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
  • 深入分析十大PHP开发框架
    随着PHP技术的发展,各类开发框架层出不穷,成为了开发者们热议的话题。本文将详细介绍并对比十款主流的PHP开发框架,旨在帮助开发者根据自身需求选择最合适的工具。 ... [详细]
  • 本文深入探讨网页游戏的开发流程,涵盖从程序框架设计到具体实现的技术细节,旨在为开发者提供全面的指导。 ... [详细]
  • 探讨在 Vue 框架中遇到的数据更新延迟或失败的问题,并提供解决方案。 ... [详细]
  • 动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ... [详细]
  • 深入解析ZooKeeper:Java组件化开发必备技能
    本文详细介绍了ZooKeeper作为分布式服务协调框架的核心功能与应用场景,包括其数据一致性解决方案、数据结构特点、监听通知机制及选举机制等,帮助开发者更好地理解和应用ZooKeeper。 ... [详细]
  • 本文介绍如何使用Python进行文本处理,包括分词和生成词云图。通过整合多个文本文件、去除停用词并生成词云图,展示文本数据的可视化分析方法。 ... [详细]
  • 深入解析三大范式与JDBC集成
    本文详细探讨了数据库设计中的三大范式,并结合Java数据库连接(JDBC)技术,讲解如何在实际开发中应用这些概念。通过实例和图表,帮助读者更好地理解范式理论及其在数据操作中的重要性。 ... [详细]
  • 本文探讨了如何在 PHP 的 Eloquent ORM 中实现数据表之间的关联查询,并通过具体示例详细解释了如何将关联数据嵌入到查询结果中。这不仅提高了数据查询的效率,还简化了代码逻辑。 ... [详细]
  • 探讨在Windows 10操作系统中遇到QQ堂无法正常启动的问题及解决方案。 ... [详细]
author-avatar
泰山长征
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有