jQuery的图像幻灯片播放转盘使用Ajax时 [英] jQuery image slide show carousel when using ajax
问题描述
我一直在试图建立使用jQuery的图像幻灯片/旋转木马，和碰到颜色框这是我的东西真的很好，而且能做的事情我所希望的方式来。
I've been trying to build an image slide show / carousel using jQuery, and came across colorbox which I thing is really good, and does things the way I want to.
我只能和如何使用AJAX方法，他们在建立一个幻灯片放映的图像。
I'm stuck with how to build a slide show of images when using the ajax method they have.
我有每个项目的六幅图像，我想从服务器加载和运行的幻灯片/旋转木马，就像你看到他们的时候，你在这个点击第一个链接的下的弹性过渡页。
I have six images per item that i'd like to load from the server, and run as a slideshow / carousel just like you see them when you click on the first link on this page under Elastic Transition.
我已经成功地让图像使用AJAX脚本，但我不结了幻灯片。我怎样才能做到这一点？目前，我结束了低于对方的所有图像，并没有前进或后退按钮等。
I've succeeded in getting the images to the script using ajax, but i don't end up with a slide show. How can I do this? I currently end up with all the images below each other, and no forward or backward buttons etc.
你能帮忙吗？
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".ajax").colorbox();
});
</script>
</head>
<body>
<p><a class='ajax' href="../content/ajax.html">Outside HTML (Ajax)</a></p>
</body>
</html>
ajax.html（拉图像，并将其返回到脚本
<div>
<img class="gallery" src='/slide/content/ohoopee1.jpg'>
<img class="gallery" src='/slide/content/ohoopee2.jpg'>
<img class="gallery" src='/slide/content/ohoopee3.jpg'>
</div>
我只是想不出该怎么做了。
I just could not figure what to do more.
希望
Desired
推荐答案
我会建议使用AJAX的标记添加到您的文档，然后分配和公开彩盒这些元素。
I would recommend using ajax to add the markup to your document, then assign and open Colorbox to those elements.
一个例子是这样的：
<div id='pictures' style='display:none'></div>
<script>
$('.ajax').on('click', function(e){
e.preventDefault();
$.ajax(this.href, {
success: function(html) {
$('#pictures').html(html).find('img').colorbox({href: function(){
return this.src;
}, open:true});
}
});
});
</script>
这篇关于jQuery的图像幻灯片播放转盘使用Ajax时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
