jquery colorbox isn't working with mootools v1.1

StackOverflow https://stackoverflow.com/questions/22639251

  •  21-06-2023
  •  | 
  •  

문제

I wanna use colorbox for 'join us menu' but it isn't working.

and I also tried fancybox, and got a same result..

actually colorbox performed well until I add mootools v1.1 to my jsp code.

I dont know what is mootools v1.1. I just copy some source that from

some awesome website for

using scroll view effect(I dont know exactly what this effect's name) on my page

scroll view effect is working well. you can see that when you clicked 'append1,2,3'

sorry for my poor english skill.

here is my code

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Builder : append your heart </title>
<link rel="stylesheet" href="colorbox.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="colorbox.js"></script>
<script type="text/javascript" src="mootools.v1.1.js"></script>



<script type="text/javascript">

$(function(){
    $('.joinus').colorbox({

    });

});

</script>


<style type="text/css">

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Times New Roman', serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    border: 0;
}

#main_header{

    width:1280px;
    padding-left: 10px;
    line-height:60px;
    background: #59DA50;
    color:#FFFFFF;

}
#main_bar{
    overflow: hidden;
    background: #EAEAEA;

}
#main_bar>ul.main_bar_left{
    overflow: hidden;
    float: left;
}
#main_bar>ul.main_bar_right{
    overflow: hidden;
    float: right;
}
#main_bar>ul.main_bar_left>li{
    float:left;

}
#main_bar>ul.main_bar_right>li{
    float:left;

}
#main_bar a{
    display: block;
    padding: 5px 20px;
    border-right: 1px solid #BDBDBD;
}
#main_bar a:HOVER{

    background: #CEF279;
}

#main_bar input{

    margin:5px;
    width: 80px;

}

#main_footer{
    width:1280px;
    margin:0 auto;
    margin-bottom: 10px;

    background: #353535;
    color: #FFFFFF;

    text-align: center;
    padding: 10px;
}


#main_content {
margin:0px;
overflow:hidden; 
/*height:387px; 
width:99,9%;*/
border:none;
position:relative;
}

#main_content_bg {
width:5000px;
height:600px;
background-image:url(http://placehold.it/5000x600);
background-position:top left;
background-repeat:no-repeat;
background-color:#E6E6E4;
position:relative;
}

.section_content {
width:990px;
height:380px;
position:absolute;
}

#section1 {
left:0px; 
top:0px;
}

#section2 {
left:1570px; 
top:0px;
}

#section3 {
left:2880px; 
top:0px;
}


</style>

</head>
<body>

<header id="main_header">
    <h1>Spring Builder</h1>
</header>

<nav id="main_bar">
    <ul class="main_bar_left">
        <li><a id="append1" href="#">append1</a></li>
        <li><a id="append2" href="#">append2</a></li>
        <li><a id="append3" href="#">append3</a></li>
    </ul>

    <ul class="main_bar_right">
        <li><input type="text" value="id" id="id" name="id"/></li>
        <li><input type="password" id="pw" name="pw"/></li>
        <li><a href="#">Login</a></li>
        <li><a href="SbMember.jsp" class="joinus">Join us</a></li>
    </ul>

</nav>

<div id="main_content">
    <div id="main_content_bg">
        <div id="section1" class="section_content">
        <h1>section1</h1></div>
        <div id="section2" class="section_content">
        <h1>section2</h1></div>
        <div id="section3" class="section_content">
        <h1>section3</h1></div>
    </div>
</div>  
<footer id="main_footer">

</footer>
<script src="scrollstyle.js" type="text/javascript"></script>

</body>
</html>
도움이 되었습니까?

해결책

It's probably happen a conflict between Mootools and jQuery because both libraries are using $ sign, try to convert $ to jQuery for your jQuery code:

jQuery(function(){
    jQuery('.joinus').colorbox({

    });
});

or wrap your code inside:

jQuery(function($) {
    $('.joinus').colorbox({

    });
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top