Click here to see the final result!
Requirements:
- swfobject.js
- jquery.js
- shadowbox-query.js
- shadowbox.js
- a.css
- shadowbox.css
- Flash editing application
Lets get started:
- Open the file “ImageArea.as”
on line 100, add the following line:
mClip_mc.onRelease =
Delegate.create(this,openImageLink);
on line 281 in the function “openImageLink” comment out the original
“geturl” statement, and add the second one. note: putting “//” will comment in an actionscript file.
//getURL(mXMLManager.imagePath +
mXMLManager.imageFileNames[mCurrentImageIndex],"_blank");
getURL("javascript:abrirSB('img', '"+mXMLManager.title+"',
'"+mXMLManager.imagePath +
mXMLManager.imageFileNames[mCurrentImageIndex]+"')", "_self");
- Save that file, and republish your fla file.
- All of the files in the “inc” and “images” folder should be in your
document root, (you should have the viewer.swf file, images folder, inc
folder, and all those other folders in there.) - Edit your index.html file
add the following to the “head” area:
<script src="inc/swfobject.js" type="text/javascript"></script><script src="inc/jquery.js" type="text/javascript"></script> <script src="inc/shadowbox-jquery.js" type="text/javascript"></script> <script src="inc/shadowbox.js" type="text/javascript"></script> <script type="text/javascript"><!-- $(document).ready(function(){ var options = { resizeLgImages: true, loadingImage: "images/loading.gif", displayNav: true, handleUnsupported: 'remove', keysClose: ['c', 27], // c or esc autoplayMovies: false }; Shadowbox.init(options); }); function abrirSB(type, title, url) { Shadowbox.init({skipSetup: true}); Shadowbox.open({type: type, title: title, content: url}); }; // --></script>
That should be it!
I know there are some problems with this method, it will not allow you to
use the right and left buttons to change images, but it’s very nice
functionality to have.
Please please support this great product, I modified this code with very
little actionscript 2 knowledge, and it is very well documented in the
sourcecode.
Let me know if you have any questions!
Hey there I tried this code, but it doesn’t seem to be working. I have the following files
# swfobject.js
# jquery.js
# shadowbox-jquery.js
# shadowbox.js
# shadowbox.css
missing a.css and loading.gif (where are these from?) would these affect it? Also is the last script suppose to be commented out? Thanks in advance!
Sorry for the confusion, I thought those were all in the same shadowbox files the shadowbox.js file came in.
You can find them here and here
Let me know if you need anything else!
Hey again. I still have no luck getting it to work hmmm… I’m not sure if the downloaded shadowbox & jquery files had any changes in them thus affecting the code? At the moment when I click on the image it just comes up with a blank white screen (so I’m assuming it’s trying to do something, but something is not right hence it’s not processing the function correctly?) Would you be able to provide me a copy of your files? Or point me to the right direction please? Thanks so much!
Thanks again for your post and efforts. I must be missing something obvious. Unlike KitTy, I don’t even get a blank white screen. I know the Javascript function works in the HTML but for some reason the GetURL function will not execute the Javascript function (or any Javascript function) from my HTML. Even javascript:alert() doesn’t work.
I’ve even tried:
getURL(”javascript:Shadowbox.init({skipSetup: true});”,”_self”);
getURL(”javascript:Shadowbox.open({player:’img’,title:’”+mXMLManager.title+”‘,content:’”+mXMLManager.imageFullLinks[mCurrentImageIndex]+”‘});”,”_self”);
in public function openImageLink()
Nothing appears to work.
Next step is to try to simplify the HTML to a most basic page and try again. Any thoughts as to why SimpleViewer Pro won’t execute any Javascript functions from public function openImageLink()?
Thanks!
I tried to post this on the Airtight Interactive forum but heck, you think it would be a simple task? Doh! Kept on telling me I couldn’t post URLs without replacing dots with spaces. Ggrrr…
[quote="djpm05"]Anyone tried this yet? I am curious if I need to revise my instructions at all
[/quote]
Thanks again for posting your code and the example using ShadowBox.
I am trying to call ShadowBox from a SimpleViewer-Pro gallery embedded within an HTML page. To open the full image via ShadowBox by clicking on the main image displayed by SimpleViewer-Pro, I’ve tried to get Javascript calls to work from within the “getURL” function, which resides inside the openFullImage function. Complete lack of success so far. I know it should be something simple but…
The “getURL” function works fine when using a standard URL, i.e. built with the XML parameters.
Also, the Javascript function I am attempting to call from ImageArea.as works fine when called from within the HTML page – it displays the ShadowBox image without a problem.
Is there something basic that is likely to prevent [code]getURL("javascript:function();");[/code] calls (example only) from working within the OpenFullImage function inside ImageArea.as?
Here are some example calls I’ve tried:
[code]getURL("javascript:Shadowbox.init({skipSetup:true});","_self");
getURL("javascript:Shadowbox.open({player:'img',title:'"+mXMLManager.title+"',
content:'"+mXMLManager.imageFullLinks[mCurrentImageIndex]+"'});","_self");
or
getURL("javascript:ShowScreenShots();","_blank");[/code]
Using Flash CS4, FF3 and tried IE8.
Thanks in advance for any troubleshooting or isolation hints!
Greg
Ignore the above (delete them if you like), I have it working… looks like it was a flash security setting. Knew it had to be something simple. (doh)
Hello,
thank you for this post the final result looks great.
Unfortunately the tutorial lacks information for such an amateur as me xD
I know the basics of HTML and as, downloaded Simple Viewer Pro and shadowbox but I don’t understand where i’m supposed to find ImageArea.as ?? Am i supposed to create it and attach it to something else ?
The answer is probably simple but i can’t figure it out xD
Thank You.
Hello again,
i figured out where were the missing files (btw, windows search system really sucks)
I did what you said but it still wont work:
I modified ImageArea as you said so (before or after } on line 100 ?? i tried both)
I’m not quite sure about what you mean by republishing the fla, i personally opened simpleviewer.fla and tried to save it but then i get an error about the code.
I figured it out that i was supposed to put all the shadowbox files in a “inc” folder to match your HTML code but im still unsure what gallery.xml should look like to allow pictures to go full screen.
Thank you very much