首页vns威尼斯城官网登入 › 复制代码 vns威尼斯城官网登入:代码如下,它不仅支持图片

复制代码 vns威尼斯城官网登入:代码如下,它不仅支持图片

一款效果非常不错的jquery插件,非常不错jquery插件

今天为大家介绍一款非常不错的jquery图片查看插件-Lightbox。这款图片查看插件体验很好,不仅有左右两个小箭头可以浏览上一张和下一张图片,还支持鼠标的左右键浏览上一张和下一张图片。有点类似google图片的查看器。一起看下效果图:

vns威尼斯城官网登入 1

 

在线预览   源码下载

 

我们一起看下实现代码:

html代码:

vns威尼斯城官网登入 2<div
id="wrapper"> <h1> Responsive Lightbox Portfolio</h1>
<ul id="portfolio" class="clearfix"> <li><a
href="img/[email protected]"
title="Brick and Bay Windows"> <img src="img/item01.jpg"
alt="brick and by windows"></a></li> <li><a
href="img/[email protected]"
title="Simple iPad Icons"> <img src="img/item02.jpg"
alt="old-style ipad icons"></a></li> <li><a
href="img/[email protected]"
title="Mobile Profile"> <img src="img/item03.jpg" alt="mobile
iphone app profile ui"></a></li> <li><a
href="img/[email protected]"
title="New Shoes"> <img src="img/item04.jpg" alt="new balance
shoes"></a></li> <li><a
href="img/[email protected]"
title="Rive Radio Icon"> <img src="img/item05.jpg" alt="rive radio
icon"></a></li> <li><a
href="img/[email protected]"
title="Blood Pressure app"> <img src="img/item06.jpg" alt="blood
pressure app ui"></a></li> <li><a
href="img/[email protected]"
title="Memories Feed UI"> <img src="img/item07.jpg" alt="memories
feed ui iphone"></a></li> <li><a
href="img/[email protected]"
title="Vector Devices"> <img src="img/item08.jpg" alt="apple
device vector icons"></a></li> </ul> </div>
View Code

js代码:

vns威尼斯城官网登入 3
$(function () { $('#portfolio').magnificPopup({ delegate: 'a', type:
'image', image: { cursor: null, titleSrc: 'title' }, gallery: { enabled:
true, preload: [0, 1], // Will preload 0 - before current, and 1 after
the current image navigateByImgClick: true } }); }); View Code

注:本文爱编程原创文章,转载请注明原文地址:

复制代码 代码如下:

复制代码 代码如下:

jquery图片播放浏览插件prettyPhoto使用详解,

一、prettyPhoto简介

vns威尼斯城官网登入 4

prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件,它不仅支持图片,还同时支持视频、flash、YouTube、iframe和ajax。而且prettyPhoto配置和使用都十分简单,扩展性也不错,你可以最大限度地自定义prettyPhoto。目前,prettyPhoto兼容大部分主流的浏览器,包括令人纠结的IE6。

prettyPhoto插件的项目地址:

建议英文好的朋友直接去官网上了解这个插件的用法,如果你的英文很烂,那么也别急,下面我就给大家来一一介绍prettyPhoto的使用方法。

二、prettyPhoto使用方法介绍

1、引入jquery核心库和prettyPhoto插件库以及prettyPhoto样式表文件

复制代码 代码如下:

<script src="js/jquery.js" type="text/javascript"
charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css"
media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript"
charset="utf-8"></script>

2、初始化jquery插件,以下是最简单的配置的js代码

复制代码 代码如下:

$(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
});

下面是每种类型的html代码

1、单张图片

复制代码 代码如下:

<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is
the description">
<img src="images/thumbnails/t_2.jpg" width="60" height="60"
alt="This is the title" />
</a>

2、图片相册

复制代码 代码如下:

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]"
title="You can add caption to pictures.">
<img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red
round shape" />
</a>
<a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]">
<img src="images/thumbnails/t_2.jpg" width="60" height="60"
alt="Nice building" />
</a>
<a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]">
<img src="images/thumbnails/t_3.jpg" width="60" height="60"
alt="Fire!" />
</a>
<a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]">
<img src="images/thumbnails/t_4.jpg" width="60" height="60"
alt="Rock climbing" />
</a>
<a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]">
<img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly
kite, fly!" />
</a>

3、单个flash

复制代码 代码如下:

<a
href=""
rel="prettyPhoto[flash]" title="Flash 10 demo">
<img src="images/thumbnails/flash-logo.jpg" alt="Flash 10 demo"
width="60" />
</a>

4、YouTube视频

复制代码 代码如下:

<a href=""
rel="prettyPhoto" title="">
<img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60"
/>
</a>

5、Vimeo

复制代码 代码如下:

<a href="" rel="prettyPhoto" title="">
<img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60"
/> </a>

6、QuickTime影片

复制代码 代码如下:

<a title="Despicable Me" rel="prettyPhoto[movies]"
href=";
<img
src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png"
alt="Despicable Me" width="50" /> </a> <a title="Tales from
Earthsea" rel="prettyPhoto[movies]"
href=";
<img
src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png"
alt="Tales from Earthsea" width="50" /> </a> <a
title="Grease Sing-A-Long" rel="prettyPhoto[movies]"
href=";
<img
src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png"
alt="Grease Sing-A-Long" width="50" /> </a>

7、外部网站(iframe

复制代码 代码如下:

<a href=""
rel="prettyPhoto[iframes]" title="Google.com opened at
100%">Google.com</a>
<a href=""
rel="prettyPhoto[iframes]">Apple.com</a>
<a href=""
rel="prettyPhoto[iframes]">Twitter.com</a>

8、普通文本

复制代码 代码如下:

<a href="#inline-1" rel="prettyPhoto" ><img
src="/wp-content/themes/NMFE/images/thumbnails/earth-logo.jpg" alt=""
width="50" /></a>
<div id="inline-1" class="hide">
    <p>这里是普通的文本</p>
   
<p>今天给大家介绍的prettyPhoto希望大家能喜欢,这个是播放普通文本的html</p>
</div>

9、AJAX内容

复制代码 代码如下:

<a rel="prettyPhoto[ajax]"
href="/demos/prettyPhoto-jquery-lightbox-clone/xhr_response.html?
ajax=true&width=325&height=185">Ajax content</a>

三、总结

prettyBox图片播放插件很好用,赶紧用它来打造你的专属相册吧!

一、prettyPhoto简介
prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件,它不仅支持图片...

speed:图片滚动速度,默认为500毫秒。

推荐一款Jquery 弹出层的插件

www.oschina.net/...?pp=19
这个很好。我现在用的就是这个,可定制性很强,而且界面漂亮,支持框架遮罩。可以实现跨域调用url,支持自动适应宽度。
 

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* ui-banner */
.ui-banner{display:block;position:relative;width:820px;margin:20px
auto;}
.ui-banner.ui-banner-invalid{display:none;}
.ui-banner,.ui-banner .ui-banner-slides,.ui-banner
.ui-banner-slogans,.ui-banner .ui-banner-arrow{height:233px;}
.ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner
.ui-banner-arrow{position:absolute;top:0;}
.ui-banner
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
.ui-banner .ui-banner-slides{width:654px;height:233px;left:1px;}
.ui-banner .ui-banner-slides li{display:none;position:absolute;}
.ui-banner .ui-banner-slides li
img{width:654px;height:233px;border:none;}
.ui-banner .ui-banner-slides li.ui-banner-slides-current,.ui-banner
.ui-banner-slides li.ui-banner-slides-prev,.ui-banner .ui-banner-slides
li.ui-banner-slides-next{display:block;}
.ui-banner .ui-banner-slides li.ui-banner-slides-current{left:0;}
.ui-banner .ui-banner-slides li.ui-banner-slides-prev{left:-654px;}
.ui-banner .ui-banner-slides li.ui-banner-slides-next{left:654px;}
.ui-banner
.ui-banner-slogans{background:#009AC9;height:213px;overflow:hidden;padding:10px
30px 10px 15px;width:118px;rightright:0;}
.ui-banner .ui-banner-slogans
li{cursor:pointer;color:#8DC4EC;text-align:left;font-weight:bold;font-size:12px;line-height:14px;padding:10px
0 10px 10px;margin-left:5px;border-bottom:1px solid
#79B4DF;list-style:none;list-style-type:none;}
.ui-banner .ui-banner-slogans
li.ui-banner-slogans-current{color:#FFF;}
.ui-banner .ui-banner-slogans
li.ui-banner-slogans-prev{border-bottom:none;}
.ui-banner .ui-banner-arrow{display:block;width:45px;outline:none;}
.ui-banner
.ui-banner-arrow.ui-banner-arrow-prev{left:-14px;top:100px;background:transparent
url("images/hero-slider-arrow-left.png") no-repeat 0 0;}
.ui-banner
.ui-banner-arrow.ui-banner-arrow-next{left:630px;top:100px;background:transparent
url("images/hero-slider-arrow-right.png") no-repeat 0 0;}
.ui-banner .ui-banner-arrow.ui-banner-arrow-next img{left:-15px;}
.ui-banner
.ui-banner-overlay{bottombottom:0;height:10px;position:absolute;rightright:0;width:173px;}
</style>

vns威尼斯城官网登入 5

display_num:展示图片的数量,默认为4。

jquery,推荐一种可以替代多级联动下拉列表的jquery插件

有一个是jQuery插件叫mcdropdown,下拉后可以显示多级菜单,我觉得可以替代多级联动下拉列表。
 

今天为大家介绍一款非常不错的jquery图片查看插件-Lightbox。这款图片查看插件体验很好,...

您可能感兴趣的文章:

  • jquery
    单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
  • jquery实现marquee效果(文字或者图片的水平垂直滚动)
  • jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
  • jQuery实现的立体文字渐变效果
  • 基于jquery实现的文字淡入淡出效果
  • jQuery实现为控件添加水印文字效果(附源码)
  • jquery单行文字向上滚动效果示例
  • 多种JQuery循环滚动文字图片效果代码
  • 基于jquery实现的文字向上跑动类似跑马灯的效果
  • jQuery文字横向滚动效果的实现代码
  • 基于jquery的文字向上跑动类似跑马灯的效果
  • 11个用于提高排版水平的基于jquery的文字效果插件
  • jquery插件之文字间歇自动向上滚动效果代码
  • jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】

prettyPhoto插件的项目地址:

XHTML

本例用了2个js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js,到演示页面可以查看

prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件,它不仅支持图片,还同时支持视频、flash、YouTube、iframe和ajax。而且prettyPhoto配置和使用都十分简单,扩展性也不错,你可以最大限度地自定义prettyPhoto。目前,prettyPhoto兼容大部分主流的浏览器,包括令人纠结的IE6。

复制代码

复制代码 代码如下:

2、初始化jquery插件,以下是最简单的配置的js代码

复制代码

复制代码 代码如下:

1、引入jquery核心库和prettyPhoto插件库以及prettyPhoto样式表文件

</div>
</body>
</html>

JavaScript Code

复制代码 代码如下:

margin:图片间的间距,默认为0。

CSS Code

prettyBox图片播放插件很好用,赶紧用它来打造你的专属相册吧!

<div id="main">
 
  <div class="demo">
    <div class="bx_wrap">
        <div class="bx_container">
          <ul id="demo1">
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s1.jpg"><br/>图片1</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s2.jpg"><br/>图片2</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s3.jpg"><br/>图片3</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s4.jpg"><br/>图片4</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s5.jpg"><br/>图片5</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s6.jpg"><br/>图片6</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s7.jpg"><br/>图片7</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s1.jpg"><br/>图片1</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s2.jpg"><br/>图片2</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s3.jpg"><br/>图片3</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s4.jpg"><br/>图片4</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s5.jpg"><br/>图片5</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s6.jpg"><br/>图片6</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s7.jpg"><br/>图片7</a></li>
          </ul>
        </div>
      </div>
    </div>
   
   <div class="demo">
    <div class="bx_wrap">
        <div class="bx_container">
          <ul id="demo2">
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s1.jpg"><br/>图片1</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s2.jpg"><br/>图片2</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s3.jpg"><br/>图片3</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s4.jpg"><br/>图片4</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s5.jpg"><br/>图片5</a></li>
            <li><a href="#"><img  alt="#" width="140"
height="94" src="img/s6.jpg"><br/>图片6</a></li>
          </ul>
        </div>
      </div>
    </div>

<div id="banners" class="ui-banner">
<ul class="ui-banner-slides">
<li><a href=""><img src="../dalian.jpg" alt=""
title=""></a></li>
<li><a href=""><img src="../erlianhaote.png" alt=""
title=""></a></li>
<li><a href=""><img src="../mohe.png" alt=""
title=""></a></li>
<li><a href=""><img src="../sanya.jpg" alt=""
title=""></a></li>
<li><a href=""><img src="../xianggang.jpg" alt=""
title=""></a></li>
<li><a href=""><img src="../zhoushan.jpg" alt=""
title=""></a></li>
</ul><!--ui-banner-slides end-->
<ul class="ui-banner-slogans">
<li>大连</li>
<li>二连浩特</li>
<li>漠河</li>
<li>三亚</li>
<li>香港</li>
<li>舟山</li>
</ul><!--ui-banner-slogans end-->
<a href="" class="ui-banner-arrow ui-banner-arrow-prev
png_bg"></a><a href="" class="ui-banner-arrow
ui-banner-arrow-next png_bg"></a><div
class="ui-banner-overlay png_bg"></div></div>

复制代码 代码如下:

</head>

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=1514

上一篇:

下一篇:

相关文章