[ｊQuery]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>
------------------------------------------------------------
お礼
ご回答いただきありがとうございました！ 紹介していただいたサイトを拝見させていただきました、とても参考になると思います。 上に移動する構造が二段目以降にかかっていましたが、それを一段目にかけることができるのかを調べてみます。