0

我正在尝试为 Supersized 插件的每张幻灯片添加一个带有信息的 DIV。我正在搜索信息，发现这个Supersized, show a div based on the slide，（我问了一个关于它的新问题，因为它来自去年）。

我想为每张幻灯片添加一些文本，所以这是我的代码：

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

        jQuery(function($){

            $.supersized({

                // Functionality
                slideshow               :   1,          // Slideshow on/off
                autoplay                :   0,          // Slideshow starts playing automatically
                start_slide             :   1,          // Start slide (0 is random)
                stop_loop               :   0,          // Pauses slideshow on last slide
                random                  :   0,          // Randomize slide order (Ignores start slide)
                slide_interval          :   3000,       // Length between transitions
                transition              :   6,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   1000,       // Speed of transition
                new_window              :   1,          // Image links open in new window/tab
                pause_hover             :   1,          // Pause slideshow on hover
                keyboard_nav            :   1,          // Keyboard navigation on/off
                performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,          // Disables image dragging and right click with Javascript

                // Size & Position                         
                min_width               :   0,          // Min width allowed (in pixels)
                min_height              :   0,          // Min height allowed (in pixels)
                vertical_center         :   1,          // Vertically center background
                horizontal_center       :   1,          // Horizontally center background
                fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
                fit_portrait            :   1,          // Portrait images will not exceed browser height
                fit_landscape           :   0,          // Landscape images will not exceed browser width

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                thumb_links             :   1,          // Individual thumb links for each slide
                thumbnail_navigation    :   0,          // Thumbnail navigation
                slides                  :   [           // Slideshow Images
                                                    {image : 'img/1.jpg', title : '', thumb : '', url : ''},
                                                    {image : 'img/2.jpg', title : '', thumb : '', url : ''},  
                                                    {image : 'img/3.jpg', title : '', thumb : '', url : ''},
                                                    {image : 'img/4.jpg', title : '', thumb : '', url : ''},
                                                    {image : 'img/5.jpg', title : '', thumb : '', url : ''}                                                     
                                            ],

                // Theme Options               
                progress_bar            :   1,          // Timer for each slide                         
                mouse_scrub             :   0

            });
        });

    </script>


</head>


<body>
<div id="txtslide">
   Lorem Ipsum is simply dummy text of the printing and typesetting industry.           
</div>
</body>

在slideshow/theme/supersized.shutter.js我复制了上面提到的示例

/* After Slide Transition
----------------------------*/
afterAnimation : function(){
    if (api.options.progress_bar && !vars.is_paused) theme.progressBar();   //  Start progress bar


// current slide is #3
if (vars.current_slide == 3) {
    // 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") {
        $("#txtslide").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
        $("#txtslide").show('fast');
    }
}

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

但是这个例子不起作用，也许我做错了什么，希望你能帮助我，在此先感谢。

4

2 回答 2

1

所以我知道这是一个旧线程，但我也想这样做并找到一个非常简单的答案。我想我会发帖以防其他人也需要同样的帮助。

如果你看一下超大的html页面！提供，您会在文档底部注意到所有包含导航按钮、缩略图等的 div。其中一个标记为“此处显示的幻灯片标题”

如果你只是拿那个 div 并将它移动到你想要放置在你的 html 文档中的位置，你可以只使用“幻灯片图像”区域中的“标题”属性。在你的 CSS 中使用的 id 是“#slidecaption”。（可能已经在包含的 CSS 文档中进行了样式化，因此如果您不希望样式冲突，请查找它）。

此外，该“标题”区域适用于常规 html 标记，因此请使用<p>,<br>或您想要的任何其他内容来帮助控制它的样式。

希望这可以帮助！

于 2014-03-29T20:34:52.560 回答
0

你走对了。

我已经做到了！

在幻灯片数组中

 {
  image : 'one.jpg',
  title : '<a href="url"><div id="slidefillimage"> <b>blablabla and blablabla</div></a>',
  thumb : 'url photo',
  url : ''
 }

这在 supersized.shutter.css 中，我修改了幻灯片标题

#slidecaption {
    position:absolute;
    height: 80px;
    top: 300px;
    bottom:0;
    right: 0;
    overflow: hidden;
    text-indent: 10px;
    text-align:left;
    color: #FFFFFF; 
    font: 400 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0 0 0 0;
    line-height: 30px;
}

并为新 div 创建一个新条目

#slidefillimage {
    height: 60px;
    min-width: 150px;
    max-width: 900px;    
    width: expression(document.body.clientWidth < 152? "150px" : document.body.clientWidth > 902? "900px" : "auto");  
    text-indent: 10px;
    color: #FFFFFF;
    background-color: #00517D; 
    font: 400 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0 0 0 0;
    line-height: 30px;
}

这对我来说很完美！

于 2013-05-02T20:58:20.017 回答