How to implement jquery and Mootools together ?
- by Avi Kumar Manku
I am developing a website in which I am implementing two slider for images gallery using one with jQuery and one with moottools. But there is problem in implementing these because when I use both together the jQuery slider doesn't works where mootools slider works. jQuery slider works in case where I remove mootools. What should I do to implement both sliders together? Any suggestions will be helpful.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tresmode | Footwear & Accessories</title>
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script>
<!-- Syntax hl -->
<script src="js/jquery.syntax.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(window).bind("load", function() {
$("div#mygaltop").slideView({toolTip: true, ttOpacity: 0.5});
$("div#mygalone").slideView(); //if leaved blank performs the default kind of animation (easeInOutExpo, 750)
$("div#mygaltwo").slideView({
easeFunc: "easeInOutBounce",
easeTime: 2200,
toolTip: true
});
$("div#mygalthree").slideView({
easeFunc: "easeInOutSine",
easeTime: 100,
uiBefore: true,
ttOpacity: 0.5,
toolTip: true
});
});
$(function(){
$.syntax({root: 'http://www.gcmingati.net/wordpress/wp-content/themes/giancarlo-mingati/js/jquery-syntax/'});
});
</script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/product.css" rel="stylesheet" type="text/css" />
<link href="css/scroll.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]>
<link href="css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script language="javascript" type="text/javascript" src="js/mootools-1.2-core.js"></script>
<script language="javascript" type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="js/SlideItMoo.js"></script>
<script language="javascript" type="text/javascript">
window.addEvent('domready', function(){
/* thumbnails example , links only */
new SlideItMoo({itemsVisible:5, // the number of thumbnails that are visible
currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
thumbsContainer: 'thumbs',
elementScrolled: 'thumb_container',
overallContainer: 'gallery_container'});
/* thumbnails example , div containers */
new SlideItMoo({itemsVisible:5, // the number of thumbnails that are visible
currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
thumbsContainer: 'thumbs2',
elementScrolled: 'thumb_container2',
overallContainer: 'gallery_container2'});
/* banner rotator example */
new SlideItMoo({itemsVisible:1, // the number of thumbnails that are visible
showControls:0, // show the next-previous buttons
autoSlide:2500, // insert interval in milliseconds
currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
transition: Fx.Transitions.Bounce.easeOut,
thumbsContainer: 'banners',
elementScrolled: 'banner_container',
overallContainer: 'banners_container'});
});
</script>
</head>
<body>
<div id="landing">
<!-- landing page menu -->
<div id="landing_menu">
<ul>
<li><a class="active" href="#">SPECIALS</a></li>
<li><a href="#">SHOP MEN'S</a></li>
<li class="none"><a class="none" href="#">SHOP WOMEN'S</a></li>
</ul>
</div>
<!-- landing page menu -->
<!-- loading container menu -->
<div id="container_part">
<div id="big_image_slider">
<!-- <img src="images/briteloves.png" alt="Britelove" /> -->
<div id="mygaltop" class="svw">
<ul>
<li><img alt="Tresmode | Footwear & Accessories" src="images/briteloves.png" /></li>
<li><img alt="Tresmode | Footwear & Accessories" src="images/1.jpg" /></li>
<li><img alt="Tresmode | Footwear & Accessories" src="images/2.jpg" /></li>
<li><img alt="Tresmode | Footwear & Accessories" src="images/3.jpg" /></li>
<li><img alt="Tresmode | Footwear & Accessories" src="images/4.jpg" /></li>
<li><img alt="Tresmode | Footwear & Accessories" src="images/5.jpg" /></li>
<li><img alt="Tresmode | Footwear & Accessories" src="images/6.jpg" /></li>
<li><img alt="Tresmode | Footwear & Accessories" src="images/7.jpg" /></li>
<li><img alt="Tresmode | Footwear & Accessories" src="images/8.jpg" /></li>
<li><img alt="Tresmode | Footwear & Accessories" src="images/9.jpg" /></li>
<li><img alt="Tresmode | Footwear & Accessories" src="images/10.jpg" /></li>
<li><img alt="Tresmode | Footwear & Accessories" src="images/11.jpg" /></li>
<li><img alt="Tresmode | Footwear & Accessories" src="images/12.jpg" /></li>
</ul>
</div>
</div>
<div class="new_style_banner"><img src="images/new_styles.png" alt="new style" /></div>
<div class="new_style_banner"><img src="images/ford-super-models.png" alt="ford super models" /></div>
</div>
<!--- loading container menu -->
<!-- footer scrool --->
<div id="footer_scroll">
<!--thumbnails slideshow begin-->
<div id="gallery_container">
<div id="thumb_container">
<div id="thumbs">
<a href="gallery/full/DC080302018.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/1.jpg"/></a>
<a href="gallery/full/DC080302028.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/2.jpg" /></a>
<a href="gallery/full/DC080302030.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/3.jpg"/></a>
<a href="gallery/full/DC080302018.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/4.jpg" /></a>
<a href="gallery/full/DC080302028.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/5.jpg" /></a>
<a href="gallery/full/DC080302030.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/6.jpg"/></a>
<a href="gallery/full/DC080302018.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/1.jpg"/></a>
<a href="gallery/full/DC080302028.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/2.jpg" /></a>
<a href="gallery/full/DC080302030.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/7.jpg"/></a>
<a href="gallery/full/DC080302018.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/8.jpg" /></a>
<a href="gallery/full/DC080302028.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/9.jpg" /></a>
<a href="gallery/full/DC080302030.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/10.jpg"/></a>
</div>
</div>
</div>
<!--thumbnails slideshow end-->
</div>
<!-- foooter scrooll -->
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2064812-2");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>
