I've been trying for 2 hours to get FancyBox to work and have no clue how it isn't working. Obviously I am missing something because it's just linking to the image.
Example: I link the image to my images folder (both the thumb and the large image), and when I click the image it just takes me to a new page and shows me the image rather than popping up.
Here is my code:
<head>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/jquery.fancybox.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.css" media="screen"/>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-media.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyImg").fancybox();
});
</script></head>
<div class="row">
<div class="col-md-6">
<div class="portfolio-item">
<a class="fancyImg" href="img/portfolio-2.jpg" title="Lorem ipsum dolor sit amet"><img src="img/portfolio-2.jpg" alt="" /></a>
</div>
</div>
First thing I see is your are loading fancybox twice. Pick one.
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script>
Inside the html body section I added this code
<a class="fancyImg" href="img1.jpg" title="Lorem ipsum dolor sit amet"><img src="img1.jpg" alt="" /></a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyImg").fancybox();
type:"iframe"
});
</script>
And it seems to be working fine :)
Related
Ive tried a number of ways of re-aranging my code in my js files, re-aranging by scripts and a number of other things that I found on here, but unfortunately it still isnt working. I have no clue what to do anymore.
<!DOCTYPE html>
<html lang="en"> <
head><title> Audi Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">
<!-- Slider
================================================== -->
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet" media="screen">
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
<script tyupe="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
<body>
<!-- Loader -->
<!-- Navigation
==============================-->
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<img src="img/audi-logo3.jpg" class="img-responsive pull-right" style="margin- right: 15px">
<div clas="collapse navbar-collapse">
<div class="nav-container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left" style="margin-top: 10px;">
<li>Home</li>
<li> Models</li>
<li>Owners & Customers </li>
<li>Shopping Tools</li>
<li>Global Inovation</li>
</ul>
</div>
</div>
</nav>
</div>
</nav>
<section style="margin-top: 85px;">
<div class="owl-carousel">
<div>
<img src="img/audi-r8.jpg">
</div>
<div>
<img src="img/audi-s8.jpg">
</div>
</div>
</section>
<!-- Script -->
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
My JS
(function(){
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
});
})
Remove the script tags from the head section, as they are already at the bottom of your body tag.
The problem is caused by the order you used there. If you need to use a library in your own code, you must declare that library first. That was not the case in your head section. It should be ok with what you have at the bottom of your body section.
Also, I don't see any script tag for jQuery, but you are using it. You need to include that first:
Just before </body>:
<!-- This script is hosted on a CDN, but you could host it too -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
First, I noticed a typo
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
THIS ONE --> <script **tyupe**="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
Also, I see that you are script loading the same 2 scripts at the bottom of your HTML, but the non minified versions. You should delete what is not being used, and fix that typo.
If you would of HTML validate/check your files, you would of found that typo error. Might be worth doing as there may be other simple errors.
Do you need to load a jQuery file? Make sure it's loaded before your javascript files
I'm new to HTML/CSS, I recently purchased a bootstrap theme and I'm trying to create my own homepage using segments of HTML code they provided.
I copy/pasted a section of code and the file paths for the JS but it doesn't work at all. The assets(text, images, videos) all appear but none of it is styled and it's all static. Neither the CSS nor the JS is working on that segment.
This is a live demo of how it's supposed to look:
http://htmlstream.com/preview/unify-v1.7/index.html
This is how mine looks currently:
http://i.gyazo.com/7f8caf3b13c10c3dbfd340afd3fcb1db.png
This is the HTML segment for the slider:
<!--=== Slider ===-->
<div class="slider-inner">
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2><i>CLEAN & FRESH</i> <br /> <i>FULLY RESPONSIVE</i> <br /> <i>DESIGN</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
<div class="da-img"><img class="img-responsive" src="assets/plugins/parallax-slider/img/1.png" alt=""></div>
</div>
<div class="da-slide">
<h2><i>RESPONSIVE VIDEO</i> <br /> <i>SUPPORT AND</i> <br /> <i>MANY MORE</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i></p>
<div class="da-img">
<iframe src="http://player.vimeo.com/video/47911018" width="530" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
<div class="da-slide">
<h2><i>USING BEST WEB</i> <br /> <i>SOLUTIONS WITH</i> <br /> <i>HTML5/CSS3</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
<div class="da-img"><img src="assets/plugins/parallax-slider/img/html5andcss3.png" alt="image01" /></div>
</div>
<div class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</div>
</div>
</div><!--/slider-->
<!--=== End Slider ===-->
This is the HEAD section of my HTML file:
<head>
<title>Ideal Improvements South West LTD | Home</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-v3.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/animate.css">
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css" />
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
This is the JS section at the bottom of my file:
<!-- JS Global Compulsory -->
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="assets/plugins/smoothScroll.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/modernizr.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/jquery.cslider.js"></script>
<script type="text/javascript" src="assets/plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="assets/js/custom.js"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/plugins/owl-carousel.js"></script>
<script type="text/javascript" src="assets/js/plugins/parallax-slider.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
OwlCarousel.initOwlCarousel();
StyleSwitcher.initStyleSwitcher();
ParallaxSlider.initParallaxSlider();
});
</script>
<!--[if lt IE 9]>
<script src="assets/plugins/respond.js"></script>
<script src="assets/plugins/html5shiv.js"></script>
<script src="assets/plugins/placeholder-IE-fixes.js"></script>
<![endif]-->
I get 7 errors in the chrome dev tools console. 4 are "Uncaught syntaxerror: unexpected token illegal"
2 are "failed to load resource: err_cache_missing and err_file_not_found (The cache one links to the vimeo video link and the file not found links to google fonts.)
The last is "uncaught referenceerror: style switcher is not defined" I believe this is to do with the way I copied some of the code, if you look at the live demo site it has a style switcher on the top right corner.
I took one of the demo html files and put it into my site director and it accesses the JS and CSS fine using the same file paths.
hello you seen your code properly i think something wrong
<script type="text/javascript" src="assets/plugins/parallax- slider/js/modernizr.js"></script>
Space between js name i think this is problem.
or anything else please share your website link or demo code slider
I need some help.
Navigate to this website: http://www.webeffectual.com/
You can see the three white lines on the top left corner of the website. When you hover those lines, there are three boxes that are sliding out from the left. And when you hover those boxes a text appears. That is what I don't know how to accomplish.
Here is my code so far:
<!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" />
<link type="text/css" rel="stylesheet" href="Index.css" />
<script type="text/javascript" src="Index.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="Menu">
</div>
</body>
</html>
The code is just a empty html. :(
And my css is also empty
If you know how to do this, please write a comment or send a link to a website that explains how to to this. It would be highly appreciated.
Srry if im explaining it so bad. I am from sweden and i dont know so much english:3
You can actually achieve this with very little javascript. The menu itself has a fixed position and is off canvas. When the 'hamburger menu' (the three lines) is hovered over, a displayed class is added to menu, sliding it to the left onto the canvas using transform: translateX.
Here's a CodePen example: http://codepen.io/bwalker8038/pen/MYWXdx
Try this:
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css" >
<!-- Custom styles -->
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="css/ie9-and-down.css" />
<![endif]-->
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie9-and-down.css" />
<![endif]-->
<!-- Web fonts -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700'
rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-
awesome.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com
/css?family=Roboto:400,100,300,500|Montserrat:400,700">
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-
icon-144-precomposed.jpg">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-
icon-114-precomposed.jpg">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-
icon-72-precomposed.jpg">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-
precomposed.jpg">
<link rel="shortcut icon" href="ico/favicon.png">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/bootstrap/respond.min.js"></script>
<![endif]-->
</head>
<body class="home portfolio">
<div id="wrapper">
<header>
<div class="side-nav">
<ul class="gn-menu-main" id="gn-menu">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu" id="main-nav">
<li class="current"><a href="#intro"><span><img src="img/home-
icon.png"></span>Home</a></li>
<li class="about"><a href="#whatwedo"><span><img src="img/about-
icon.png"></span>About</a></li>
<li class="work"><a href="#features"><span><img src="img/work-
icon.png"></span>Projects</a></li>
<li class="contact"><a href="#contact"><span><img src="img/contact-
icon.png"></span>Contact</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<!-- logo -->
<li class="logo-wrapper"><a href="#" class="logo home"><img src="img/logo.png">
</a></li>
</ul>
</div>
</header>
<!-- Intro Section -->
<section class="section current" id="intro">
<div class="intro-wrapper">
<div class="right slideRight"><img src="img/flowers.png"><img class="fade-in one
b-flowers" src="img/brought-flowers.png"></div>
<div class="left">
<h1>Digital success isn't a one night stand.<span>Relationships matter.
</span></h1>
<div id="ticker"><h3>Soooo, how about a date?</h3></div>
<div class="fade-in two"><a href="#features" class="btn cta scrollAnchor">Our
Work<span aria-hidden="true" class="icon-angle-down"></span></a></div></div>
</div> <!-- end Wrapper -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/modernizr.custom.js"></script>
<!--[if lt IE 9]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
< ![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
<script src="js/jquery-1.10.1.min.js"></script>
<!--<![endif]-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.scrollTo-min.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/jquery.collagePlus.min.js"></script>
<script src="js/jquery.removeWhitespace.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.caroufredsel.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/classie.js"></script>
<script src="js/jquery.gnmenu.js"></script>
<script src="js/custom.js"></script>
<script src="js/counter.js"></script>
<script type="text/javascript" src="js/jquery.jticker.js"></script>
<script>
jQuery(document).delay(2000).queue(function(){
jQuery("#ticker").addClass( "visible" ).ticker({
cursorList: "|",
rate: 130
}).trigger("play").trigger("stop");
});
</script>
<!-- LESS SCRIPT (RECOMMENDED IF YOU KNOW LESS CSS) -->
<script src="js/less-1.3.3.min.js"></script>
<!-- PRELOADER -->
<script type="text/javascript">
// <![CDATA[
$(window).load(function() { $(".preloader").fadeOut("fast"); })
// ] ]>
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20100120-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async =
true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
'http://www')
+ '.google-analytics.com/ga.js';
,,,, var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body></html>
I'm quite new to js and jQuery, just using it from templates.
My goal is to use magnific popup like a video lightbox, but I can't make it work.
I've tried to remove some other libraries that I used but don't seem to change anything.
Where have I made a mistake? I've uploaded it here.
<!DOCTYPE HTML>
<!--
Overflow 1.1 by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="shortcut icon" href="../favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript"> document.createElement('video');document.createElement('audio');document.createElement('track'); </script>
<script src="js/video.js"></script>
<script> videojs.options.flash.swf = "js/video-js.swf"</script>
<link rel="stylesheet" href="css/effets_perso.css" />
<link rel="stylesheet" href="css/video-js.css">
<link rel="stylesheet" href="css/perso.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Generic -->
<article class="container box style3">
<header>
<h2>Generic Box</h2>
<p>Just a generic box. Nothing to see here.</p>
</header>
<section>
<header>
<h3>Paragraph</h3>
<p>This is a byline</p>
</header>
<a class="test-popup-link" href="images/pic02.jpg">Image</a>
<script type="text/javascript">
$(document).ready(function() {
$(".test-popup-link").magnificPopup({
type: "image"
// autres options
});
});
</script>
<div align="center">
<a class="popup-youtube" href="http://www.youtube.com/watch?v=miTfXsMn5ms">video YouTube </a><br>
<a class="popup-vimeo" href="https://vimeo.com/45830194">video sur Vimeo </a><br>
<a class="popup-gmaps" href="https://maps.google.com/maps?q=epfl+&hl=en&ll=46.521666,6.56652&spn=0.016005,0.038581&sll=37.0625,-95.677068&sspn=37.683309,79.013672&t=h&hq=epfl&z=15&iwloc=A">EPFL sur Google Map</a>
<script type="text/javascript">
$(document).ready(function() {
$(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({
disableOn: 700,
type: "iframe",
mainClass: "mfp-fade",
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
</script>
</div>
</video>
</section>
</section>
</article>
</body>
</html>
I don't know if this is the complete problem but the order of your javascript tags is definitely part of the problem.
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
As you can see you are loading the js/jquery.magnific-popup.js before you actually load the jquery library (js/jquery.min.js). This is an important distinction because your magnific-popup.js uses jquery. If you look at the console on your web page (type ctrl+i, and switch to the console tab) you will see several errors that have to do with jquery not being loaded, and thus the functions in magnific-popup.js not being defined.
So move your jquery script to the top
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
and if it still doesn't work. Look at the console, and try to include the errors when writing an Stack Overflow question.
I used more than three JavaScripts in Magento and I tried to fix some of the scripts (conflict I think) and it works but the last jQuery (jcarousel) it can be swapped to another category if I click the tabs "new arrival" and "most popular" but now it doesn't work, but if I comment out accordion js file it works but accordion can't work.. :(
Click here : http://thaiamuletstore.com/main1/index.php
head.phtml
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<link href="http://thaiamuletstore.com/main1/style/tabs.css" rel="stylesheet" type="text/css">
<link href="http://thaiamuletstore.com/main1/style/tabs.css" rel="stylesheet" type="text/css">
<link href="http://thaiamuletstore.com/main1/style/tango/skin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/jquery.min.js"></script>
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/Untlitie.js"></script> <!-- this-control-jcarousel-->
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/470fe3190c7d0ea4aacc14677c226000.js"></script> <!--this-control-Accordion-->
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/jquery.jcarousel.min.js"></script> <!-- this-control-jcarousel-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="http://thaiamuletstore.com/main1/style/ie.css" type="text/css" media="screen" charset="utf-8" />
<![endif]-->
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/hoverIntent.js"></script>
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/superfish.js"></script>
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/organictabs.jquery.js"></script>
<script src=http://thaiamuletstore.com/main1/js/menu_effect/script.js" type="text/javascript"></script>
jQuery.noConflict();
This is the thing for your rescue.