标签: prettyphoto

我正在尝试使用prettyPhoto API,但是firebug说$ .prettyPhoto.open()不是一个函数而且不起作用......

代码:http: //jsbin.com/ihuje3/3/edit

$(document).ready(function(){
     $.prettyPhoto.open('http://www.microdual.com/assets/images/newsletters/doublehosting.jpg','Test','Test desc');
});
?

即时通讯使用prettyphoto媒体wordpress插件(版本3.1.4).它的工作正常,但我的问题是,当我点击任何图像并在灯箱中打开然后在网址中有一些额外的标签,如:#prettyPhoto [landscaping]/0 /这就是为什么网址看起来像:www.myssite.com/#prettyPhoto[landscaping]/0/.

我们如何删除这个额外的标签.这是我的jquery.prettyPhoto.js文件中的代码:

function setHashtag(){
        if(typeof theRel == 'undefined') return; // theRel is set on normal calls, it's impossible to deeplink using the API
        location.hash = theRel + '/'+rel_index+'/';
    };

    function clearHashtag(){
        if ( location.href.indexOf('#prettyPhoto') !== -1 ) location.hash = "prettyPhoto";
    }

我解决了我原来的问题,但我想知道是否有一个更优雅的解决方案.我正在使用Foundation的Orbit创建幻灯片.这不是简单的幻灯片放映,它是幻灯片放映,其中每个幻灯片都定义了数据标题,并且在此数据标题中有HTML需要加载模式对话框.

如果您正在使用Foundation,您会立即考虑使用Reveal库来调出模式对话框,我会这样做,但要求使用prettyPhoto.(这些是要求.)问题是数据标题中的元素不受原始初始化调用的影响:

$("a[rel^='prettyPhoto']").prettyPhoto();

我需要做的是确保在加载时初始化每个数据标题.好吧,这是问题所在.我已经使用afterSlideChange事件解决了幻灯片过渡问题,但问题是第一张幻灯片.我需要为显示的第一张幻灯片调用此方法.

这是解决此问题的代码:

<script type="text/javascript">
$(window).load(function () {
    $('#featured').orbit({
        afterSlideChange:function () {
            $("a[rel^='prettyPhoto']").prettyPhoto({
                default_width:640,
                default_height:500,
                theme:'light_square'
            });
        }, // empty function
        fluid:true                         // or set a aspect ratio for content slides (ex: '4x3')
    });
    $("a[rel^='prettyPhoto']").prettyPhoto({
        default_width:640,
        default_height:500,
        theme:'light_square'
    });
});
</script>

有没有更好的方法来做到这一点,而不必复制该代码.我应该定义自己的"initializeSlide"事件,还是有一些答案我只是缺少？

有什么方法可以让PrettyPhoto对手机和平板电脑做出响应吗？我试过但似乎对我来说太难了.欢迎任何想法谢谢

我目前正在我正在使用的网站上使用prettyPhoto,但在移动设备上遇到了一个小问题.

该插件具有"allow_resize:false"选项,该选项不允许调整大于视口的照片大小,但是生成的缩小图像在视口宽度的大约30-35%处太小.这是480px宽屏幕上的问题,因为图像仅利用可用空间的一小部分.

我要做的是让它重新缩放到视口的大约95%.我试过用css和媒体查询来解决这个问题但我遇到了一个问题,当宽度设置为95%时,垂直图像会从页面上运行.

我猜测修改原始插件或添加javascript将是一个更好的解决方案.有没有人对最佳方法有任何建议？

我有一个带有以下标记的图库:

<ul>
<li>
    <figure>
        <a href="myimg1.jpg" rel="prettyPhoto"><img src="thumb1.jpg" /></a>
        <figcaption>
        some stuff here
        </figcaption>
    </figure>
</li>
<li>
    <figure>
        <a href="myimg2.jpg" rel="prettyPhoto"><img src="thumb2.jpg" /></a>
        <figcaption>
        some stuff here
        </figcaption>
    </figure>
</li>
</ul>

据我所知,为了使自动化的下一个/上一个导航起作用,图像链接需要在DOM中彼此相邻.有没有简单的方法让它与上述结构一起工作？我查看了选项,但看不到任何明显的东西.

嗨,我正在尝试将WP Featherlight设置为默认灯箱,现在Visual Composer正在使用prettyPhoto.所以我需要禁用它,以便WP Featherlight会覆盖它.

我问了wpbakery,我收到了这个回复.

您好,您实际上可以通过在functions.php中添加prettyPhoto()来覆盖prettyphoto,并调用另一个灯箱.

从插件作者我得到了这个:

一旦禁用了prettyPhoto,您就不需要对站点上的灯箱图像执行任何其他操作.

所以我很清楚我需要做什么.禁用prettyPhoto.但我不知道该怎么做.我可以在我的孩子主题的functions.php中添加一个简单的行吗？要么？

真的很感激任何帮助.

谢谢.

我正在尝试使用prettyPhoto for jQuery将视频添加到我的网站.

我确实在我的头脑中添加了jQuery源代码和prettyPhoto js位置,并在我的body标签结束之前,我还添加了初始化代码(如文档中所述).

   <script type="text/javascript" charset="utf-8">
      $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
      });
    </script>

在我的HTML中,这就是我写的内容,因为我想要显示视频,但当有人点击它时,视频应该打开为灯箱.

<div id="video_player">
<a href="#" rel="prettyPhoto">
<iframe width="640" height="350" src="http://www.youtube.com/embed/cH6kxtzovew"  frameborder="0" allowfullscreen></iframe>
</a>
</div>

但它不起作用.我该如何实现这一目标？

我想一起使用Owl-carousel和PrettyPhoto灯箱,但在此之前,我想知道是否已经存在类似的一体化解决方案.

更具体地说,我想在悬停时制作带有标题的内嵌图像/视频内容滑块库.它必须是responsive和touchable移动设备.如果还没有,那么Owl-carousel和PrettyPhoto一起工作没有问题,是否存在冲突风险？

谢谢你的帮助.

当我搬家时:

<script src="js/jquery.prettyPhoto.js"></script>

至:

<script type="text/javascript">
   ...
</script>

然后脚本从粗体部分开始显示在页面上:

style ="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency ="true"> '},s); var o = this,u = false,a,f,l,c,h,p,d = e(window).height(),v = e ...

该脚本归因于以下信息:

Class: prettyPhoto
Use: Lightbox clone for jQuery
Author: Stephane Caron (http://www.no-margin-for-errors.com)
Version: 3.1.5

如何将脚本从.js文件正确移动到页面？