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
Post a Comment