CodeCanyon から購入した Revolution Slider と競合しています。レボリューション スライダーのコードはここには掲載しません。
サイトの他の部分に次のスクリプトを使用していますが、回転スライダーをドロップするとすぐに、これらのスクリプト (以下に表示) が機能しなくなります。スライダーを取り外すと、再び機能します。私が知る限り、両者の間にはある種の対立があります。
私はjQueryが初めてで、誰かが助けてくれることを願っています。
$(document).ready(function(){
// hide #back-top first
$("a.back-to-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('a.back-to-top').fadeIn();
} else {
$('a.back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('a.back-to-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
// Tooltips
$("a").LiteTooltip(
{ margin:"0",padding:"6" //padding : "5", etc //
});
});
- - - - - 編集 - - - - - -
わかりました、コードがないと難しいことはわかっていました...ここにあります。これで物事が少し明確になることを願っています。
</head>
<body>
<div id="theme-wrapper">
<div id="mini-header-wrapper">
<div class="grid-container mini-header">
</div>
</div>
<div id="nav-header-wrapper">
<div class="grid-container white-trans-bottom">
<div class="grid-20 grid-parent">
<span style="display:block;line-height:106px;">I am 25% wide</span>
</div>
<div class="grid-80 grid-parent">
<div id="main-nav">
</div>
</div>
</div>
</div>
<!-- START REVOLUTION SLIDER -->
<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;background-color:#E9E9E9;padding:0px;margin-top:0px;margin-bottom:0px;max-height:650px;">
<div id="rev_slider_1_1" class="rev_slider fullwidthabanner" style="display:none;max-height:650px;height:650;">
<ul>
<li data-transition="fade" data-slotamount="7" data-masterspeed="300" >
<img src="/files/4413/8267/6500/bg02.jpg" alt="the7revbg02" >
</li>
<li data-transition="fade" data-slotamount="7" data-masterspeed="300" >
<img src="/files/4413/8267/6504/bg01.jpg" alt="the7revbg01" >
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<script type="text/javascript">
var tpj=jQuery;
tpj.noConflict();
var revapi1;
tpj(document).ready(function() {
if (tpj.fn.cssOriginal != undefined)
tpj.fn.css = tpj.fn.cssOriginal;
if(tpj('#rev_slider_1_1').revolution == undefined)
revslider_showDoubleJqueryError('#rev_slider_1_1');
else
revapi1 = tpj('#rev_slider_1_1').show().revolution(
{
delay:9000,
startwidth:960,
startheight:650,
hideThumbs:200,
thumbWidth:100,
thumbHeight:50,
thumbAmount:2,
navigationType:"none",
navigationArrows:"none",
navigationStyle:"round",
touchenabled:"on",
onHoverStop:"off",
navigationHAlign:"center",
navigationVAlign:"bottom",
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
shadow:0,
fullWidth:"on",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
startWithSlide:0
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
<div id="main-content-wrapper" style="min-height:1000px;">
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
</div>
<footer class="grey-strip">
<div class="grid-container">
<div class="grid-25">
test
</div>
<div class="grid-25">
testing
</div>
<div class="grid-25">
test
</div>
<div class="grid-25">
testing
</div>
</div>
</footer>
<footer class="basefooter">
<div class="grid-container">
<div class="grid-30 footer-logo">
<a href="#" class="footer-logo"><img src="/themes/nextcode/img/logos/nextcode-footer.png" alt="NextCode Creative Gippsland" /></a>
</div>
<div class="grid-70 mini-nav">
<div class="backto-top-btn"><a href="" title="Back to top" class="back-to-top icon-circle-arrow-up icon-2x" data-location="top" data-title="Back to top"></a></div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Design Services</a></li>
<li><a href="#">Our Work</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</footer>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
// hide #back-top first
jQuery("a.back-to-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
jQuery('a.back-to-top').fadeIn();
} else {
jQuery('a.back-to-top').fadeOut();
}
});
// scroll body to 0px on click
jQuery('a.back-to-top').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
// Tooltips
jQuery("a").LiteTooltip(
{ margin:"0",padding:"6" //padding : "5", etc //
});
});
</script>
誰かがこれを手伝うことができれば、私が間違ったことの非常に基本的な説明が欲しい. jQueryの学習に苦労しており、この問題から学びたいと思っています。
これを見て時間を割いてくれる人には、あらかじめ感謝します。