The colorbox jQuery plug-in works fine in the base document.
I have tried several times to place binding code in the displayed document which pulls in the content with colorbox using jQuery AJAX .load, and have failed.
I have googled for examples, found some, but they are too complicated with extraneous coding for me to copy and modify.
I thought binding colorbox would be something simple. So, I just follow the .on() syntax with
$(document).on(“click”,function(){
$('a.gallery').colorbox({rel:'gal'});
};
That does not work. It defaults to the browser image display which is usually upper left.
There probably is a simple answer.
How do you get .on() to bind .colorbox on AJAX content?
///////////////////////////////////////////////////////////////////////////////////////////////////////
BASE DOCUMENT ( Source of material to be AJAX loaded )
-------------------------
<script type="text/javascript" src="../js/jquery.mlens-1.5.min.js"></script>
<link rel="stylesheet" href="../css/colorbox.css">
<script src="../js/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function() {
/* alert("I have jQuery");*/
$('a.gallery').colorbox({rel:'gal'});
/*Alert("I reached colorbox");*/
/* $("a.gallery").mouseover(function(){
$("a.gallery img").show();
}); -*/
});
</script>
<div id="narrative">
<p>This is announcing the BEGINNING of DREDGING LAKE OKABENA</p>
<p>The three week period mentioned probably refers to re-assembling the equipment, that was moved here from Ortonville, piece-by-piece, on the barge bottom and getting it into the water. Some of this equipment was very heavy.</p>
<p>Gislasson was in charge of the dredging on Big Stone at Ortonville and knew the seasons of ice for this area of the state and yet predicted that Worthington would be able to dredge Nine (9) months out of the year.</p>
<a href="../../photos/20090100017pc.jpg" class="gallery"><img title="Shawano being re-assembled when pieces came from Ortonville" alt="Shawano being re-assembled when pieces came from Ortonville" src="../../photos/20090100017pc.jpg" width="150" style="border-radius:3px;box-shadow:2px 2px 8px black;margin:5px;"></a>
</div>
DISPLAYED DOCUMENT WITH AJAXED MATERIAL
<!-- ---------------------------------- --->
<!-- jQuery Setup --->
<!-- ---------------------------------- --->
<!-- ------------------------------------- --->
<!-- Script to Run Colorbox jQuery Plug In --->
<!-- ------------------------------------- --->
<link rel="stylesheet" href="../css/colorbox.css">
<script src="../js/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function() {
/* alert("I have jQuery");*/
$('a.gallery').colorbox({rel:'gal'});
/*Alert("I reached colorbox");*/
/* $("a.gallery").mouseover(function(){
$("a.gallery img").show();
}); -*/
});
</script>
<!-- ---------------------------------- --->
<!-- Script to jQuery ALAX Loads --->
<!-- ---------------------------------- --->
<script type="text/javascript">
$(document).ready(function()
{
//* alert("We have the script running");
$("#narrativebox").load("../input/input_1941_03_18_dredging_of_lake_okabena_is_slated_to_start_in_month.htm #narrative");
$("#textbox").load("../input/input_1941_03_18_dredging_of_lake_okabena_is_slated_to_start_in_month.htm #text");
});
</script>
<div id="narrativebox">
/!-- AJAX jQuery loaded material goes here -->
</div>
<a href="1941_03_17_more_dredge_parts_arrive_outfit_to_be_assembled_here_soon.htm"><img src="/Okabena/dredge/icons/prev.png" class="prev-article" alt=""></a>
<a href="1941_03_18_wpa_working_on_dredge_and_camp.htm"><img src="/Okabena/dredge/icons/next.png" class="next-article" alt=""></a>
<div class="article-top">ARTICLE AS TEXT</div>
<div id="textbox">
<h2>Dredging Of Lake Okabena Is Slated To Start In Month</h2>
/!-- AJAX jQuery loaded material goes here -->
<h4>1941/03/18 - Dredging Of Lake Okabena Is Slated To Start In Month</h4>
</div>
==============================================================