Call colorbox from Media Caption or Media Credit

I have put a link in the Media Caption field so that a user can click on it and see a larger version of the image.

This works, but carries you out of the timeline:

<a href='"LARGER.JPG'>View Larger</a>

Is there a way to have this link open the image using colorbox so it pops up over the whole screen instead of going to a different page?

I tried putting this into the Media Caption field, but then the media fails to display:

<a class='closeup' href='LARGER.JPG'>View Larger</a>

<script>

jQuery('a.closeup').colorbox();

</script>

Have more questions? Submit a request

2 Comments

Date Votes

0

Joe Germuska March 26, 2014 19:21

Are you embedding your Timeline in an iframe, or rendering it directly in your page? If you are using an iframe, you won't be able to use this kind of javascript behavior. If you're rendering it directly in your page, have you made sure to load the colorbox jquery plugin?

Comment actions Permalink
0

Steven Sprague March 31, 2014 20:52

Thanks for commenting on this. I messed up. I thought colorbox was built in to this timeline project, but it's Lightbox. Maybe you can answer this for me?

I am rendering directly to the page, and i have put this in the header of the page:

<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>

<script>

   function displayImage(my_href) {

       $.fancybox({

           href: my_href,

              helpers: {

               overlay: {

                  locked: false

               }

              }

       });

   }

</script>

Then in the google spreadsheet in the Media Caption field i add a link like so:

<a href="my\_image\_big.png" onclick="displayImage('my\_image\_big.png'); return false;" target="\_blank">View Larger</a>

This works well. But i think linking to the "jquery.fancybox.pack.js" might actually be redundant as i think that's already in the timeline js?

Comment actions Permalink

Please sign in to leave a comment.

Powered by Zendesk