prettyPhoto + Bootstrap 3.3.0 + VAN?
  • I'm having trouble getting the above combo to work in any browser: testing with Chrome (latest), FF Dev Edition (latest), and IE11. Very confused; I'm a bit of a newbie to js and that's probably the issue. I've read the tutorials and some other forum posts seeming similar to my issue, no luck.

    I also tried html5lightbox; same results. Source below:

    ---

    <!DOCTYPE html>
    <!--[if lt IE 7 ]> <html class=\"ie ie6\"> <![endif]-->
    <!--[if IE 7 ]> <html class=\"ie ie7\"> <![endif]-->
    <!--[if IE 8 ]> <html class=\"ie ie8\"> <![endif]-->
    <!--[if IE 9 ]> <html class=\"ie ie9\"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html class=\"\" lang=\"en\"> <!--<![endif]-->
    <head>
    <meta charset=\"UTF-8\">

    <title>title</title>
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">

    <link rel=\"stylesheet\" href=\"css/lib/bootstrap.min.css\">
    <link rel=\"stylesheet\" href=\"css/lib/font-awesome.min.css\">
    <link rel=\"stylesheet\" href=\"css/lib/owl.carousel.css\">
    <link rel=\"stylesheet\" href=\"css/lib/owl.theme.css\">
    <link rel=\"stylesheet\" href=\"css/lib/owl.transitions.css\">
    <link rel=\"stylesheet\" href=\"css/style.css\">
    <link rel=\"stylesheet\" href=\"css/colors/cyan.css\">

    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js\" type=\"text/javascript\"></script>
    <!--script src=\"js/jquery.lint.js\" type=\"text/javascript\" charset=\"utf-8\"></script-->
    <link rel=\"stylesheet\" href=\"css/prettyPhoto.css\" type=\"text/css\" media=\"screen\" title=\"prettyPhoto main stylesheet\" charset=\"utf-8\" />
    <script src=\"js/jquery.prettyPhoto.js\" type=\"text/javascript\" charset=\"utf-8\"></script>

    </head>
    <body>

    <div id=\"loader-wrapper\">
    <div id=\"loader\"></div>
    <div class=\"loader-logo\">
    <img width=\"90px\" src=\"images/logo-SCP-grey-small.png\" alt=\"LOGO\">
    </div>
    <div class=\"loader-section section-left\"></div>
    <div class=\"loader-section section-right\"></div>
    </div>

    <div class=\"wrapper\">

    <section id=\"header\" class=\"header header_v2\">
    <div class=\"container\">
    <div class=\"row\">
    <div class=\"col-md-12\">

    <div class=\"logo\">
    <a href=\"/\"><img width=\"90px\" src=\"images/logo-SCP-grey-small.png\" alt=\"LOGO\"></a>
    </div>


    <button class=\"menu-responsive-toggle\">
    <span></span>
    <span></span>
    <span></span>
    </button>


    <nav>
    <ul class=\"menu-nav\">
    <li><a href=\"index.html\">Home</a></li>
    <li><a href=\"about.html\">Team</a></li>
    <li><a href=\"blog.html\">Blog</a></li>
    <li><a href=\"prices.html\">Cost</a></li>
    <li><a href=\"contact.html\">Contact</a></li>
    </ul>
    </nav>



    </div>
    </div>
    </div>
    </section><!-- /header -->



    <section class=\"about-more-wrap\">
    <div class=\"container\">
    <div class=\"about-more\">
    <div class=\"row\">
    <div class=\"col-md-10\">
    <h2 class=\"about-title\">txt</h2>
    </div>
    </div>

    </div><!-- /about-more -->
    </div>
    </section><!-- /about-more-wrap -->


    <section class=\"portfolio\">
    <div class=\"container\">

    <div id=\"work-wrap\" class=\"row\">

    <div class=\"item work-item zoomOut col-xs-12 col-sm-6 col-md-4 corporate liveaction animated\">
    <div class=\"item-inner\">
    <a href=\"http://www.youtube.com/watch/YE7VzlLtp-4\" rel=\"prettyPhoto\">
    <img src=\"images/portfolio/gpecstillsmall4.jpg\" alt=\"\" class=\"image\">
    <div class=\"caption bg-orange-red\">
    <div class=\"inner\">
    <h4 class=\"sm text-uppercase\">x</h4>
    <font color=\"#ffffff\" face=\"Playfair Display, serif\"><em>x</em></font><br>
    </div>
    </div>
    </a>
    </div>
    </div>

    </div>
    </div>
    </section> <!-- /portfolio -->

    <footer class=\"footer\">
    <div class=\"container\">

    <hr class=\"divider\">

    <div class=\"footer-info\">
    <div class=\"row\">

    <div class=\"row\">

    <div class=\"col-md-4\">
    <div class=\"info info-tel\">
    <div class=\"info-icon\">
    <i class=\"fa fa-phone\"></i>
    </div>
    <p>x</p>
    </div>
    </div>

    <div class=\"col-md-4\">
    <div class=\"info info-add\">
    <div class=\"info-icon\">
    <i class=\"fa fa-map-marker\"></i>
    </div>
    <p>x</p>
    <p>x</p>
    </div>
    </div>

    <div class=\"col-md-4\">
    <div class=\"info info-email\">
    <div class=\"info-icon\">
    <i class=\"fa fa-envelope\"></i>
    </div>
    <p><a href=\"x\">x</a></p>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </footer>

    </div><!-- /wrapper -->

    <script type=\"text/javascript\" charset=\"utf-8\">
    $(document).ready(function(){
    $(\"a[rel^='prettyPhoto']\").prettyPhoto();
    });
    </script>

    <script type=\"text/javascript\" src=\"js/lib/jquery-1.11.2.min.js\"></script>
    <script type=\"text/javascript\" src=\"http://maps.google.com/maps/api/js?sensor=false\"></script>
    <script type=\"text/javascript\" src=\"js/lib/ie10-viewport-bug-workaround.js\"></script>
    <script type=\"text/javascript\" src=\"js/lib/isotope.pkgd.min.js\"></script>
    <script type=\"text/javascript\" src=\"js/lib/imagesloaded.min.js\"></script>
    <script type=\"text/javascript\" src=\"js/lib/owl.carousel.min.js\"></script>
    <script type=\"text/javascript\" src=\"js/lib/jquery.matchHeight-min.js\"></script>
    <script type=\"text/javascript\" src=\"js/lib/masonry.pkgd.min.js\"></script>
    <script type=\"text/javascript\" src=\"js/scripts.js\"></script>

    </body>
    </html>

    ---

    Any ideas? I can paste in the css/js if needed.

    Thanks in advance for the help!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter