如何使用Tumblr photoset作为幻灯片?

时间:2016-02-11 12:48:13

标签: jquery html css tumblr

我目前的代码有效,但仅适用于第一个photoset。我想让它适用于博客上的所有照片。或许$(this),但我无法让它发挥作用。有谁知道怎么做?

我目前的代码:

CSS:

<style>
    .slideshow { 
        position: relative; 
        width: 600px; 
        height: 400px; 
        border: 1px solid;
    }
    .slideshow div { 
        position: absolute; 
    }
    .slideshow div img {
        height: 400px !important;
        width: auto;
    }
</style>

HTML&amp; JQUERY:

{block:Photoset}
    <div class="slideshow">
        {block:Photos}
            <div>
                <img src="{PhotoURL-500}"/>

                {block:Caption}
                    {Caption}
                {/block:Caption}

                {block:Exif}
                    <ul>...</ul>
                {/block:Exif}
            </div>
        {/block:Photos}
        <script>
            $(".slideshow div:gt(0)").hide();

            setInterval(function() { 
                $('.slideshow div:first')
                    .fadeOut(1000)
                    .next()
                    .fadeIn(1000)
                    .end()
                    .appendTo('.slideshow');
            },  3000);
        </script> 
    </div>

    {block:Caption}
        {Caption}
    {/block:Caption}
{/block:Photoset}

0 个答案:

没有答案