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.com/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
Expand|Select|Wrap|Line Numbers
- <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>
