These forums are provided for community interactions only. For official support please submit a support ticket.
You are not logged in.
Just finished a project that utilizes SSP Director and Fancybox to display full images. This approach works without Director as well, but requires some changes to the AS. Let me know if anyone would like to see that code as well.
1. Create an event listener for when a user clicks on the content area of SSP. In the properties box for SSP, under the "Content Area" heading, change the "Action" option to "Event".
2. I would also recommend adding in a tool-tip for the content area to explain the click action. You can use this code to customize the tool-tip language: my_ssp.toolLabels[9] = "View Full Size";
3. Here's the AS portion:
------------------------------------------------------
import net.slideshowpro.slideshowpro.*;
// Edit this for custom tool-tip on content area over
my_ssp.toolLabels[9] = "View Full Size";
var currentImgLink:String;
var currentAlbumPath:String;
// This calls the javascript function to activate Fancybox
function onImageClick(event:SSPImageEvent) {
if (event.zone=="action") {
// This pauses the slideshow
my_ssp.toggleDisplayMode();
ExternalInterface.call("launchLightbox", currentImgLink);
}
}
my_ssp.addEventListener(SSPImageEvent.IMAGE_CLICK, onImageClick);
// This determines the file path of the current image in SSP
function onImageData(event:SSPDataEvent){
currentImgLink = currentAlbumPath + "lg/" + String(event.data.file);
}
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA, onImageData);
// This determines the current album path
function onAlbumData(event:SSPDataEvent) {
if (event.type=="albumData") {
currentAlbumPath = String(event.data.lgpath);
}
}
my_ssp.addEventListener(SSPDataEvent.ALBUM_DATA, onAlbumData);
4. Here's the Javascript portion:
(you can drop this in the header area of your html document)
Download the Fancybox files here: http://fancybox.net
------------------------------------------------------
<!-- This initializes Fancybox -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<!-- You can customize Fancybox using these properties -->
<script type="text/javascript">
$(document).ready(function() {
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
<!-- This is the function the Flash is calling to activate Fancybox -->
<script type="text/javascript">
function launchLightbox(currentImgLink) {
$.fancybox({'href':currentImgLink});
}
</script>
------------------------------------------------------
Please let me know if you have any questions and you can see the working project here: http://brendanenglish.com/public/sspFan … cybox.html
*** DOWNLOAD THE PROJECT FILES HERE: http://brendanenglish.com/public/sspFan … ncybox.zip
Offline
Hi Brendan,
I am attempting to implement this on one of my projects.
I downloaded your zip file... is that a Flash CS 5 file? I get an error when i try an open it in CS4.
Thanks for this script. I think I am really close to getting this working.
-B
Offline
everything appears to be working minus the actual large image. All the JS appears to be loading. but I keep getting this error
"The requested content cannot be loaded.
Please try again later."
So I think it is not making the connection to the large image. Any thoughts?
Offline
Yes it's a CS5 file that will only open in that version. Here's a CS4 version if you're still having trouble opening the file: http://www.brendanenglish.com/public/ss … ox_CS4.fla
Regarding the error message, what do you have in place for the XML File Path for the SlideshowPro portion in Flash? This may be the cause of the error.
Offline
Can you send a screenshot of the error message you're receiving?
Offline
Sure. I am using a Director and using the path to the XML file and of course selecting "director" as type.
http://xxxxxxx.com/slideshowpro/images.php?album=6 is the path to the album.
Offline
it looks like the path to the large image looks like its getting mangled.
http://xxxxxxxxxxx.com/slideshowpro/p.p … 07_ad3.jpg
should it be:
http://xxxxxxxxxxx.com/slideshowpro/alb … 07_ad3.jpg
???
Offline
Yeah it looks like it's the currentAlbumPath that's going awry. This is the code in the AS where the problem is stemming from: "currentAlbumPath = String(event.data.lgpath);"
The project was designed to work with either a gallery or an album so I'm not totally sure what the issue is. Can you email me a link to a live page so I can check out the activity? brendan@brendanenglish.com
Offline
tried with both gallery and album.. btw.. and had same error.
Offline
I bet it's due to Wordpress... It looks like it's using .php extensions for all of the pages. Can you move the SSP Director portion of the site outside of your Wordpress install and reference that new path to remove the .php?
Offline
Actually, it is outside of wordpress.
I will make a page that is non-wordpress and put the swf in it to see if it works then.
Offline
Turns out this is a self-hosted vs. SSP-hosted issue. If you're self-hosted, you will need to use this code in your AS for onImageData & onAlbumData functions (it's not pretty, but it works)...
// This determines the file path of the current image in SSP
function onImageData(event:SSPDataEvent){
var albumPathLength:int = currentAlbumPath.length;
var albumPathTrim:String = currentAlbumPath.slice(0, albumPathLength - 8) + "albums/";
currentImgLink = albumPathTrim + currentAlbumNum + "/lg/" + String(event.data.file);
}
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA, onImageData);
// This determines the current album path
function onAlbumData(event:SSPDataEvent) {
if (event.type=="albumData") {
currentAlbumNum = String(event.data.id);
currentAlbumPath = String(event.data.lgpath);
}
}
my_ssp.addEventListener(SSPDataEvent.ALBUM_DATA, onAlbumData);
Offline
Final AS code as working in flash.
import net.slideshowpro.slideshowpro.*;
// Edit this for custom tool-tip on content area over
my_ssp.toolLabels[9] = "View Full Size";
var currentImgLink:String;
var currentAlbumNum:String;
var currentAlbumPath:String;
// This calls the javascript function to activate Fancybox
function onImageClick(event:SSPImageEvent) {
if (event.zone=="action") {
// This pauses the slideshow
my_ssp.toggleDisplayMode();
ExternalInterface.call("launchLightbox", currentImgLink);
}
}
my_ssp.addEventListener(SSPImageEvent.IMAGE_CLICK, onImageClick);
// This determines the file path of the current image in SSP
function onImageData(event:SSPDataEvent){
var albumPathLength:int = currentAlbumPath.length;
var albumPathTrim:String = currentAlbumPath.slice(0, albumPathLength - 8) + "albums/";
currentImgLink = albumPathTrim + currentAlbumNum + "/lg/" + String(event.data.file);
}
my_ssp.addEventListener(SSPDataEvent.IMAGE_DATA, onImageData);
// This determines the current album path
function onAlbumData(event:SSPDataEvent) {
if (event.type=="albumData") {
currentAlbumNum = String(event.data.id);
currentAlbumPath = String(event.data.lgpath);
}
}
my_ssp.addEventListener(SSPDataEvent.ALBUM_DATA, onAlbumData);Offline
Is it possible to get this working with just Thumbgrid? where exactly do you edit the AS code?
Offline