Archive | Fancybox RSS feed for this section

ExteralInterface Tutorial: Calling Fancybox from Flash

7 Apr

ExteralInterface Tutorial: Calling Fancybox from Flash

So, over the past few days, I’ve been working on a project that requires a fancybox call from flash. WOE. I know, say what? It’s actually a lot easier than you think! So, Check this out… here is how to call fancybox from your AS3 swf.

After the directions… you’ll notice I trying to call a list of images (a gallery). If anyone has achieved that, please feel free to let us all know.

External Interface Tutoral : Zunski Graphics

1. create a button in AS3 (or movieclip)

2. give it an instance name of myButton.

3. In order for fancybox to hear your click, you’ll have to use ExternalInterface to call your js functions from flash.

Sounds like a mouth full, but it’s simple. Just add this to the first frame of your
time line:

 
// IMPORT CLASSES
import flash.external.*;
 
// ADD MOUSE EVENT LISTENER
myButton.addEventListener(MouseEvent.CLICK, myClick);
 
// CREATE FUNCTION
function myClick(e:MouseEvent):void
{
     // CALL YOUR JS FUNCTION HERE IN STRING FORM
     ExternalInterface.call("callFancy");
 
}

4. Now we need to add some code to our HTML document. First, we need
to add a hidden < div > container. So, just above your flash div,
(assuming your using SWFObject — which you should be) add this:

<div id="hidden_clicker" style="display:none;">
        <a class="featured"></a>
</div>


****NOTE : You must call your swfobject.js first… then put in the swf calls, followed by the jquery.min.js, followed by all your fancybox.js scripts. See example for more info ****

5. Now we need to add our JavaScript code. You’ll see the name of
this function is the same as the string we called in flash. Add the
following to your < head > section:

<script type="text/javascript" >
     function callFancy(my_href) {
        var j1 = document.getElementsByClassName("featured");
        j1.href = my_href;
        $('.featured').trigger('click');
     }
</script>

6. OK, now that we are done with that, we still need to define our
fancybox JavaScript — to make it look the way I want… now, this is where I
have questions, but I’ll get to that in a minute. Add this to your
fancybox call. In my case ‘.featured’.

**NOTE – I am calling several different fancybox calls, so I have a
separate .js file with all these calls in it. make sense?

        $(".featured").fancybox({
                'overlayOpacity'        : 0.7,
                'overlayColor'          : '#000',
                'centerOnScroll'                : true,
                'hideOnContentClick'    : true,
                'hideOnOverlayClick'    : true,
                'autoDimensions'        : true,
                'padding'                       : 0,
                'href'                          : 'PUTYOURIMAGEHERE.jpg',
                'title'                                 : 'PUTYOURTITLEHERE',
                'transitionIn'                  : 'fade',
                'transitionOut'                 : 'fade'
        })

7. That’s it.. your done!

Get the SOURCE files here

I hope you find this helpful.

L

Popularity: 100%

Using Fancybox for a PopUp

22 Jan

I know, I know, a pop up is evil… and I agree. So let’s come up with a simple unobtrusive way of showing a pop up, but without actually making one. The answer… Fancybox.

If you don’t know fancybox is a jquery highlight box that allows you to display images, ajax, video, html, flash..etc.

Recently I had a client who’s site is a bit dated; wanting to put a flyer on the home page and have it pop up on load. Well, Fancybox is a perfect way to do this without using ancient ideas.

Here’s How:

1. Download the latest version of jquery (1.3.2 @ the time of this writing)

2. Download Fancybox.

3. Add this to the head of your html page:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.6.js"></script>

I use easing as well.. this makes the transition a bit smoother and bit cooler!

4. In your HTML, you’ll need to create a div that is set to display none… in that div, you will want to create an a href tag like this:

<div style="display: none;">
     <a class="fancybox" href="mypath/myimage.jpg?phpMyAdmin=a95c4b835d3ft271e87f8"></a>
</div>

5. Now, you’ll need to call the document ready class to make this world go round’. Do that by add this under the last JS call in step 3:

<script type="text/javascript">
     $(document).ready(function() {
          $("a.fancybox").fancybox({
               'overlayOpacity'	:	0.8,
		'overlayColor'		:	'black',
		'overlayShow'		:	true
          })
     });
</script>

You’ll notice, I added a few extra parameters, if you check here, you’ll see more on all the options you have.

6. Ok, last but not least, we need to make this load every time the page loads.. so to do so, we just add the onload function to the body tag. Like this:

<body onload='$("a.fancybox").trigger("click");'>

So that’s it! You now have a cool pop up that’s clean, and smooth, and you’ll never have to worry about it not showing up because a user has “pop-up’s” disabled.

L

Popularity: 57%

New Blog Theme Kills White code

18 Sep

So, I just decided that the blog needed a face lift.  I found a really cool theme, and over the next few days I’m going to customize the artwork, and even hook up my twitter account!

For now, please bare with me.  Some of the previous posts have code with “white” text, making it hard to read.  I promise I will take care of this ASAP.

L

Popularity: 9%