jQuery Colorbox works on other pages but not my index.html -


i'm pretty sure thoroughly searched similar occurrence this...hope didn't overlook , apologize if did.

i'm installing on live site: www.sigmarating.com

now can see @ www.sigmarating.com/index2.html, example1 colorbox working flawlessly. when go implement same header scripts , stylesheet links in index.html ... nothing happens when click links.

index.html:

    <head>      <meta charset="utf-8">      <title>sigma rating tm</title>      <meta name="description" content="">      <meta name="author" content="">      <!-- +++ mobile specific metas +++ -->      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">      <!-- +++ load css files styles.css +++ -->      <link rel="stylesheet" href="styles.css">      <link href='http://fonts.googleapis.com/css?family=pt+sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>      <!--[if lt ie 9]>      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>      <![endif]-->      <!-- +++ load favicon favicons +++  -->      <link rel="shortcut icon" href="favicon.ico">      <!--colorbox header!-->     <link rel="stylesheet" href="colorbox.css" rel='stylesheet' type='text/css'/>     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" rel='javacsript' type='text/js'></script>     <script src="http://www.sigmarating.com/jquery.colorbox-min.js" rel='javascript' type='text/js'></script>     <script>         $(document).ready(function(){             //examples of how assign colorbox event elements             $(".group1").colorbox({rel:'group1'});             $(".group2").colorbox({rel:'group2', transition:"fade"});             $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});             $(".group4").colorbox({rel:'group4', slideshow:true});             $(".ajax").colorbox();             $(".youtube").colorbox({iframe:true, innerwidth:425, innerheight:344});             $(".vimeo").colorbox({iframe:true, innerwidth:500, innerheight:409});             $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});             $(".inline").colorbox({inline:true, width:"50%"});             $(".callbacks").colorbox({                 onopen:function(){ alert('onopen: colorbox open'); },                 onload:function(){ alert('onload: colorbox has started load targeted content'); },                 oncomplete:function(){ alert('oncomplete: colorbox has displayed loaded content'); },                 oncleanup:function(){ alert('oncleanup: colorbox has begun close process'); },                 onclosed:function(){ alert('onclosed: colorbox has closed'); }             });              $('.non-retina').colorbox({rel:'group5', transition:'none'})             $('.retina').colorbox({rel:'group5', transition:'none', retinaimage:true, retinaurl:true});              //example of preserving javascript event inline calls.             $("#click").click(function(){                  $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("open window again , message still here.");                 return false;             });         });     </script>              

html external page colorbox im trying call:

<p><a class='iframe' href="http://www.sigmarating.com/sircalculator/sir.html">sir calculator</a></p> 

im using barbershop responsive layout -- themeforest if @ familiar it. i'm not using wordpress or drupal or other cms plain cut , dry responsive theme.

any suggestions appreciated!

-thanks!

well simple 1 went on head. theme i'm using loaded javascripts @ end of page speed load times. guess never bothered down there because had loaded script in header , script worked fine. however, colorbox jquery plugin needed loaded other scripts.

thanks theme's support team helping me clarify stupidity.

                <script src="assets/js/jquery-1.9.1.min.js"></script>                 <script src="assets/js/jquery.validate.js"></script>                 <script src="assets/js/jquery.bxslider.js"></script>                 <script src="assets/js/smooth-scroll.js"></script>                 <script src="assets/js/filter-gallery.js"></script>                 <script src="assets/js/jquery.easing.1.3.js"></script>                 <script src="assets/js/jquery.prettyphoto.js"></script>                 <!-- initiate jquery -->                 <script src="assets/js/js.js"></script>                 <script src="assets/js/jquery.colorbox-min.js"></script> 

that's how scripts ended looking in end, call functions placed inside of "assets/js/js.js" .


Comments

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -