Question

我正在使用Really Simple slideshow并且在页面中没有任何地方可以点击幻灯片在新窗口或标签（target="_blank"）中打开到某些链接。

我有以下内容，但它仍会在同一页面中打开：

<html>
    <head>

    <link rel="stylesheet" href="http://reallysimpleworks.com/slideshow/demo/css/style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://reallysimpleworks.com/slideshow/demo/js/jquery.rs.slideshow.js?v1.4.10"></script>

    <script type="text/javascript">

            $(document).ready(function () {

                var opts = {
                    controls: {
                        playPause: {auto: false},
                        previousSlide: {auto: false},
                        nextSlide: {auto: false},
                        index: {auto: false}
                    },
                    slide_data_selectors: {
                        caption: {selector: 'div.caption', attr: false}
                    },
                    effect: 'slideLeft',
                    interval: 4, 
                    transition: 500
                };
                $('.rs-slideshow').rsfSlideshow(opts);

            });     

</script>


</head>

<body>

        <div class="main">
            <section class="demo-section clearfix" id="demo-1">
                <div id="slideshow-capts-links" class="rs-slideshow">
                    <div class="slide-container" style="">
                        <img src="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" class="rsf-slideshow-image" style="left: 0px; top: 0px; ">
                            <div class="slide-caption">This is a caption for the first slide.</div>
                    </div>
                    <ol class="slides">
                        <li>
                            <a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" ></a>
                        </li>
                        <li>
                            <a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-b.png" target="_blank" data-link-to="http://reallysimpleworks.com"></a>
                                <div class="caption">
                                                <p>This slide has the hyperlink</p>
                                </div>
                        </li>
                        <li>
                            <a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-c.png"></a>
                        </li>
                    </ol>
            </section>      
        </div>

</body>
</html>

修改

我按照Jigar Savla和yurtdweller的建议尝试了以下代码，但它会在同一页面中保持打开状态。我曾在Chrome和IE中尝试过。

<html>
    <head>

    <link rel="stylesheet" href="http://reallysimpleworks.com/slideshow/demo/css/style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://reallysimpleworks.com/slideshow/demo/js/jquery.rs.slideshow.js?v1.4.10"></script>

    <script type="text/javascript">

            $(document).ready(function () {

                var opts = {
                    controls: {
                        playPause: {auto: false},
                        previousSlide: {auto: false},
                        nextSlide: {auto: false},
                        index: {auto: false}
                    },
                    slide_data_selectors: {
                        caption: {selector: 'div.caption', attr: false}
                    },
                    effect: 'slideLeft',
                    interval: 4, 
                    transition: 500
                };
                $('.rs-slideshow').rsfSlideshow(opts);

                $('a.open_in_new_window').attr('target', '_blank');


            });     

    </script>


</head>

<body>

        <div class="main">
            <section class="demo-section clearfix" id="demo-1">
                <div id="slideshow-capts-links" class="rs-slideshow">
                    <div class="slide-container" style="">
                        <img src="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" class="rsf-slideshow-image" style="left: 0px; top: 0px; ">
                            <div class="slide-caption">This is a caption for the first slide.</div>
                    </div>
                    <ol class="slides">
                        <li>
                            <a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" ></a>
                        </li>
                        <li>
                            <a class="open_in_new_window" href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-b.png" data-link-to="http://reallysimpleworks.com"></a>
                                <div class="caption">
                                                <p>This slide has the hyperlink</p>
                                </div>
                        </li>
                        <li>
                            <a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-c.png"></a>
                        </li>
                    </ol>
            </section>      
        </div>

</body>
</html>

回答后编辑

好的，我知道了！
感谢Jigar Savla's代码示例，我刚在Javascript中添加了几行：

// Under if (slide.link_to) ...
if (slide.link_to_new_page) { $img = $('<a href="' + slide.link_to_new_page + '" target="_blank"></a>').append($img); }

// Under link_to: {selector: 'a', attr: 'data-link-to'}, ...
link_to_new_page: {selector: 'a', attr: 'data-link-to-new-page'}，

并在html中将data-link-to=http://google.com更改为data-link-to-new-page=http://google.com

现在，如果我只是想使用该链接并在同一页面中打开它，我会使用data-link-to，否则data-link-to-new-page。

工作得很棒!! 谢谢！

Answer 1

您可以添加

$('a').click(function() {
$(this).attr('target', '_blank');
});

后

$('.rs-slideshow').rsfSlideshow(opts);

这将使页面上的所有链接在新窗口中打开。如果您在链接上有类，我们可以更改代码以定位这些特定类，并仅打开您要选择的类。

Answer 2

好吧，我会要求你为每个锚标签添加一个单独的类，你需要在新窗口中打开一个链接。

例如，如果你使用 open_in_new_window 作为类名来打开新窗口中的链接，那么代码就会变成：

$('a.open_in_new_window').attr('target', '_blank');

希望这会有所帮助;）

Answer 3

因为Really Simple Slideshow动态生成每张幻灯片的HTML，就在转换发生之前，您需要在生成链接后定位链接。您可以通过附加到rsPostTransition事件来执行此操作：

$('#my-slideshow').bind('rsPostTransition', function() {
  $('#my-slideshow a.open_in_new_window').attr('target', '_blank');
});

或者你可以使用jQuery的委托事件，这可能是更简洁的选择：

$('#my-slideshow').on('click', 'a.open_in_new_window', function() {
  $(this).attr('target', '_blank');
});

真正简单的幻灯片在新窗口中打开链接

3 个答案: