Inserting Links within a Colorbox (making certain text inside the colorbox into links)

JavaScript
1

I’m new to this forum so I apologize if this is confusing. I am trying to create links within a colorbox, I was able to modify this code on the first reply Need a simple popup (modal, on-page-load with time-delay, fast & clean) and made it work for me, but I’m managing a library website and the director would like for patrons (users) to be able to click on the program that’s going on within the colorbox and be redirected to the flyer.pdf

this is the code I have now (I’m just testing it before I put it on the actual website)

<!DOCTYPE html> 
<html>
  <head>
    <meta charset=utf-8 />
    <title>Colorbox Demo</title>
    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
  </head>
  <body>
   <p>The popup will open in 1 second</p>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
   <script>
    window.onload = function() {
    function openColorBox(){
    $.colorbox({width:"35%", height:"42%", html:"<p>What's Happening Monday 11/03/14?<hr><p>9:00am-5:00pm Affordable Care Act Help</p><p>10:00am-1:00pm TASC(GED) Exam Study</p><p>6:00pm-7:00pm Yoga for Teens and Adults</p><p>7:00pm-8:30pm Advanced Conversational Englsih Class</p>"}); 
 }
     var scr = document.createElement('script');
     scr.src = "http://www.jacklmoore.com/colorbox/jquery.colorbox.js";
     document.getElementsByTagName('body')[0].appendChild(scr);
       setTimeout(openColorBox, 1000);
};
    </script>
   </body>
</html>

I was able to get it down with this code but it differs and I can’t seem to get a second program name on there…sorry…I’m new to this forum so I apologize if this is confusing.

<script>
function openColorBox(){
  $.colorbox({html:function () {
return "9:00am-12:15pm " + "Advanced Conversational English Class".link("http://www.portchester-ryebrooklibrary.org");  }}); } setTimeout(openColorBox,0000);
}});
}
setTimeout(openColorBox, 0000);
  </script>
2

Hi,

Could you explain what you are trying to do in more generic terms?

3

You see the white box to the right of the page? http://www.portchester-ryebrooklibrary.org/ I am trying to make it so that you can click the program name and a flyer will popup, or it redirects you to another page like it is there already…whichever one is easier to code, but my director would like it to be a popup now that only shows up once and resets itself every day…

4

Hey 9894770, instead of using the key:value to load the html, ( {html: “text”} ), use the inline HTML method shown on:

http://www.jacklmoore.com/colorbox/example1/

This provides a simpler way to provide HTML with all required formatting and links. The key is to hide the element with CSS. Then the colorbox will copy the HTML from the hidden section to render inside the popop.

5

Thank You, I got it to work but I didn’t use inline html, I used the easy way out…lol :smiley:.

<script>
window.onload = function() {
function openColorBox(){
  $.colorbox({width:"31%", height:"50%", html:"TESTING TEXT " + "TEST".link("http://www.google.com") + "Program<hr/>" + "TEST " + "TEST".link("http://www.google.com")});
}

var scr = document.createElement('script');
scr.src = 
"http://www.jacklmoore.com/colorbox/jquery.colorbox.js";
document.getElementsByTagName('body')[0].appendChild(scr);

 setTimeout(openColorBox, 10);
};
</script>
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.