You might be looking for an alternative to our Flash-based pop ups. Here is one way to do it. This example uses the popular Lightbox JS (http://www.huddletogether.com/projects/lightbox/). Note that once the image is shown, the user will able to download/print/etc it. There is no protection. There is also no sizing of the popup, so don't make them too big.
The first thing you need to do is to create your slideshow using SSP/LR. There's nothing inside SSP/LR that will allow you to enable this feature. We're going to modify the exported slideshow.
When creating your slideshow, it's probably easier to leave the Pop-up option unchecked. The popup images will be created anyway (since Adobe doesn't give us the option not to). It's also important to set the size of the popup images to whatever you want.
In the exported slideshow's folder, you'll find a subdirectory named js. Download lightbox.js from the link above and put it in this subdirectory.
The first thing we need to edit is index.html. You need to add a reference to lightbox.js and a new function. Make sure you open index.html in a plain text editor!
Add the following line to the top of the file (just under the one for swffit.js):
<script type="text/javascript" src="js/lightbox.js"></script>
Next, we need to add a new javascript function. This function will get called from our slideshow. Since the slideshow doesn't know anything about lightbox, we're taking care of that for it. You want to insert this code between the swfobject.embedSWF call and the -->
function popupLightbox(url)
{
var objLink = document.createElement('a');
objLink.setAttribute('href',url);
objLink.setAttribute('rel','lightbox');
showLightbox(objLink);
}
Normally, our slideshow takes precedence. You need to tell it to stop being so high maintenance. You do this by setting the wmode parameter. Find and modify the following code (hint: it's before the swfobject.embed function call):
var params = {
wmode: "transparent",
bgcolor: "#121212",
allowfullscreen: "true"
}
<img src="_MG_3294.jpg" title="1 / 3" caption="" pause=""/>We need to add link and make that call our new javascript function. Change that tag to look like this:
<img src="_MG_3294.jpg" title="1 / 3" caption="" pause="" link="javascript:popupLightbox('album1/popup/_MG_3294.jpg');"/>
There are a few things to note here:
javascript - This tells the slideshow to run some javascript
popupLightbox - This is the name of the function we added previously to index.html
album1/popup/_MG_3294.jpg - This is the image that will be shown in the lightbox
That's it! When someone views your slideshow, a 'hand' cursor will let them know that the image is a hyperlink. When they click that image, lightbox will pop it up over the slideshow.
This was simply to show you how to get images to pop-up with the lightbox script. We didn't use CSS to enhance your user's pop-up experience. The website mentioned above does a great job adding to the experience though CSS. You should probably revisit that website and follow the directions to edit the CSS in index.html. As we've presented it here, it's not so pretty.
I've presented you with a sample for Lightbox. However, it should be quite easy to change that to Shadowbox, Thickbox, etc. As long as you can activate the box through javascript (like showLightBox() in our popupLightbox() function), you can use it.