`

prettyPhoto---IE Quirks模式下的弹出窗口的好选择

 
阅读更多

     最近项目中要使用js来实现模态窗口显示图片,打开一个子页面,在网上倒是有很多开源的基于jquery的实现,如ColorBox, LightBox等等,试用了几个,在IE标准模式下倒是没有问题,不过如果在quirks(杂项)模式下,就惨不忍睹了,而我们的项目模板中定义的html头比较老,是下面这样的写法:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

    要想让IE工作在标准模式,就要这样声明了:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 

    这样的结果是,在IE中运行时,会自动工作在杂项模式中,导致css3的很多效果出不来,那些插件自然也就工作不正常了,于是继续找找找,碰巧找到了prettyPhoto,它默认的显示也是有问题,不过问题比其它插件要少一些,于是继续深入研究它,发现它在light_rounded这个theme下,显示几乎完全正常,除了边角有点稍微的毛刺感,不仔细看看不出来,就是它了。它的功能覆盖了我们常用的所有功能---打开图片、打开iframe、嵌入html、以画廊的方式浏览图片。

 

    下面是一个打开图片和iframe的例子:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />

    <title>Insert title here</title>
</head>

<script type="text/javascript">
    $(window).load(function(){
        initPrettyPhoto()
    })

    function openImage(){
        $.prettyPhoto.open('images/fullscreen/1.jpg')
    }

    function openIframe(){
        $.prettyPhoto.open("http://news.163.com?iframe=true")
    }

    //init prettyPhoto
    function initPrettyPhoto() {
        $("a[rel^='prettyPhoto']").prettyPhoto({
            default_width:900,      //iframe width
            default_height:700,     //iframe height
            show_title:false,       //no title shown
            theme:'light_rounded',
            modal:true,             //modal window
            callback:function () {
               alert('window is closed!')// invoked after closing this popup window
            },
            social_tools:false  // disable display of facebook,twitter icons and links
        });
    }


</script>
<body>

<a href="#" rel='prettyPhoto' style="display: none;">open it</a>

<input type="button" value="oepn image" style="height: 30px;" onclick="javascript:openImage()"/>
<input type="button" value="oepn iframe" style="height: 30px;" onclick="javascript:openIframe()"/>


</body>
</html>

 

    先看运行效果吧:

    打开图片的

   

  打开iframe的

 

 

  注意图中红色方框标出的图标,如果弹出窗口不足以显示所有内容,会自动出现此图标,点击它会完整显示出来,非常方便。

 

   下面讲解一下使用步骤:

  • 定义一个link,这个link不是为了点击而用,而是为了初始化prettyPhoto,为了不在页面显示,可以用样式隐藏起来。
    下面是示例代码:
     function initPrettyPhoto() {
            $("a[rel^='prettyPhoto']").prettyPhoto({
                default_width:900,      //iframe width
                default_height:700,     //iframe height
                show_title:false,       //no title shown
                theme:'light_rounded',
                modal:true,             //modal window
                callback:function () {
                   alert('window is closed!')// invoked after closing this popup window
                },
                social_tools:false  // disable display of facebook,twitter icons and links
            });
        }
     示例中的json风格的参数意义在注释中阐明了,完整的参数列表后面会贴出
  • 打开图片
    这个很简单,调用其open方法并传入图片地址即可
  • 打开iframe
    这个有个小trick,打开一个iframe的时候,最后一个参数一定是iframe=true,否则不会以iframe形式打开页面
    $.prettyPhoto.open("http://news.163.com?iframe=true")
     这里是打开163的新闻首页,至于其大小,则在初始化时通过default_width和default_height指定了

       要注意的是,引入prettyPhoto的js之前,要先引入jquery的js,完整的参数列表:

<script type="text/javascript" charset="utf-8">

	$(document).ready(function(){
		$("a[rel^='prettyPhoto']").prettyPhoto({
			animation_speed: 'fast', /* fast/slow/normal */
			slideshow: 5000, /* false OR interval time in ms */
			autoplay_slideshow: false, /* true/false */
			opacity: 0.80, /* Value between 0 and 1 */
			show_title: true, /* true/false */
			allow_resize: true, /* Resize the photos bigger than viewport. true/false */
			default_width: 500,
			default_height: 344,
			counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
			theme: 'pp_default', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
			horizontal_padding: 20, /* The padding on each side of the picture */
			hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
			wmode: 'opaque', /* Set the flash wmode attribute */
			autoplay: true, /* Automatically start videos: True/False */
			modal: false, /* If set to true, only the close button will close the window */
			deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */
			overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
			keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
			changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
			callback: function(){}, /* Called when prettyPhoto is closed */
			ie6_fallback: true,
			markup: '<div class="pp_pic_holder"> \
						<div class="ppt">&nbsp;</div> \
						<div class="pp_top"> \
							<div class="pp_left"></div> \
							<div class="pp_middle"></div> \
							<div class="pp_right"></div> \
						</div> \
						<div class="pp_content_container"> \
							<div class="pp_left"> \
							<div class="pp_right"> \
								<div class="pp_content"> \
									<div class="pp_loaderIcon"></div> \
									<div class="pp_fade"> \
										<a href="#" class="pp_expand" title="Expand the image">Expand</a> \
										<div class="pp_hoverContainer"> \
											<a class="pp_next" href="#">next</a> \
											<a class="pp_previous" href="#">previous</a> \
										</div> \
										<div id="pp_full_res"></div> \
										<div class="pp_details"> \
											<div class="pp_nav"> \
												<a href="#" class="pp_arrow_previous">Previous</a> \
												<p class="currentTextHolder">0/0</p> \
												<a href="#" class="pp_arrow_next">Next</a> \
											</div> \
											<p class="pp_description"></p> \
											{pp_social} \
											<a class="pp_close" href="#">Close</a> \
										</div> \
									</div> \
								</div> \
							</div> \
							</div> \
						</div> \
						<div class="pp_bottom"> \
							<div class="pp_left"></div> \
							<div class="pp_middle"></div> \
							<div class="pp_right"></div> \
						</div> \
					</div> \
					<div class="pp_overlay"></div>',
			gallery_markup: '<div class="pp_gallery"> \
								<a href="#" class="pp_arrow_previous">Previous</a> \
								<div> \
									<ul> \
										{gallery} \
									</ul> \
								</div> \
								<a href="#" class="pp_arrow_next">Next</a> \
							</div>',
			image_markup: '<img id="fullResImage" src="{path}" />',
			flash_markup: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="{width}" height="{height}"><param name="wmode" value="{wmode}" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{path}" /><embed src="{path}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="{width}" height="{height}" wmode="{wmode}"></embed></object>',
			quicktime_markup: '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="{height}" width="{width}"><param name="src" value="{path}"><param name="autoplay" value="{autoplay}"><param name="type" value="video/quicktime"><embed src="{path}" height="{height}" width="{width}" autoplay="{autoplay}" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>',
			iframe_markup: '<iframe src ="{path}" width="{width}" height="{height}" frameborder="no"></iframe>',
			inline_markup: '<div class="pp_inline">{content}</div>',
			custom_markup: '',
			social_tools: '<div class="pp_social"><div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&href='+location.href+'&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div></div>' /* html or false to disable */
		});
	});
</script>

    有点乱,不过官方网站就这样写的,没有条理,好在后面都写着注释,一看就明白了。

 

    官方网址:http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

 

    除了这两个常用的场景,它还可以画廊的形式显示一系列图片、幻灯片的播放效果等等,有待各位有兴趣的同学探索了。 附件中有sample工程

 

  • 大小: 127.8 KB
  • 大小: 214.2 KB
分享到:
评论

相关推荐

    漂亮的点击弹出图片框 prettyPhoto

    prettyPhoto是一款广泛应用于网页设计中的图片弹出插件,它为用户提供了一种优雅的方式来展示多媒体内容,如图片、视频和嵌入式媒体。这个插件以其美观的界面和丰富的功能而受到设计师们的喜爱。在本篇文章中,我们...

    图片滚动展示单击放大代码,使用prettyPhoto插件,代码兼容:IE6,IE7,IE8,Firefox,chrome

    图片滚动展示单击放大代码,使用prettyPhoto插件,代码兼容:IE6,IE7,IE8,Firefox,chrome 使用方法: 1.head区域引用样式文件prettyphoto.css,htmldivcss.css 2.head区域引用JS文件jquery.js,jquery....

    uploadfy批量上传与prettyPhoto图片浏览

    PrettyPhoto可以处理各种类型的媒体内容,包括图片、视频等,使其在弹出窗口中无缝播放。"prettyPhoto"目录包含了这个插件的所有相关资源,如CSS样式表、JavaScript文件以及可能的图片图标。 在实际应用中,...

    prettyPhoto和fancybox弹出层插件对比

    在网页设计和开发中,弹出层插件是不可或缺的一部分,它们可以用于展示图片、视频、内容等,为用户提供更好的浏览体验。本文将详细对比两个流行的弹出层插件:prettyPhoto和fancybox,帮助开发者选择更适合自己的...

    prettyPhoto图片滚动展示.zip

    "prettyPhoto图片滚动展示"是一个基于jQuery的轻量级弹出式图片查看插件,它扩展了传统的lightbox功能,提供了一种优雅的方式来展示网站上的多媒体内容。这个插件设计得非常用户友好,允许用户在同一个界面下浏览...

    prettyPhoto支持图片左右滚动加超酷的图片弹出层

    首先,prettyPhoto的核心功能是创建一个浮动在页面上的全屏或者半屏的图片展示层,这通常被称为“弹出层”或“模态窗口”。当用户点击图片链接时,prettyPhoto会将图片加载到这个弹出层中,使用户能够更专注于查看...

    前端项目-prettyPhoto.zip

    前端项目-prettyPhoto,prettypoto是一个基于jquery的lightbox克隆。它不仅支持图像,还添加了对视频、Flash、YouTube、iFrames的支持。这是一个全方位的媒体灯箱。设置简单快捷,而且脚本在每个主要浏览器中都是兼容...

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

    一、prettyPhoto简介 prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览...prettyPhoto插件的项目地址:http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ 建议英文好的

    用prettyphoto实现的点击小图看大图

    PrettyPhoto允许通过CSS调整弹出窗口的外观,例如改变边框颜色、背景透明度等。你可以在CSS文件中找到预定义的类名进行修改。此外,还可以通过JavaScript监听和响应PrettyPhoto的事件,如打开、关闭、切换等,以...

    jquery左右按钮控制图片滚动和prettyphoto弹出层插.

    当用户点击带有该类名的元素时,prettyphoto会自动处理并弹出一个全屏的图片预览窗口,提供导航和关闭按钮。 为了使左右按钮与prettyphoto结合,可能需要在点击按钮时触发图片的预览,这可以通过调用`$.prettyPhoto...

    图片滚动展示单击放大代码(prettyPhoto)

    当用户在网页上看到一个包含图片的链接时,单击该链接会启动prettyPhoto插件,将图片在一个全屏或半屏的弹出层中显示。这个弹出层不仅提供了图片的放大功能,还支持左右导航,方便用户查看图片集。此外,prettyPhoto...

    prettyPhoto页面+lazyload

    它提供了类似于Lightbox的效果,使得用户可以点击图片预览并以弹出窗口的形式查看大图。prettyPhoto支持多种媒体类型,包括图像、视频(YouTube、Vimeo等)和SWF(Flash)文件。其主要功能包括: - **全屏模式**:...

    Jquery特效--最好的设计

    - **简介**:一种轻量级的弹出气泡提示插件。 - **特点**: - 显示效果独特。 - 支持多种触发方式。 ##### 11. jGrowl - **简介**:一种用于显示系统通知的消息提示插件。 - **特点**: - 显示位置可定制。 - ...

    jquery三级下拉菜单 基于jquery.prettyPhoto.js插件.rar

    jquery三级下拉菜单 基于jquery.prettyPhoto.js插件,风格清新漂亮,还有圆角效果,鼠标悬停于主菜单任意项时,若该主菜单包括有子菜单的话,会向下滑出二级菜单,若二级菜单仍有子菜单的话,会向右伸出对应的子菜单...

    5种jQuery弹出大图效果

    在网页设计中,jQuery弹出大图效果是一种常见的交互元素,它可以增强用户体验,使网站更加生动有趣。"5种jQuery弹出大图效果"这个主题涵盖了多种不同的技术,旨在实现图片预览、放大以及优雅地展示高分辨率图像。...

    pPGallery:免费的Joomla! 插件来创建一个简单的图片库。-开源

    内容插件,可基于“ prettyPhoto”显示引擎(jQuery灯箱克隆:http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone)创建简单的图片库。 文件夹中的图像或直接插入内容/文章中的图像...

    yii2-prettyphoto:用于prettyPhoto jQuery 灯箱克隆的Yii2 扩展

    不幸的是, 存储库已经好几年没有更新了,并且不包含允许 composer 安装它的bower.json 。 这个扩展不是手动复制文件或创建另一个分支来添加bower.json , bower.json定义了所需的内联存储库包。 由于 composer ...

Global site tag (gtag.js) - Google Analytics