これを正しい言葉で説明しなかった場合は、事前にお詫び申し上げます。主にC＃の知識を使ってその場で学習しています。3セットのjQueryコードprettyPhoto、Nivo Imageスライダー、jQueryUIタブがあります。同じページの画像とビデオの両方にprettyPhotoを使用しています。
Nivo Image SliderとUIタブの両方が正常に機能しますが、私は一生の間、prettyPhotoを機能させることができません。フォーラムなどをトロールして試しましたが、
1）複数のライブラリを使用していたため、jqueryライブラリのみを使用するように切り替えた可能性があります（現在のところ）。
2）jquery.noConflict（）;も使用しようとしました。運がないいくつかの異なる方法でコーディングします。
現在、これはjqueryの複数のバージョンを使用していることが原因である可能性があると思いますが、正直なところ、それを解決する方法については少し頭がおかしいです。私のコードは以下の通りです、
私のホームページマスターのヘッドタグで、
<%--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>
コンテンツマスターページの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>
よろしくお願いします。