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

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

<script src="http://code.jquery.com/jquery-x.x.x.min.js"></script>

<script src="jquery.poptrox.min.js"></script>

2. HTML

<div id="gallery">

    <a href="path/to/image1.jpg"><img src="path/to/image1_thumbnail.jpg" /></a>

    <a href="path/to/image2.jpg"><img src="path/to/image2_thumbnail.jpg" /></a>

    <a href="path/to/image3.jpg"><img src="path/to/image3_thumbnail.jpg" /></a>

    <a href="path/to/image4.jpg"><img src="path/to/image4_thumbnail.jpg" /></a>

    <a href="path/to/image5.jpg"><img src="path/to/image5_thumbnail.jpg" /></a>

    <a href="path/to/image6.jpg"><img src="path/to/image6_thumbnail.jpg" /></a>

</div>

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:            ‘&bull;&bull;‘, // 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:

<a href="http://untitled.tld/path/to/whatever" data-poptrox="type,(width)x(height)"><img src="path/to/thumbnail.jpg" /></a>

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:
<a href="http://youtu.be/loGm3vT8EAQ" data-poptrox="youtube,800x480"><img src="path/to/thumbnail.jpg" /></a>

Vimeo Videos

  • Link format: http://vimeo.com/xxxxxxxx (found via the “Share” button under “Embed”)
  • Type: vimeo
  • Example:
<a href="http://vimeo.com/22439234" data-poptrox="vimeo,800x480"><img src="path/to/thumbnail.jpg" /></a>

Soundcloud Tracks

  • Link format: https://api.soundcloud.com/tracks/xxxxxxxx (found via the “Share” button under “Widget Code” or “WordPress Code”)
  • Type: soundcloud
  • Example:
<a href="https://api.soundcloud.com/tracks/93549370" data-poptrox="soundcloud"><img src="path/to/thumbnail.jpg" /></a>

IFRAMEs

  • Link format: Anything.
  • Type: iframe
  • Example:
<a href="path/to/whatever.html" data-poptrox="iframe,600x400"><img src="path/to/thumbnail.jpg" /></a>

AJAX Content

  • Link format: Anything (as long as it’s on the same domain)
  • Type: ajax
  • Example:
<a href="path/to/whatever.html" data-poptrox="ajax,600x400"><img src="path/to/thumbnail.jpg" /></a>

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:
<a href="http://n33.co" data-poptrox="ignore"><img src="path/to/thumbnail.jpg" /></a>
时间: 2024-11-03 21:16:55

好用的JQ图片特效jquery-poptrox-popup-galleries的相关文章

jQuery图片特效脚本prettyPhoto简介

prettyPhoto是一款基于jquery的轻量级的lightbox图片特效脚本,它不仅支持图片,还同时支持视频.flash. YouTube.iframe和ajax.而且prettyPhoto配置和使用都十分简单,扩展性也不错,你可以最大限度地自定义 prettyPhoto.prettyPhoto兼容大部分主流的浏览器,有些Wordpress图片插件就是基于此脚本制作的. 比如:Wordpress插件:Royal PrettyPhoto 建议英文好的朋友直接去官网上了解这个插件的用法,如果你

10款功能强大的jQuery/CSS3图片特效插件

1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网站登录页面特效源码,是一段实现页面底部拥有滚动云彩动态效果的特效源码,想要在网站中实现此类效果的朋友们可以前来下载使用.本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 在线演示 源码下载 2.HTML5实现的3D球体斑点运动动画特效源码 这是一个很酷的HTML5 3D动画效果,是一个小球,小球表面出现跳动的斑点,斑点跳动时形成各种各样的形状,其实这款动画并不是正宗的HTML5 3D动画,而是

基于jQuery点击淡入淡出显示图片特效

分享一款基于jQuery点击淡入淡出显示图片特效.这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center><p style="color:#334960">点击图标进行展示</p></center> <div class="main"> <div id="coolShow"><

15个web前端的美轮美奂的 jQuery 图片特效

jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种精美的图片展示效果.下面向大家分享精心挑选的23款优秀 jQuery 图片特效插件,带给你美轮美奂的图片展示效果. 1.3D Image Slider 非常非常酷的 3D 图片滑动效果,有五种绚丽的效果演示. 在线演示 源码下载 2.Portfolio Image Navigator 精致的图片导航

手风琴图片和钢琴导航栏JQ滑动特效

手风琴JQ滑动特效 1.效果预览: 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script> <

jq滚动插件jquery.nicescroll+定位到底部

<pre name="code" class="html"><!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compat

JQ滚动特效

1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Co

CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效

学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接.今天就来做几个简单的实例展示现在 流行的DIV+CSS布局的方便好用之处.顺便也说一下CSS3新增的样式属性box-shadow和属性transform. 一图文混排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

【程序吧 www.qhttl.com 圆形气泡导航特效jquery】

先上图: jquery实现的圆形气泡特效,是导航类的,用于大气的网页设计,或者公司网站首页导航特效 预览地址:程序吧推介圆形气泡导航特效 下载地址:圆形气泡导航特效 [程序吧 www.qhttl.com 圆形气泡导航特效jquery],布布扣,bubuko.com