prettyPhoto 的使用

最新推荐文章于 2024-04-16 09:50:27 发布
最新推荐文章于 2024-04-16 09:50:27 发布
阅读量711 收藏
点赞数
文章标签： javascript ajax jquery ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xdy2008/article/details/84218144
版权

“You can also open galleries using the API, just pass arrays to the open function.”

api_images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];

api_titles = ['Title 1','Title 2','Title 3'];

api_descriptions = ['Description 1','Description 2','Description 3'] $.prettyPhoto.open(api_images,api_titles,api_descriptions);

 

动态加载的:

<script type="text/javascript">

        $(document).ready(function(){
       
    //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
    var curWwwPath=window.document.location.href;
    //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
    var pathName=window.document.location.pathname;
    var pos=curWwwPath.indexOf(pathName);
    //获取主机地址，如： http://localhost:8083
    var localhostPaht=curWwwPath.substring(0,pos);
    //获取带"/"的项目名，如：/uimcardprj
    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
   // alert(localhostPaht+projectName);
    var path = localhostPaht+projectName
        
        $.ajax({
           url: path+"/portal/queryEventInfo.action",
           dataType: "json",
           data:{"advertInfoVO.eventType":300},
           success: function(data){
               var str = "";
              $.each(data,function(index,resourceSubject){
             
                     $("#photoType").append("<li><a title="+resourceSubject.eventTitle+" href="+path+resourceSubject.eventPhoto
                             +" rel=prettyPhoto[gallery1]>" + "<img src="+path+resourceSubject.eventPhoto+"></img></a></li>");

                     if(resourceSubject.eventType==14)
                      {
                              str +="<li><a title="+resourceSubject.eventTitle+" href="+path+resourceSubject.eventPhoto
                                 +" rel=prettyPhoto[gallery1]><img src="+path+resourceSubject.eventPhoto+"></img>"
                                +"</a></li>"
                       
                      }

                      if(resourceSubject.eventType==15)
                      {
                              str +="<li><a title="+resourceSubject.eventTitle+" href="+path+resourceSubject.eventPhoto
                                 +" rel=prettyPhoto[gallery2]><img src="+path+resourceSubject.eventPhoto+"></img>"
                                +"</a></li>"
                       
                      }

                      if(resourceSubject.eventType==16)
                      {
                              str +="<li><a title="+resourceSubject.eventTitle+" href="+path+resourceSubject.eventPhoto
                                 +" rel=prettyPhoto[gallery3]><img src="+path+resourceSubject.eventPhoto+"></img>"
                                +"</a></li>"
                       
                      }
                     
                  if(resourceSubject.eventType==23)
                      {
                              str +="<li><a title="+resourceSubject.eventTitle+" href="+path+resourceSubject.eventPhoto
                                 +" rel=prettyPhoto[gallery3]><img src="+path+resourceSubject.eventPhoto+"></img>"
                                +"</a></li>"
                       
                      }


                      if(resourceSubject.eventType==24)
                      {
                              str +="<li><a title="+resourceSubject.eventTitle+" href="+path+resourceSubject.eventPhoto
                                 +" rel=prettyPhoto[gallery3]><img src="+path+resourceSubject.eventPhoto+"></img>"
                                +"</a></li>"
                       
                      }


                      });
                 
                  $("#photoType").html(str);
                  $(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_square'});

           }
           })
        });


</script>

 

 

 

//文本点击加载图片
<script type="text/javascript">
function seleOnClick(id)
{
//获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
    var curWwwPath=window.document.location.href;
    //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
    var pathName=window.document.location.pathname;
    var pos=curWwwPath.indexOf(pathName);
    //获取主机地址，如： http://localhost:8083
    var localhostPaht=curWwwPath.substring(0,pos);
    //获取带"/"的项目名，如：/uimcardprj
    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
   // alert(localhostPaht+projectName);
    var path = localhostPaht+projectName
   
        $.ajax({
        url: path+"/portal/queryEventInfo.action",
       dataType: "json",
        data:{"advertInfoVO.eventType":id},
               success: function(data){
               var api_images=new Array();
                  $.each(data,function(index,resourceSubject){
                     
                    api_images[index]=path+resourceSubject.eventPhoto;
                      
              });

<!--　　　　　　　　     alert(api_images);-->
                $.prettyPhoto.open(api_images);
                                 
               }
               });

}
</script>

 

 

摘自网站上的内容:

保存HTML格式就可以浏览了,要把加载项放进来就可以了.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>使用jQuery框架的prettyPhoto图片特效 - js代码站</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
            google.load("jquery", "1.3");
        </script>
        <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
        <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
       
        <style type="text/css" media="screen">
            * { margin: 0; padding: 0;border:none; }
           
            body {
                font: 62.5%/1.2 Arial, Verdana, Sans-Serif;
                padding: 0 20px;
            }
           
            h4 { margin: 15px 0 5px 0; }
           
            h4, p { font-size: 1.2em; }
           
            ul li { display: inline;}
           
            .wide {
                border-bottom: 1px #000 solid;
                width: 4000px;
            }
        </style>
    </head>
    <body>
       
            <a rel="prettyPhoto[ajax]" href="http://www.163.com">Ajax content</a> 


       
        <div class="gallery clearfix">
<a href="#inline-1" rel="prettyPhoto" ><img src="images/fullscreen/1.jpg" alt="" width="50" /></a>  
<div id="inline-1" style="display:none;">  
    <p>这里是普通的文本</p>  
    <p>今天给大家介绍的prettyPhoto希望大家能喜欢，这个是播放普通文本的html</p>  
</div>
</div>
       
        <h4>API calls</h4>
        <p><a href="#" οnclick="$.prettyPhoto.open('images/fullscreen/1.jpg');">No title, no description</a></p>
       
<div class="gallery clearfix">
    <p><a href="images/fullscreen/1.jpg" rel="prettyPhoto[test]">test</a>
    </p>
    <div style="display:none;" id="test_demo">
                <h4>Test</h4>
            <li><a href="images/fullscreen/1.jpg" rel="prettyPhoto[test]" title="You can add caption to pictures. You can add caption to pictures. You can add caption to pictures."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /></a></li>
            <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[test]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a></li>
            <li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[test]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a></li>
            <li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[test]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a></li>
            <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[test]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" /></a></li>

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

        <h4>Gallery 2</h4>
        <ul class="gallery clearfix">
            <li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Lol" /></a></li>
            <li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="" /></a></li>
            <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="" /></a></li>
            <li><a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li>
            <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="" /></a></li>
        </ul>

        <h4>Picture alone</h4>
        <ul class="gallery clearfix">
            <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="&lt;a href=&#x27;http://www.google.ca&#x27; target=&#x27;_blank&#x27; &gt;This will open Google.com in a new window&lt;/a&gt;"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Picture alone 1" /></a></li>
        </ul>
       
        <h4>Flash</h4>
        <ul class="gallery clearfix">
            <li><a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&amp;height=294" rel="prettyPhoto[flash]" title="Flash 10 demo"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Flash 10 demo" /></a></li>
            <li><a href="http://vimeo.com/moogaloop.swf?width=580&amp;height=326&amp;flashvars=clip_id=4321799&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" rel="prettyPhoto[flash]" title="Vimeo Movie"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Vimeo movie" /></a></li>
        </ul>
       
        <h4>Flash alone</h4>
        <ul class="gallery clearfix">
            <li><a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&amp;height=294" rel="prettyPhoto" title="Flash 10 demo"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Flash 10 demo" /></a></li>
        </ul>
       
        <h4>Youtube video</h4>
        <ul class="gallery clearfix">
            <li><a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="Flash 10 demo"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Flash 10 demo" /></a></li>
        </ul>
       
        <h4>Vimeo video</h4>
        <ul class="gallery clearfix">
            <li><a href="http://vimeo.com/7874398&width=700" rel="prettyPhoto" title="Vimeo video">Vimeo</a></li>
        </ul>
       
        <h4>Movies (.mov)</h4>
        <ul class="gallery clearfix">
            <li><a href="http://movies.apple.com/movies/wb/terminatorsalvation/terminatorsalvation-tlr3_h.480.mov?width=480&amp;height=204" rel="prettyPhoto[movies]" title="Terminator!"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Terminator Salvation" /></a></li>
            <li><a href="http://movies.apple.com/movies/sony_pictures/angelsanddemons/angelsanddemons-video_h.480.mov?width=480&amp;height=260" rel="prettyPhoto[movies]" title="Angels &amp; Demons"><img src="http://images.apple.com/trailers/sony_pictures/images/angelsdemons_200903261218.jpg" alt="Angels &amp; Demons" /></a></li>
            <li><a href="http://imigri.com/site2/video/gtg_trailer.mov?width=700&height=393" rel="prettyPhoto[movies]" title="Food, Inc."><img src="http://images.apple.com/trailers/magnolia/images/foodinc_200904171457.jpg" alt="Food, Inc." /></a></li>
        </ul>
       
        <h4>Movies (.mov) alone</h4>
        <ul class="gallery clearfix">
            <li><a href="http://movies.apple.com/movies/wb/terminatorsalvation/terminatorsalvation-tlr3_h.480.mov?width=480&amp;height=204" rel="prettyPhoto" title="Terminator!"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Terminator Salvation" /></a></li>
        </ul>
       
        <h4>Unusual sizes</h4>
        <ul class="gallery clearfix">
            <li><a href="images/fullscreen/wide.gif" rel="prettyPhoto[unusual]">Wide image (3000 x 1500)</a></li>
            <li><a href="images/fullscreen/high.gif" rel="prettyPhoto[unusual]">High image (1500 x 3000)</a></li>
            <li><a href="images/fullscreen/huge.gif" rel="prettyPhoto[unusual]">Huge image (3000 x 3000)</a></li>
        </ul>
       
        <h4>Iframe</h4>
        <ul class="gallery clearfix">
            <li><a href="http://www.google.com/search?ie=UTF-8&amp;oe=UTF-8&amp;q=prettyphoto&amp;iframe=true&amp;width=100%&amp;height=100%" rel="prettyPhoto[iframe]">Google.ca</a></li>
            <li><a href="http://www.facebook.com?iframe=true&amp;width=600&amp;height=300" rel="prettyPhoto[iframe]">Facebook</a></li>
            <li><a href="http://www.twitter.com?iframe=true&amp;width=300&amp;height=200" rel="prettyPhoto[iframe]">Twitter</a></li>
        </ul>
       
        <h4>Mixed gallery</h4>
        <ul class="gallery clearfix">
            <li><a href="http://www.google.ca?iframe=true&amp;width=1000&amp;height=500" rel="prettyPhoto[mixed]">Google.ca</a></li>
            <li><a href="http://movies.apple.com/movies/sony_pictures/angelsanddemons/angelsanddemons-video_h.480.mov?width=480&amp;height=260" rel="prettyPhoto[mixed]" title="Angels &amp; Demons sdg sdag sdagsdag sadg sadg sda gasg sdg asdgsdag sadgsdagsadg sdag sdgasdgsda"><img src="http://images.apple.com/trailers/sony_pictures/images/angelsdemons_200903261218.jpg" alt="Angels &amp; Demons" /></a></li>
            <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[mixed]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="" /></a></li>
            <li><a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&amp;height=294" rel="prettyPhoto[mixed]" title="Flash 10 demo"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Flash 10 demo" /></a></li>
        </ul>
       
        <h4>Inline content</h4>
        <ul class="gallery clearfix">
            <li><a href="#inline_demo" rel="prettyPhoto[inline]">Inline content 1</a></li>
            <li><a href="#inline_demo2" rel="prettyPhoto[inline]">Inline content 2</a></li>
            <li><a href="#inline_demo3" rel="prettyPhoto[inline]">Inline content 3</a></li>
                <a href="#inline_demo4" rel="prettyPhoto[inline]">Inline content 1</a>
        </ul>
        <div id="inline_demo" style="display:none;">
            <p><a href="http://www.google.ca?iframe=true&amp;width=1000&amp;height=500">Google.ca</a></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
                <div id="inline_demo4" style="display:none;">
            <p><a href="http://www.google.ca?iframe=true&amp;width=1000&amp;height=500">Google.ca</a></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="inline_demo2" style="display:none;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="inline_demo3" style="display:none;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p><a href="http://movies.apple.com/movies/sony_pictures/angelsanddemons/angelsanddemons-video_h.480.mov?width=480&amp;height=260" title="Angels &amp; Demons sdg sdag sdagsdag sadg sadg sda gasg sdg asdgsdag sadgsdagsadg sdag sdgasdgsda"><img src="http://images.apple.com/trailers/sony_pictures/images/angelsdemons_200903261218.jpg" alt="Angels &amp; Demons" /></a></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
       
        <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_square'});
        });
        </script>
    <br><br>
<p align="center"><strong>使用jQuery框架的prettyPhoto图片特效</strong>  <a href="http://www.sitejs.com/code/help.html" target="_blank">【使用说明】</a></p><br />

<p align="center"><a href="http://www.sitejs.com/" target="_blank">js代码站</a>，转载请注明出处。　本代码仅限于学习交流，请勿用于商业用途! </p>
<br />
</body>
</html>

xdy2008
关注
PrettyPhoto，一款基于Jquery的图片播放插件的使用
dailovemin的专栏
06-12 4108
PrettyPhoto是一款基于jquery的轻量级的lightbox图片浏览插件，它不仅支持图片播放 ， 而且还支持视频、flash、YouTuBe、Iframe及
prettyPhoto和fancybox弹出层插件对比
11-10
在网页设计和开发中，弹出层插件是不可或缺的一部分，它们可以用于展示图片、视频、内容等，为用户提供更好的浏览体验。...在实际使用中，可以先试用两个插件，看哪个更符合预期效果，再做出决定。
jquery图片播放浏览插件prettyPhoto使用详解
10-25
主要详细介绍了jquery图片播放浏览插件prettyPhoto使用方法，以及支持的每种类型的详细示例，非常的不错，有需要的小伙伴参考下
jQuery图片播放插件prettyPhoto使用介绍
07-29 192
演示效果 http://www.17sucai.com/preview/131993/2014-07-09/mac-Bootstrap/gallery.html 点击之后的效果 使用方法 Query图片播放插件prettyPhoto使用介绍 http://www.sohenk.com/archives/379 转载于:https://www.cnblogs.com/...
【JQ组件】prettyPhoto使用介绍
bug制造者
07-13 2383
一 、prettyPhoto简介 prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件，它不仅支持图片，还同时支持视频、flash、YouTube、iframe和ajax。 目前，prettyPhoto兼容大部分主流的浏览器，包括令人纠结的IE6。 prettyPhoto插件的项目地址：http://www.no-margin-for-errors.com/pro...
prettyPhoto
gong1422425666的博客
05-31 453
一、prettyPhoto简介 prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件，它不仅支持图片，还同时支持视频、flash、YouTube、iframe和ajax。而且prettyPhoto配置和使用都十分简单，扩展性也不错，你可以最大限度地自定义prettyPhoto。目前，prettyPhoto兼容大部分主流的浏览器，包括令人纠结的IE6。
prettyPhoto学习
weixin_30730151的博客
06-12 99
实现效果： 实现图片遮罩展示效果。 实例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=...
用prettyphoto实现的点击小图看大图
10-31
下面我们将详细介绍PrettyPhoto的工作原理、使用方法以及如何将其集成到您的网站中。 PrettyPhoto是一款基于jQuery的轻量级插件，它的主要功能是创建一个美观的、响应式的、带导航和社交分享功能的全屏图像和视频...
前端项目-prettyPhoto.zip
09-02
前端项目-prettyPhoto,prettypoto是一个基于jquery的lightbox克隆。它不仅支持图像，还添加了对视频、Flash、YouTube、iFrames的支持。这是一个全方位的媒体灯箱。设置简单快捷，而且脚本在每个主要浏览器中都是兼容...
jquery 弹出遮罩插件 prettyPhoto 参数说明
weixin_33756418的博客
09-02 148
插件地址：http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/部分参数说明：$.fn.prettyPhoto = function(pp_settings) { pp_settings = jQuery.extend({ animation_s...
漂亮的点击弹出图片框 prettyPhoto
07-03
漂亮的点击弹出图片框 prettyPhoto
ToolwizPrettyPhoto(图片编辑器)v2.8英文绿色版
07-25
Toolwiz图片编辑器是不是非常熟悉，尤其是Toolwiz care这个强力系统优化工具。但没想到的是，他们还进军图片编辑器领域，推出了Toolwiz Pretty Photo，并且从发布开始它就有媲美picpick的“气势”，不仅功能丰富，而且易于使用。 Toolwiz Pretty Photo图片编辑器功能 1、这个软件带有超多的专业功能。支持图层、带有很多的滤镜、对于女生来说，还可以使用这
图片滚动展示单击放大代码（prettyPhoto）
12-02
图片滚动展示单击放大代码（prettyPhoto）,可左右按钮控制图片滚动和prettyphoto弹出层插件单击图片放大结合特效。
探索PrettyPhoto：优雅的图片和视频轻框插件
最新发布
gitblog_00099的博客
04-16 371
探索PrettyPhoto：优雅的图片和视频轻框插件 项目地址:https://gitcode.com/scaron/prettyphoto 在网页设计中，展示图片和视频的方式往往影响着用户体验。PrettyPhoto 是一个强大的JavaScript和CSS插件，旨在为用户提供一种优雅、交互性强的全屏浏览体验。它将普通链接转化为具有弹出功能的多媒体框架，使内容呈现更加专业且引人入胜。 项目简介...
jQuery图片特效脚本prettyPhoto简介
陈万洲的专栏
08-29 3638
jQuery图片特效脚本prettyPhoto简介
可进可退，jQuery图片、视频、flash播放插件prettyPhoto使用记录
weixin_33769207的博客
11-28 224
一、prettyPhoto简介 prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件，它不仅支持图片，还同时支持视频、flash、YouTube、iframe和ajax。而且prettyPhoto配置和使用都十分简单，扩展性也不错，你可以最大限度地自定义prettyPhoto。目前，prettyPhoto兼容大部分主流的浏览器，包括令人纠结的IE6。 pr...
prettyPhoto api 使用方法
counterm的专栏
04-27 2266
$(document).ready(function(){<br />   $.fn.prettyPhoto();//usually $("a[rel^='prettyPhoto']").prettyPhoto();<br />   $.prettyPhoto.open('http://www.microdual.com/assets/images/newsletters/doublehosting.jpg','Test','Test desc');<br />});<br />
使用ajax制作的 实例教程,网页制作ajax特效实例分享
weixin_32450633的博客
08-06 190
1) http://efectorelativo.net/laboratory/noobSlide/sample.Checkout the Demo here.下载2) Growl 2.0 with Mootools–图层渐隐渐显效果,演示: 打开演示页，点击左侧Show Growl Smoke. Show Growl 即可看到效果下载:Download from Here下载Download t...
jQuery插件大全：从AutoComplete到Windows弹出框
2. **Lightbox图片展示**：这类插件允许用户在原网页上以弹出窗口的形式查看大图，例如Fancybox或prettyPhoto，增强了图片浏览体验。 3. **编辑器**：如TinyMCE或CKEditor，它们为网页提供富文本编辑功能，使得用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值