`
xdy2008
  • 浏览: 54162 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

prettyPhoto 的使用

javascriptajaxjquery 
阅读更多

“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="#" onclick="$.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>

分享到：
| 静态页面获取当前工程路径的问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    prettyPhoto插件通过模仿Lightbox效果而设计，支持多种类型的媒体内容，提供了丰富的用户交互体验，并且使用和配置都很简单。其出色的兼容性让它可以支持包括老版本的IE浏览器在内的多种主流浏览器。 prettyPhoto...

    prettyPhoto和fancybox弹出层插件对比

    在网页设计和开发中，弹出层插件是不可或缺的一部分，它们可以用于展示图片、视频、内容等，为用户提供更好的浏览体验。...在实际使用中，可以先试用两个插件，看哪个更符合预期效果，再做出决定。

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

    下面我们将详细介绍PrettyPhoto的工作原理、使用方法以及如何将其集成到您的网站中。 PrettyPhoto是一款基于jQuery的轻量级插件，它的主要功能是创建一个美观的、响应式的、带导航和社交分享功能的全屏图像和视频...

    图片滚动展示单击放大代码（prettyPhoto）

    在压缩包内的文件中，`index.html`是主网页文件，包含了使用prettyPhoto插件的HTML结构；`index.jpg`可能是一个示例图片，用于演示prettyPhoto的效果；`readme.html`通常包含有关如何使用和配置插件的说明；`使用...

    prettyPhoto图片滚动展示.zip

    为了在自己的项目中使用prettyPhoto，你需要按照文档中的步骤进行操作，通常包括： 1. 在页面中引入jQuery库和prettyPhoto的JavaScript及CSS文件。 2. 使用特定的HTML标记（例如`&lt;a&gt;`标签）或通过JavaScript调用来...

    漂亮的点击弹出图片框 prettyPhoto

    在本篇文章中，我们将深入探讨prettyPhoto的特性、使用方法以及如何在网页中集成它。 首先，prettyPhoto的亮点在于其简洁且吸引人的设计。当用户点击链接时，会以全屏模式弹出一个包含图片或媒体的窗口，提供了良好...

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

    在实际应用中，使用prettyPhoto时，开发人员需要将JavaScript和CSS文件引入到网页中，并对图片链接进行适当的标记。通过设置特定的数据属性（如"data-rel"），可以指定链接属于哪个prettyPhoto组。此外，prettyPhoto...

    前端项目-prettyPhoto.zip

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

    uploadfy批量上传与prettyPhoto图片浏览

    "datashow.aspx.cs"负责从数据库或文件系统中获取图片信息，"datashow.aspx"则负责使用这些信息在网页上呈现一个可点击的缩略图列表。当用户点击缩略图时，PrettyPhoto会通过"Handler.ashx"这样的HTTP处理程序加载大...

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

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

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

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

    prettyPhoto页面+lazyload

    首先，使用prettyPhoto为用户提供优雅的媒体查看体验，然后利用lazyload来优化图片加载，只在用户实际需要时才加载图片。这样的组合能够显著提升网页的性能和用户体验，尤其是在低带宽或移动设备环境下。在实际应用...

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

    本项目涉及的核心知识点是利用jQuery实现图片的左右滚动效果和集成prettyphoto弹出层插件，以创建更加互动且吸引用户的图像浏览体验。 首先，我们来探讨jQuery图片左右滚动的功能。这种功能常见于产品展示或幻灯片...

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

    "prettyPhoto"是一款流行的JavaScript库，专为网页中的图片展示设计，它可以在用户点击图片时弹出一个全屏的、可自定义的相册样式窗口。在“IE Quirks模式”下，这个库表现得相当出色，解决了许多浏览器兼容性问题，...

    jQuery与prettyPhoto共同打造超酷幻灯代码.rar

    AviaSlider幻灯特效功能很强大，基于jQuery与prettyPhoto库，支持8种不同的幻灯过渡特效，包括百叶窗、渐变、方格等，效果逼近flash幻灯特效。单击幻灯图片时会出现Lightbox效果的大图展示。主要特点： 可自己设计...

    ToolwizPrettyPhoto(图片编辑器)v2.8英文绿色版

    但没想到的是，他们还进军图片编辑器领域，推出了Toolwiz Pretty Photo，并且从发布开始它就有媲美picpick的“气势”，不仅功能丰富，而且易于使用。 Toolwiz Pretty Photo图片编辑器功能 1、这个软件带有超多的专业...

    prettyPhoto_compressed_3.1.3

    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 ...

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

    用于 PrettyPhoto jQuery 灯箱克隆的 Yii2 小部件 Yii2 安装 作曲家 首先，为您的 composer.json 添加扩展名： { "require" : { "nirvana-msu/yii2-prettyphoto" : "1.0.*@dev" } } 不幸的是， 存储库已经好...

Magicbox
Global site tag (gtag.js) - Google Analytics