[jQuery]colorboxの干渉について
当方jQuery初心者です。この場を借りてご質問させて下さい。
現在、jQueryのfullPage(http://alvarotrigo.com/fullPage/)を使用した、横スクロールのサイトを作成しております。
そのコンテンツの中で、同じくjQueryのcolorbox(http://www.jacklmoore.com/colorbox/)を使用し、
インラインhtmlを表示させたいと思っております。
しかしながら、同時に動かそうとするとcolorboxが全く動きません。
単体でのcolorboxは動くので、恐らくfullPageとの干渉を起こしていると思うのですが、何か解決方法はございませんでしょうか。
質問させていただく前に調べた結果、colorboxはスライダーと干渉を起こすとのことで、
colorboxのreturnFocusをfalseにすることで解消されるとあったのですが、それでも解消されませんでした。
どなたかご教示頂けますようよろしくお願い致します。
以下、現在のソースです。
------------------------------------------------------------
<link rel="stylesheet" type="text/css" href="css/colorbox.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript' src='js/moment.min.js'></script>
<script src="js/jquery.easings.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: false,
anchors: ['page'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['page'],
slidesNavigation: true,
slidesNavPosition: 'top',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: false,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: true,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
paddingTop: '-10em',
resize : false,
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction){}
});
});
</script>
<script src="js/jquery.colorbox.js"></script>
<script>
$(function(){
$(".inline").colorbox({
inline: true
width:"700px"
returnFocus: false
});
});
</script>
------------------------------------------------------------
お礼
アドバイスありがとうございます! やっぱり簡単に答えを求めてはいけませんね 考えさせるようにヒントを下さったおかげで そこから自分で解決に辿りつけました 対になることは知ってましたがそこに気づかなかったのはつまり未熟ってことで(笑) 参考にしたコードのカッコとじ抜けを見つけてシンタックスエラーは直せました でもそれだけではだめで 次にidに目を付けて手直ししたところ無事に動作しました 本当にありがとうございました