Follow

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>
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

2 Comments

  • 0
    Avatar
    Joe Germuska

    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?

     

  • 0
    Avatar
    Steven Sprague

    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?

Please sign in to leave a comment.
Powered by Zendesk