Sorry for the delay,
<link rel="stylesheet" href="http://eastgatemedia.coffeecup.com/colorbox-master/example1/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://eastgatemedia.coffeecup.com/colorbox-master/jquery.colorbox.js"></script>
<script>
var jQ = $.noConflict();
jQ(document).ready(function() {
jQ("#item4").css("display", "none");
jQ("#item8").css("display", "none");
jQ("#item9").css("display", "none");
jQ("select[name='poemselect']").change(function() {
var currentPoem = jQ(this).val(); // Grab select value :
if( currentPoem == "Afterglow"){
var showPoem = "item4";
jQ("#item4").css("display", "block");
}else if( currentPoem == "Alone With Jesus"){
var showPoem = "item8";
jQ("#item8").css("display", "block");
}else if( currentPoem == "The Best"){
var showPoem = "item9";
jQ("#item9").css("display", "block");
}
var cboxOptions = {
width: '95%',
height: '95%',
maxWidth: '400px',
maxHeight: '400px',
inline: true,
href:"#" + showPoem + "",
}
jQ.colorbox({
width: cboxOptions.width,
height: cboxOptions.height,
maxWidth: cboxOptions.maxWidth,
maxHeight: cboxOptions.maxHeight,
inline:cboxOptions.inline,
href:cboxOptions.href,
onClosed:function(){
jQ(cboxOptions.href).css("display", "none");
}
});
jQ(window).on('resize', function(){
jQ.colorbox({
inline:cboxOptions.inline,
href:cboxOptions.href,
width: window.innerWidth > parseInt(cboxOptions.maxWidth) ? cboxOptions.maxWidth : cboxOptions.width,
height: window.innerHeight > parseInt(cboxOptions.maxHeight) ? cboxOptions.maxHeight : cboxOptions.height,
onClosed:function(){
jQ(cboxOptions.href).css("display", "none");
}
});
});
});
});</script>