超大，根据幻灯片显示一个div [英] Supersized, show a div depending on the slide

问题描述

因此，我想采用一种不同的方法来尝试澄清我所寻找的内容，在最近的几个小时里，我一直在阅读尽可能多的东西，并且我觉得我对系统的工作方式有了更好的了解，但我仍然不知道如何实现我的目标.

So, I want to take a different approach to try and clarify what I'm looking for, I've been reading as much as I could these last hours and I feel I have a better grasp of how the system works, but I still don't know how to accomplish my goal.

参考链接:

-> SUPERSIZED API

所以，我有以下脚本:

<script type="text/javascript">

    $(document.body).ready(function () {

        if (vars.current_slide == 5){**-I want it to display a div if the slider is the number 5-**     

}       

    });

</script>

我的问题是这些:

1)我要在--区域添加什么以显示仅在滑块位于第5张幻灯片时显示的div?

1) What do I add in the - - area to display a div that only shows up when the slider is at the 5th slide?

2)我是否正在做其余的事情，还是我缺少一些东西?我创建了该代码，所以它可能是非常错误的大声笑，希望我做对了:P

2) Am I doing the rest right or am I missing something? I created that code so it could be terribly wrong lol, hopefuly I got something right :P

仅此而已，希望它能弄清楚.

That's all, hope this clarifies it.

谢谢大家的帮助！我很高兴开始创建自己的脚本:D

Thank you all for the help! I'm really excited to start creating my own scripts :D

好吧，所以我已经用您发布的代码上传了该网站，但它似乎仍然无法正常工作，我还尝试将代码简化为有条件的，仅将结果减少了，但还是不起作用，请检查一下出来吗?

Alright, so I've uploaded the site with the code you posted and it still doesn't seem to work, I also tried reducing the code to the conditional and the result only but that didn't work either, mind checking it out?

感谢您的思考！

推荐答案

我假设您可以使用一些HTML和CSS来创建该div.

I assume you can manage to create that div using some HTML and CSS.

现在，如果我理解正确的话，您的问题是，如何在某些div中显示某些幻灯片的某些额外信息.

Now, if I understood right, your question is how you can show certain extra information in that div for certain slides.

在jQuery中设置div内容的方法非常简单:

The method for setting the contents of a div in jQuery is quite easy:

$("#id_of_div").html("Any <b>HTML</b> content here");

因此，如果要将div的内容设置为testfield的值，请使用

So if you want to set the content of the div to the value of testfield, use

$("#id_of_div").html(testfield);

根据问题编辑进行编辑

不幸的是，Supersized并不能提供出色的触发器-您唯一的选择就是编辑主题文件.

edit in response to question edit

Unfortunately, Supersized does not provide great triggers - the only option you have is editing your theme files.

您最好的选择可能是将以下代码添加到theme.afterAnimation()函数中；对于默认主题，它位于slideshow/theme/supersized.shutter.js底部附近.

Your best option is probably to add the following code to the theme.afterAnimation() function; for the default theme this is located near the bottom of slideshow/theme/supersized.shutter.js.

// current slide is #5
if (vars.current_slide == 5) {
    // Get contents of the 'testfield' field
    var testfield = api.getField(testfield);
    // Set the HTML content of testfielddiv to the value of testfield
    if (testfield != "undefined") {
        $("#testfielddiv").html(testfield);

        // Show testfielddiv (which was hidden for all other slides)
        // The 'fast' argument is for a simple animation; it can be omitted
        // to show without animation, or changed to 'slow' or a number in ms
        $("#testfielddiv").show('fast');
    }
}

else {
    // Hide testfielddiv for any other slide
    $("#testfielddiv").hide('fast');
}

这篇关于超大，根据幻灯片显示一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！