Jquery conflict with elastislide.js and prototype.js

Question

Again I am here with my nightmare Conflict issue.

This question seems like a duplicate but I have read all other answer that suggests use no conflict after jquery but it's not working.

Can anyone briefly describe why and when we use jquery and what to if there more then 2 jquery and prototype version.

Currently, I am trying to solve following problem .It's feel like issue with js/jquery.elastislide.js file but can't find what is the issue here.

brief answer about conflict will appreciate.

<!-- other magento default js -->
<script type="text/javascript" src="http://example.com/js/iwd/all/jquery-1.10.2.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="http://example.com/skin/frontend/meigeetheme/default/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/meigeetheme/default/js/response.0.6.0.min.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/meigeetheme/default/js/select-menu.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/meigeetheme/default/js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/meigeetheme/default/js/jquery.selectbox-0.1.3.min.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/meigeetheme/default/js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/meigeetheme/default/js/jquery.tweet.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/meigeetheme/default/js/jquery.elastislide.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/meigeetheme/default/js/ajaxwishlist.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/meigeetheme/default/js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/meigeetheme/default/js/noty/layouts/top.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/meigeetheme/default/js/noty/themes/default.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/meigeetheme/default/js/script.js"></script>

Uncaught TypeError: jQuery(...).elastislide is not a function script.js:296

jQuery(document).ready(function(){
 jQuery('#brands-carousel').elastislide({
 imageW : 163,
 margin : 0,
 current : 0,
 border : 0,
 minItems : 2,
 easing : 'easeInBack'
 });
});

Answer 1

If you use a variable $k, then all of your jQuery calls would be with that object.

You can use below code:

<script type="text/javascript">
$k = jQuery.noConflict();
$k(document).ready(function(){
 $k('#brands-carousel').elastislide({
 imageW : 163,
 margin : 0,
 current : 0,
 border : 0,
 minItems : 2,
 easing : 'easeInBack'
 });
});
</script>

Hope this helps!

• Vaibhav Ahalpara: Thanks keshar this is working for me but i am acpecting brief answer about conflict. So next time if i face this type of issue then i can solve it by my self