小编nic*_*kff的帖子

我希望使用jwPlayer作为全屏幕背景视频,只需在循环中播放作为网站的背景.

我在这里测试一下,在Mac OSX上Chrome中取得了一定的成功(请原谅视频文件的大小) - dextersgospel.com/full-screen-video.html

在页面加载时,我抓住浏览器窗口的宽度和高度,并将值设置为jwPlayer设置中的width和height参数.真棒.

现在我要添加的是在调整浏览器窗口大小时调整视频大小的功能.我已经查看了onResize()和onFullScreen()事件,但无法弄清楚如何实现这些以使其工作(或者告诉它们是否甚至是解决方案).我也查看了jQuery resize()函数,但无济于事.

我还想阻止视频在点击时暂停.

如果有人可以提供有关如何使用jwPlayer进行全屏背景视频的一些提示,我们将不胜感激!

我在一个页面上有12个对话框.如果其他12个对话框都没有打开,我只希望它们打开.我不希望它关闭现有的并打开一个新的,我只是希望它一次只打开一个对话框,并阻止用户一次打开两个.

示例HTML:

               <div id="thumb2" class="suiting-thumb">
                    <img src="img/gallery/suit1-thumb.jpg" alt="" title="" />
                </div>
                <div id="galleryDialog2" class="galleryDialog">
                    <a id="prev-arrow" href="#"></a> 
                    <a id="next-arrow" href="#"></a>
                    <div class="text">
                        text and link
                    </div>
                    <div class="dialog-slider">
                       <img src="img/suiting-details/custom-suiting-vent-styles.jpg" alt="" title="" />                       
                       <img src="img/suiting-details/custom-suit-coat-lining.jpg" alt="" title="" />
                   </div>
               </div>                   

JS:

        /* Gallery Dialog Settings */
        $('[id^=galleryDialog]').dialog({ 
                width: 480,
                height:479, /* 479 seems to be the magic number to get the box to fit vertically on the slider */
                show: 'fade',
                hide: 'fade',
                autoOpen: false,
                draggable: false,
                open: function() { …

我想在这里使用jScrollPane的"scrollToElement"API函数:

http://dextersgospel.com/index-test.html

关于它的使用说明可以在这里找到:

http://jscrollpane.kelvinluck.com/api.html#scrollTo

我遇到的问题是"stickToTop"参数.单击箭头时,我希望它将目标div带到视口的顶部(而不是像目前那样几乎看不见).应该处理"stickToTop"参数,但我不能让它工作.

我尝试过如下实现,但没有运气:

api.scrollToElement(target_div_id, {stickToTop: true});

我试过了:

api.scrollToElement(target_div_id, true);

这是我目前的完整代码:

$(function()
{
    /* INITIALIZES jScrollPane on ENTIRE BROWSER WINDOW */
    var win = $(window);
    var isResizing = false;
    var container = $('#full-page-container');
    win.bind(
        'resize',
        function()
        {
            if (!isResizing) {
                isResizing = true;
                // Temporarily make the container tiny so it doesn't influence the
                // calculation of the size of the document
                container.css(
                    {
                        'width': 1,
                        'height': 1
                    }
                );
                // Now make it the size of the …

好奇,如果那里的任何人能够改变与jquery Isotope一起使用的CSS3过渡,以使用诸如"transition-delay:0s,1s;"之类的东西来添加延迟项目.

我希望他们先向左移动,然后向下移动,以便在过滤时获得更多数学类型的感觉(而不是默认的"对角线随机播放").似乎对默认css3转换所做的任何更改都不起作用.

这是我目前的CSS:

/**** Isotope Animating ****/
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

任何输入都会很棒!

试着做一些相当简单的事情,但它正在逃避我.我有以下HTML:

<div id="four">
                <div id="thumb1" class="suiting-thumb">
                    <img src="img/gallery/suit1-thumb.jpg" alt="" title="" />
                </div>


               <div id="thumb2" class="suiting-thumb">
                    <img src="img/gallery/suit2-thumb.jpg" alt="" title="" />
                </div>


               <div id="thumb3" class="suiting-thumb">
                    <img src="img/gallery/suit3-thumb.jpg" alt="" title="" />
                </div>
</div>

我想做的只是"暗淡"父母div的孩子,除了孩子被徘徊.我用这个jQuery片段成功地做到了这一点,但淡出/进入之间有一个短暂的延迟:

$('.suiting-thumb').hover(function() {
                var thumbBtnIdPrefix = 'thumb';
                var thumbBtnNum = $(this).attr('id').substring((thumbBtnIdPrefix.length));
                $('.suiting-thumb:not(#thumb' + thumbBtnNum + ')').animate({
                    "opacity": .3
                }),200;             
            },
            function() {
                $('.suiting-thumb').animate({
                    "opacity": 1
            }),200;
        });

我觉得我需要通过用我的悬停声明选择#four来淡出父div的所有孩子,但我不太清楚如何做到这一点.任何帮助将非常感谢,谢谢!