标签: slideshow

我喜欢认为我不是假人,但我不能让我的jQuery水平幻灯片动画能够流畅地制作动画,特别是在FireFox(在Mac上).有人有建议吗？

动画正在这样做:

$('#lookbook').stop().animate({left: -((lookbook-1)*825)+'px'}, { duration: 800, complete: cap_fade(1)});

示例链接:

http://mayfourteenth.com/w/lookbook?preview=1

我正在寻找一个与PhoneGap兼容的jQuery Mobile图像幻灯片.

我查看了这个:http://www.photoswipe.com,但似乎没有一个活跃的社区,例如我注册的问题从未得到回答.
我也看过这个:http://tympanus.net/codrops/2010/05/27/awesome-mobile-image-gallery-web-app/ 但是它使用了外部XML文件,我不喜欢我不想为我想要显示的每个幻灯片编写一个XML文件.

现在,有没有经过验证的jQuery Mobile图像幻灯片,它与PhoneGap兼容？

我正在尝试制作一个非常非常简单的图像滑块/幻灯片,请不要自动播放.我只想点击下一个或上一个图像.有一些问题,你可以在下面阅读.

这里是jsFiddle http://jsfiddle.net/HsEne/12/(我只是使用背景颜色代替小提琴中的图像以及将img切换为div,但当然这是完全相同的问题)

HTML:

<div id="slider-wrapper">

<div id="slider">
<img class="sp" src="/img1.jpg">
<img class="sp" src="/img2.jpg">
<img class="sp" src="/img3.jpg">
<img class="sp" src="/img4.jpg">
<img class="sp" src="/img5.jpg">
<img class="sp" src="/img6.jpg">
</div>

<img id="button-previous" src="/button-arrow-left.jpg">
<img id="button-next" src="/button-arrow-right.jpg">
</div>

CSS:

#slider-wrapper {
display: block;
max-width: 790px;
margin: 5% auto;
max-height: 500px;
height: 100%; }

#slider {
display: block;
position: relative;
z-index: 99999;
max-width: 710px;
width: 100%;
margin: 0 auto; }

#button-previous { 
position: relative;
left: 0;
margin-top: 40%;
width: 40px;
height: 60px; } …

对于"代码呈现会话",我想将我的Jupyter NoteBook转换为幻灯片.它实际上非常好,但对于Dataframe显示.

我目前在笔记本上有这个显示:

我在幻灯片上得到了:

为什么？是否可以在笔记本/幻灯片上获得相同的渲染？

谢谢

基本上,我想在我正在构建的网站上实现jQuery功能,但我不希望Internet Explorer用户必须单击"允许阻止的内容".该功能适用​​于Safari,Chrome和Firefox.只有IE才会提示用户发出Active X警告.

我正在使用以下jQuery循环插件:http://malsup.com/jquery/cycle/

我认为我可能只需要忍受用户在使用网站时点击Active X消息这一事实,但Zendesk(www.zendesk.com)使用相同的实现,该网站不会提示我警告.

任何关于我做错的想法都会受到赞赏.

是否可以使用FlexSlider在运行时添加或删除幻灯片？

我准备了简单的脚本,ProgressGauge在wpInstalling页面上的栏下显示图像.

但是......我需要更复杂的功能.

我需要的是多个图像显示,每个显示X(例如7)秒(安装时的循环时间超过X秒*图像数量)或每次安装后X(例如10%).我试图嵌入图像显示ProgressGauge.Position,但我失败了.

这是我有的:

procedure CurPageChanged(CurPageID: Integer);
var
  BmpFile: TBitmapImage;
begin
  ExtractTemporaryFile('01.bmp');
  ExtractTemporaryFile('02.bmp');
  ExtractTemporaryFile('03.bmp');

  if CurPageID = wpInstalling then
  begin
    BmpFile:= TBitmapImage.Create(WizardForm);
    BmpFile.Bitmap.LoadFromFile(ExpandConstant('{tmp}\01.bmp'));
    BmpFile.Width:= ScaleX(420);
    BmpFile.Height:= ScaleY(180);
    BmpFile.Left := WizardForm.ProgressGauge.Left + ScaleX(0); 
    BmpFile.Top := WizardForm.ProgressGauge.Top + ScaleY(35);

    // BmpFile.Parent:= WizardForm.InstallingPage;
    // BmpFile:= TBitmapImage.Create(WizardForm);
    // BmpFile.Bitmap.LoadFromFile(ExpandConstant('{tmp}\03.bmp'));
    // BmpFile.Width:= ScaleX(420);
    // BmpFile.Height:= ScaleY(400);
    // BmpFile.Left := WizardForm.ProgressGauge.Left + ScaleX(0); 
    // BmpFile.Top := WizardForm.ProgressGauge.Top + ScaleY(35);
    // BmpFile.Parent:= WizardForm.InstallingPage;  

    // BmpFile:= TBitmapImage.Create(WizardForm);
    // BmpFile.Bitmap.LoadFromFile(ExpandConstant('{tmp}\03.bmp'));
    // BmpFile.Width:= ScaleX(420); …

你好,reveal.js用户快速提问.

我试图在reveal.js演示文稿中显示HTML标记.问题是它在我的代码语法高亮区域中呈现html块,因此无法看到标记.

有没有解决的办法？

以下示例

<section>
    <h2>Pretty Code</h2>
        <pre>
            <code contenteditable>

                <form id="demo-form" data-validate="parsley">
                <label for="fullname">Full Name * :</label>
                <input type="text" id="fullname" name="fullname" data-required="true" />

                <label for="email">Email * :</label>
                <input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />

                <label for="website">Website :</label>
                <input type="text" id="website" name="website" data-trigger="change" data-type="url" />

                <label for="message">Message (20 chars min, 200 max) :</label>
                <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea>
                </form> 

            </code>
        </pre>
</section>

谢谢.

用例:我正在使用模板构建器应用程序.用户可以使用不同的组件构建html模板,如文本框,图片框,幻灯片等.

问题:我们面临的问题是幻灯片组件.我们正在使用nivoslider插件来构建它.滑块必须具有用户可以更改转换时间,选择转换等设置.用户可以添加多个幻灯片放映.
现在的问题是当我们添加多个幻灯片时,每个幻灯片可能都有自己的参数,所以我们不能有一个共同的功能.而且,用户可以回来编辑模板,所以我们需要为每个幻灯片显示独立的脚本.

研究:我们的基本结构有效,但卡在一个地方.我们需要script在用户添加到页面的每个幻灯片中附加一个标签.

    return    '<div id="slider" class="nivoSlider">'+
            '<div class="">'+
                '<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide01.jpg" data-thumb="images/slideShow/thumb/slide01.jpg" alt="" />'+
            '</div>'+
            '<div class="">'+
                '<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide02.jpg" data-thumb="images/slideShow/thumb/slide02.jpg" alt="" />'+
            '</div>'+
            '<div class="">'+
                '<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide03.jpg" data-thumb="images/slideShow/thumb/slide03.jpg" alt="" />'+
            '</div>'+
            '<div class="">'+
                '<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide04.jpg" data-thumb="images/slideShow/thumb/slide04.jpg" alt="" />'+
            '</div>'+
        '</div>'+'<script>$("#slider").nivoSlider({effect: "sliceDown",animSpeed: 500,pauseTime: 3000,startSlide: 0,controlNavThumbs: true,controlNavThumbsFromRel:true, pauseOnHover: true,manualAdvance: false});</script>';

代码末尾的脚本标记是我们尝试附加到HTML并将其保存到数据库的内容.我们尝试了一个空白<div id="temp"></div>并在其中附加脚本标记,但我相信jQuery …

几点开始;

手机:Nexus 4(Android 4.4.4)浏览器:Chrome 36.0(最新更新)

我正在努力在网上找到一篇与之相关的文章!还有其他人遇到同样的问题吗？

问题; 几乎任何滑动启用的水平滑块都可以防止垂直滚动.它发生在我迄今为止尝试过的每个网站上.

以JD Sports网站为例;

http://m.jdsports.co.uk/products/nike-air-huarache/120445

这是英国最大的体育零售商之一.当我查看产品页面时,滑动图库会填满我的整个视口,因此很难向下滚动到隐藏在折叠下方的购买按钮.

如果我看看我最喜欢的滑块网站,我不能在触摸画廊时垂直滚动;

http://kenwheeler.github.io/slick/

这是一个错误吗？或者我的手机/浏览器有问题吗？