我正在使用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 .
效果很好!! 谢谢!
最佳答案
好吧，我会要求您为每个 anchor 标记添加一个单独的类，您需要有一个链接才能在新窗口中打开。
例如，如果您使用 open_in_new_window 作为类名在新窗口中打开链接，则代码将变为:
$('a.open_in_new_window').attr('target', '_blank');
希望这有帮助；)
关于javascript - 非常简单的幻灯片在新窗口中打开链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13182960/