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>

Read more here: How do i open a div in colorbox/lightbox?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, ,

Wordpress related questions and answers: