0

私はReallySimpleスライドショーを使用していますが、ページのどこにもスライドショーをクリックして新しいウィンドウまたはタブ（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

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');
});
于 2012-11-02T15:45:35.903 に答える