Hi all,
I've been working on my personal portfolio website and been struggling a lot because of J-query. Since my j-query level is not like master.. I usually modify existing j-query plugins to meet my needs and this time I'm trying to combine both accordion plugin and slideshow plugin.
I used the tutorial for accordion from this website -
http://acrisdesign.com/2010/03/jquery-tutorial-toggle-effect-on-hoverclick
also used the tutorial for slideshow from this website - http://sorgalla.com/jcarousel
These two j-query plug-ins work fine when they're not combined together but when I combined two plug-ins and implemented on my website they don't work properly.
This is the page where I'm having trouble. http://jsikcom.ipage.c om/portfolio-test3.htm
once you click the banner in the middle, it expands but the slide show function doesn't work properly.
Can anyone help me out??
Here is the html code
I've been working on my personal portfolio website and been struggling a lot because of J-query. Since my j-query level is not like master.. I usually modify existing j-query plugins to meet my needs and this time I'm trying to combine both accordion plugin and slideshow plugin.
I used the tutorial for accordion from this website -
http://acrisdesign.com/2010/03/jquery-tutorial-toggle-effect-on-hoverclick
also used the tutorial for slideshow from this website - http://sorgalla.com/jcarousel
These two j-query plug-ins work fine when they're not combined together but when I combined two plug-ins and implemented on my website they don't work properly.
This is the page where I'm having trouble. http://jsikcom.ipage.c om/portfolio-test3.htm
once you click the banner in the middle, it expands but the slide show function doesn't work properly.
Can anyone help me out??
Here is the html code
Code:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Hide the tooglebox when page load
$(".contentbox").hide();
//slide up and down when click over heading 2
$(".affiliates a").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".contentbox").slideToggle("normal");
return false;
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 1,
width: 557,
height: 221,
visible: 1,
animation:600,
wrap:"both"
});
$(".image").fadeIn(1900);
});
$(function() {
$('a').click(function() {
$('.image').fadeOut(1500);
setTimeout('window.location = url', 1500);
});
});
</script>
<link href="_css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="logo"><a href="index.html"><img src="_image/logo.png" width="248" height="146" alt="Logo" /></a></div>
<div class="menu">
<ul>
<li><a href="about.html" class="about">ABOUT</a></li>
<li><a href="portfolio.html" class="portfolio">PORTFOLIO</a></li>
<li><a href="blog.html" class="blog">BLOG</a></li>
<li><a href="contact.html" class="contact">CONTACT</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="title"><img src="_image/portfolio.png" width="795" height="71" alt="Product designer" /></div>
<p> </p>
<div class="affiliates">
<a href="#" class="p1"><img src="_image/project01.jpg" alt="" /></a>
<div class="contentbox">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="img/picture1.jpg" width="557" height="281" alt="" /></li>
<li><img src="img/picture2.jpg" width="557" height="281" alt="" /></li>
<li><img src="img/picture3.jpg" width="557" height="281" alt="" /></li>
</ul>
</div>
<!--Content Here--></div>
</div>
<!-- end .content --></div>
<div class="footer">
<p>Copyright</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Comment