Question

我正在尝试向Supersized插件中的每张幻灯片添加一个包含信息的DIV。我正在寻找信息，我发现了这个Supersized, show a div depending 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>

并在幻灯片/ 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');
}

但是这个例子它不起作用，也许我做错了什么，希望你可以帮助我，提前谢谢。

Answer 1

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

如果你看一下Supersized的html页面！提供，您将在文档底部注意到包含导航，缩略图等按钮的所有div。其中一个标有＆＃34;幻灯片显示在这里＆＃34;

如果您只是将该div移动到您想要放置在html文档中的位置，则可以使用＆＃34;标题＆＃34; ＆＃34;幻灯片图片中的属性＆＃34;区域。在CSS中使用的ID是＆＃34;＃slidecaption＆＃34;。（可能已经在一个包含的CSS文档中进行了风格化，所以如果你不希望你的风格发生冲突，就去找它）。

此外，＆＃34;标题＆＃34;区域适用于常规html标记，因此请使用<p>，<br>或其他任何内容来帮助控制其样式。

希望这有帮助！

Answer 2

你是正确的。

我已经这样做了！

幻灯片数组中的

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

并且在supersized.shutter.css中，我修改了slidecaption

#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;
}

这对我来说非常合适！

添加文本到幻灯片 - 超大jquery

2 个答案: