CODEWITHSUNDEEP
javascriptlightbox
Taylor Marvin
Taylor Marvin

Reputation: 9

Lightbox opens image in NEW WINDOW rather than inside of a lightbox

I have tried to install lightbox, fancy box, and bootstrap. None of them work for me, and I have linked and re-linked everything. At this point, I do not know what to do. It opens up as a jpeg in a separate window, or if I add in the js before any other js, it loads way at the bottom of the page with no lightbox effects/appearance. 

<head>
    <title>Home: Central Pacific</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="Central Pacific is a 300,000 square foot Class “A” Industrial Development in the Heart of the San Francisco Bay Area" />
    <meta name="keywords" content="Real Estate, Industrial, Development, San Francisco, Bay Area, Union City" />
    <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->

    <script type="text/javascript" src="js/lightbox.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>
    <script src="js/jquery.dropotron.min.js"></script>
    <script src="js/skel.min.js"></script>
    <script src="js/skel-layers.min.js"></script>
    <script src="js/init.js"></script>
    <script type="text/javascript">
$(function() {
    $('#gallery a').lightBox();
});
    </script>

    <noscript>
        <link rel="stylesheet" href="css/skel.css" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/style-noscript.css" />
        <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    </noscript>

    <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>

And.. (without the spaces)

<div id="gallery"><a href="images/aerial01.jpg" rel="lightbox">See Location Map</a></div>

Here is my dropbox folder for the website https://www.dropbox.com/sh/n21lwdnr0mathgi/AACXVNAHBwEcJ9Skl24yjk0Aa

Upvotes: 0

Views: 3540

Answers (3)

Connor
Connor

Reputation: 349

Your mileage may vary but if have a ton of other JS files and believe there's a conflict (here's a last-ditch measure) remove the HTML and add it back again with jquery. As for why this works it removes all the other event listeners and stops them from interfering. As for why it's doesn't remove the lightbox listeners I'm not sure.

let original = $('#gallery').html();
$(item).html(original);

Upvotes: 0

Taylor Marvin
Taylor Marvin

Reputation: 9

I fixed the problem by taking out the dropotron script, as they were competing somehow. Then, I moved the scripts to the bottom of the body tag. I should mention that the lightbox I used above STILL didn't work, but fancy box did.

Upvotes: 0

Marcus Lind
Marcus Lind

Reputation: 11450

You are not suppose to load the jquery, lightbox and so on in the <head>. You are suppose to load it in the bottom of your code, before the closing of your </body> tag.

You can see Bootstrap Example here: http://getbootstrap.com/getting-started/ See "Basic Example".

Upvotes: 3

Related Questions