0

我正在使用真正简单的幻灯片，页面中没有任何地方可以单击幻灯片以在新窗口或选项卡 ( 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 的代码示例，我刚刚在 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。

干得好！！谢谢！

4

3 回答 3

2

你可以加

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

后

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

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

于 2012-11-01T19:12:21.753 回答
2

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

例如，如果您使用open_in_new_window作为类名在新窗口中打开链接，那么代码将变为：

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

希望这可以帮助 ;）

于 2012-11-01T21:22:22.913 回答
0

因为真正简单的幻灯片会即时为每张幻灯片生成 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');
});
于 2012-11-02T15:45:35.903 回答