Any tips on implementing this for images? There's no access to the HTML.

Thanks, added. Not dropping the code in the head for some reason. Selected head in script dropdown, ends up at beginning of body.

This is great -- was able to get the form I wanted to appear via pop-up lightbox when link is clicked. One question, though -- how can I get the popup lightbox to appear automitically (either on page load or after a predetermined amount of time)?

Thanks in advance for any & all info you can provide!

I apologize if this is covered somewhere else and I didn't see it, but I'm trying to figure out how to get a slide show to work. similar to what's discussed above but not exactly. I'm wanting my images to automatically rotate instead of being in an iframe when clicked on.

For example, the html code would be:

<div id="slideshow">
<img src="http://www.website.com/images/image1.jpg">
<img src="http://www.website.com/images/image2.jpg">
</div>

Then my script to call it is

<script type="text/javascript">

$(function() {

$('#slideshow').cycle({ 

fx:    'fade', 

delay: 2000,

timeout: 4000

});

});

</script>

How would I alter the java script to make the image rotation work while having a contact form on the page.

This example is using the jQuery Cycle plug in. http://jquery.malsup.com/cycle/

or maybe this set up needs to use the jQuery No Conflict as decribed this post but I'm not understanding correctly how to use the jQuery no conflict keyword:
http://support.unbounce.com/entries/513757-can-i-use-custom-javascr...

Any further direction would be much appreciated.

Is it possible to get this to work with a video embed? When the user clicks on an image, I would like a box to pop up with a YouTube embed that explains more about the feature.

Ok, this might be a crazy work around, but here is what I did to get make it so a user could click on an image, then have that open up a light box with a YouTube embed that autoplays.

First, I changed the size of the box so that it would be the standard YouTube embed (640x390):

jQuery(function() {
    if (jQuery("a.fancybox.iframe").length) {
      jQuery("a.fancybox.iframe").fancybox({
        'width'           : 640,
        'height'          : 390,
        'autoScale'       : 'false',
        'transitionIn'    : 'elastic',
        'transitionOut'   : 'fade',
        'type'            : 'iframe'
      });
    }
  });

Then I created a Custom HTML element that called the image file that I wanted and had the iframe fancybox class so that when a user clicked on it, it would open the YouTube video. For the "href" you have to use the YouTube embed URL instead of the normal URL and to get it to autoplay, you need to add "&autoplay=1". Here is an example of what the link would look like: http://www.youtube.com/embed/UNIQUE_VIDEO_ID?rel=0&autoplay=1

And here is the full custom HTML:

<a class="iframe fancybox" href="http://www.youtube.com/embed/UNIQUE_VIDEO_ID?rel=0&autoplay=1"&... src="https://yoursite.com/images/IMAGE_HERE.jpg"></a>

Now when a user clicks on that image, it will fancybox open to a YouTube embed that autoplays. Pretty cool.

Getting back to the original question in the post, I have a few follow questions:

1 - In step 6 you mention add a link in the source code.  How do I that and how do I change the color of the link?

2- When the fancybox pops up in the live version, the box is very small and has scroll bars.  I've included the proper sizes in the jquery code already.

Thanks.

Hello Albert! These steps should help address your questions:

A) To add the link to your text's source code:

1. Copy <a class="iframe fancybox" href="http://URL.toyour.other.page">Contest Rules</a> to the clip board (you can change 'Contest Rules' to whatever you want your link text to display)
2. Open the text editor in Unbounce
3. Click the 'Source button'
4. Paste the code from step 1 above into the source code 
5. Close the text editor

B) To change the colour of your page's links:

1. First select the page background (You have to click in the page margins to select the background.  Be sure that you are not clicking adjacent to a section in which you have enabled 'Stretch Background to Page Edges' as this prevents you from selecting the background.)
2. Edit the 'Link Colour' in the properties pane on the right - that's it!

One thing to keep in mind is that changing the link colour is a global change that affects all links on your page.

You can find a video at http://screencast.com/t/971mfkJta that demonstrates the two steps above.

Now, so far as your second question, you should be able to adjust the size of the lightbox by editing the height and width values in the jquery script.  If this isn't working for you, just send us an email to support@unbounce.com and let us know which page you're working on.  We can take a look and see what might be causing the issue.

Cheers! 

Hi Oli,

Steps A & B seem to be missing...  Also, would you mind explaining how to do a pop-up video using Fancybox inline rather than iframe?

Thanks

My page has several thumb sized images that I want to link to individual unbounce pages with the fancybox effect.  However I cant get them to load properly.  They did work using the example above if I use a text element instead of an image; however when I add the code given by Oli and I use an image it stops working.  This is the script used:

<script type="text/javascript">
jQuery(function() {
if (jQuery("a.fancybox.iframe").length) {
jQuery("a.fancybox.iframe").fancybox({
'width' : 880,
'height' : 630,
'autoScale' : 'false',
'transitionIn' : 'elastic',
'transitionOut' : 'fade',
'type' : 'iframe'
});
}
});
jQuery(function() {
jQuery("a[target!='_blank'] img").parent('a').fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'fade',
'overlayOpacity' : 0,
'hideOnContentClick' : true
});
});
</script>

My other question is:  How should I set the link property on the image.

thanks.

Hi Carter,

Thank you for quick reply.  I tried it and it worked out great!!  

Carter, I have one more question.  If I also want to include the FancyBox effect on text links,  How do I need to revise the code so that I can keep it on images as well?

Hey gang. I first wanted to thank everyone for putting this thread together. I added my first lightbox to a text object to show the table of contents of my ebook on the first try. It rocks.

I have a couple of questions for a lightbox that I want to add on the same page that will show a youtube video. I don't have a form on the page so I did steps A & B above for the first lightbox. The questions are:

1. For the second lightbox to show a video, do I need to do create a new script in the js scripts area, give it a new name, and then add the code in step A again? What about step B, no need to repeat?

2. I'm planning on making an image of a "mock" Youtube thumbnail such that when they click on this image, a lightbox opens and plays the video. I'm seeing some scripts above for this, but when I create this image, in the info section for the image, I can only put a URL, not the script. I'm guessing it has something to do with ID or Class fields in the Advanced section, and that one or the other needs to be in the script that I'll create in the js scripts area.

3. If I have one lightbox with a set height and width, but I want a different height and width for the other, is there a conflict? Or is this handled by creating a new js script with it's own name, like "youtube video".

Thanks for any help. I'm thinking if I can figure this out, the "mock" video thumbnail can be smaller than the actual video, saving some landing page real estate. Plus, I think videos in lightboxes are pretty cool.

This fancybox implementation does not seem to scroll on an iPhone or iPad if the page called in the iframe is larger than the fancybox settings (not sure about about other mobile browser / OS combos). We've tried changing the autoScale and height/width options, but to no avail. Any suggestions? Thanks!

If this helps, we're trying to get a desktop-width privacy policy page to work on our mobile unbounce pages as well. 

Hello, 

I can't figure out how to integrate a fancybox with just text (without having to create another page). I know it is possible because I've seen it here http://fancybox.net/ (inline text) but I just can't figure out how to make it work.

Or is it just not supported by Unbounce?

Any help is greatly appreciated.

thanks

I have a video iframe on my landing page. I created an iframe fancybox to display text, but when clicked on, it displays beneath the video iframe. How do I tell it to display above it?