如果我没有用正确的术语解释这一点,我会提前道歉,我主要是在学习 C# 知识。我有 3 组 jQuery 代码 prettyPhoto、Nivo Image 滑块和 jQuery UI 选项卡。我对同一页面上的图像和视频都使用了 prettyPhoto。
我的 Nivo Image Slider 和我的 UI 选项卡都可以正常工作,但我一辈子都无法让 prettyPhoto 正常工作。我搜索了论坛等,并尝试过,
1)这可能是因为我使用了多个库,因此我转而只使用 jquery 库(我现在所在的位置)。
2)我也尝试过使用 jquery.noConflict(); 以几种不同的方式编码,但没有运气。
目前我认为这可能是由于使用了多个版本的 jquery,但老实说,我对如何解决它有点过头了。我的代码如下,
在我的主页 Master 的 head 标签中,
<%--PretyBox (media viewer)--%>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">var $jq161 = jQuery.noConflict();</script>
<link href="Styles/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" />
<script src="Scripts/jquery.prettyPhoto.js" type="text/javascript"></script>
<script type="text/javascript">
$jq161(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto(); // Select all links that contain prettyPhoto in the attribute rel
//$('a.prettyPhoto').prettyPhoto(); // Select all links with prettyPhoto class
//$('a').prettyPhoto(); // Select all links in the page
//$('#gallerythumbnails a').prettyPhoto(); // Select all links in object with gallery ID
//$('#gallerythumbnails a').width(400);
});
</script>
<%--Nivo Image Slider--%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">var $jq142 = jQuery.noConflict();</script>
<link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" />
<script src="Scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$jq142(window).load(function () {
$('#slider').nivoSlider({
pauseTime: 6000, // How long each slide will show
directionNav: false, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
effect: 'fold' // Specify sets like: 'fold,fade,sliceDown'
});
});
</script>
我的 Content Master 页面的 head 标签中的代码,
<%--PretyPhoto (media viewer)--%>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">var $jq161 = jQuery.noConflict();</script>
<link href="Styles/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" />
<script src="Scripts/jquery.prettyPhoto.js" type="text/javascript"></script>
<script type="text/javascript">
$jq161(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto(); // Select all links that contain prettyPhoto in the attribute rel
//$('a.prettyPhoto').prettyPhoto(); // Select all links with prettyPhoto class
//$('a').prettyPhoto(); // Select all links in the page
//$('#gallerythumbnails a').prettyPhoto(); // Select all links in object with gallery ID
//$('#gallerythumbnails a').width(400);
});
</script>
<%--UI Tabs--%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">var $jq142 = jQuery.noConflict();</script>
<script src="Scripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<link href="Styles/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$jq142(function () {
$("#tabs").tabs();
$("#subtabs-1").tabs();
$("#subtabs-2").tabs();
$("#subtabs-3").tabs();
$("#subtabs-4").tabs();
var $tabs = $('#tabs').tabs();
$('.to-stonetab').click(function () {
$tabs.tabs('select', 0);
return false;
});
$('.to-quarrytab').click(function () {
$tabs.tabs('select', 1);
return false;
});
$('.to-valuetab').click(function () {
$tabs.tabs('select', 2);
return false;
});
$('.to-faqtab').click(function () {
$tabs.tabs('select', 3);
return false;
});
});
</script>
还有一个 HTML 参考的例子,
<a href='<%#DataBinder.Eval(Container.DataItem, "PageLink") %>' rel="prettyPhoto">
<img src='Images/<%#DataBinder.Eval(Container.DataItem, "Image") %>' alt='<%#DataBinder.Eval(Container.DataItem, "AltTag") %>' />
</a>
预先感谢您的任何帮助。