Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Javascript Lightbox

Does anyone have experience with JavaScript lightbox support in SSI7? I have a client who wants to run a survey using JavaScript lightbox.
asked Oct 28, 2011 by anonymous
edited Oct 28, 2011 by Walter Williams

1 Answer

+1 vote
 
Best answer
Both lightbox and shadowbox will work with SSI Web you just have to include them in the html for the web pages you want to use them.
answered Oct 28, 2011 by Mike Lodder Gold (23,410 points)
Thanks for prompt reply
do you have any code which can help me on adding lightbox feature?
Depending on the pages where you would where you would like to use it, Simply add the following to the html <head> tag section to a question or the global settings html <head> tag section.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Shadowbox is very similar, but in addition to static images, it also works with various types of movies like Quicktime and flash.  So if you are looking for something to work in the long run I would look into Shadowbox.  The 2 are so compatible that you can theoretically just swap the 2 references and everything should work.

Here's some code for Shadowbox, again place in the same location as before.
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

For example, say you have this link to an image on your question:
<a href="myimage.jpg">My Image</a>

In order to set up this link for use with Shadowbox, simply change it to this:
<a href="myimage.jpg" rel="shadowbox">My Image</a>

Hope this helps
...