How do i open a div in colorbox/lightbox?

2 Views

Im trying to find a way to open up a div in a lightbox or colorbox. I have tried a few guides on the net, but cant figure it out. This is the code i have, and i want the div #spotDetail to open. Any pointers where to start? 

          <div id="spotsContainer"></div>

<div id="spotDetail" style="display:hidden;">
<ul id="images"></ul>
<div id="spotname"></div>
<div id="spotdistance"></div>
<div id="map"></div>    
</div>

<script>
var spots;



var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '10.0.1') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","https://code.jquery.com/jquery-git1.min.js");
if (script_tag.readyState) {
  script_tag.onreadystatechange = function () { // For old versions of IE
      if (this.readyState == 'complete' || this.readyState == 'loaded') {
          scriptLoadHandler();
      }
  };
} else {
  script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main(); 
}

 function main() { 
jQuery(document).ready(function($) { 

    $.getJSON("http://sk8spots.com/Core/GetData?userId=9914bd37-2526-4c0e-95ed-ad16b045ab89&callback=?", function(data) {

var str = "";
spots = data.Model;
$.each(data.Model, function (i, item) {
            str += "<div class='item' onclick="openObject('"+i+"');" style='height:260px;width:280px;float:left;'><img src='http://sk8spots.com/imageBank/" + item.Images[0].Id + ".jpg?width=280&height=224&bgcolor=WhiteSmoke' width='280' height='224' /><p>" + item.Name + "</p></div>";
    });
    $("#spotsContainer").append(str);
//console.log(data);    

    });
});
}


function openObject(index){ 
jQuery(document).ready(function($) {

    var detail = spots[index];

 $("#images").empty();
    $("#spotname").text(detail.Name);
    $("#spotdistance").text(detail.Distance+"km frÂn Bunkerberget.");
        $.each(detail.Images, function (i, item) {
            $("#images").append("<li><img src="http://sk8spots.com/imageBank/" + item.Id + ".jpg?width=280&height=224&bgcolor=WhiteSmoke" alt="" /></li>");
        });

$("#spotDetail").show();
});
}

</script>
Post Views: 2

Related posts

Leave a Reply

3 comments

  2. I think first you have to append your colorbox in Form- use this

    $(window).load(function () {
                $("#colorbox, #cboxOverlay").appendTo('form:first');
            });

    then call colorbox

    $(".test").colorbox({ iframe: true, width: "xyz", height: "xyz" });

  3. Hello I have created a HTML page and paste your code after that i did some update now it’s working please see below code

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

    Skatespots
    <div id="spotsContainer"></div>
    <div id="test" style="display:none;">
        <div id="spotDetail" style="display:hidden;">
            <ul id="images"></ul>
            <div id="spotname"></div>
            <div id="spotdistance"></div>
            <div id="map"></div>
        </div>
    </div>
    <script type="text/javascript">
        var spots;



        var jQuery;

        /******** Load jQuery if not present *********/
        if (window.jQuery === undefined || window.jQuery.fn.jquery !== '10.0.1') {
            var script_tag = document.createElement('script');
            script_tag.setAttribute("type", "text/javascript");
            script_tag.setAttribute("src", "https://code.jquery.com/jquery-git1.min.js");
            if (script_tag.readyState) {
                script_tag.onreadystatechange = function () { // For old versions of IE
                    if (this.readyState == 'complete' || this.readyState == 'loaded') {
                        scriptLoadHandler();
                    }
                };
            } else {
                script_tag.onload = scriptLoadHandler;
            }
            // Try to find the head, otherwise default to the documentElement
            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
        } else {
            // The jQuery version on the window is the one we want to use
            jQuery = window.jQuery;
            main();
        }

        /******** Called once jQuery has loaded ******/
        function scriptLoadHandler() {
            // Restore $ and window.jQuery to their previous values and store the
            // new jQuery in our local jQuery variable
            jQuery = window.jQuery.noConflict(true);
            // Call our main function
            main();
        }

        function main() {
            jQuery(document).ready(function ($) {

                $.getJSON("http://sk8spots.com/Core/GetData?userId=9914bd37-2526-4c0e-95ed-ad16b045ab89&callback=?", function (data) {

                    var str = "";
                    spots = data.Model;
                    $.each(data.Model, function (i, item) {
                        str += "<a href='#spotDetail' class='inline item' onclick="openObject('" + i + "');" style='height:260px;width:280px;float:left;'><img src='http://sk8spots.com/imageBank/" + item.Images[0].Id + ".jpg?width=280&height=224&bgcolor=WhiteSmoke' width='280' height='224' /><p>" + item.Name + "</p></a>";
                    });
                    $("#spotsContainer").append(str);
                    //console.log(data);

                });
            });
        }


        function openObject(index) {
            jQuery(document).ready(function ($) {

                var detail = spots[index];

                $("#images").empty();
                $("#spotname").text(detail.Name);
                $("#spotdistance").text(detail.Distance + "km frÂn Bunkerberget.");
                $.each(detail.Images, function (i, item) {
                    $("#images").append("<li><img src="http://sk8spots.com/imageBank/" + item.Id + ".jpg?width=100&height=100&bgcolor=white" alt="" /></li>");
                });

                $(".inline").colorbox({ inline: true, width: "50%" });
            });
        }
    </script>
    <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
</body>

</html>

    You only do one thing please create HTML page and simply copy and paste this given html as it is in our page and your functionality will work