0

Supersized プラグインから各スライドに情報を含む DIV を追加しようとしています。情報を探していたところ、このSupersized, show a div をスライドに応じて見つけました (昨年のものなので、新しい質問をしました)。

各スライドにテキストを追加したいので、コードは次のとおりです。

<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

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 に答える