JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film
Freestyle Logo

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Using FancyBox to display a SET of pages

Click on the image to see an example of displaying a SET of pages in a FancyBox presentation. You can use the return or keyboard arrow keys or scroll the mouse wheel vertically or horizontally to navigate to the next image. Fancybox will display a caption under the photo that is defined in the title="Caption" attribute for the anchor <a ...> html tag.

Click a link and use arrow keys to see several WEBPAGES be displayed through FancyBox

Webpage 1          Webpage 2           Webpage 3

Create your webpages that you want to display in fancybox - use a separate style sheet if you wish that formats the look of those pages. For example:

On the page that will trigger the webpages to be shown through FnacyBox, copy and paste this code in the head of your HTML. If you are using a DW Template paste it after <!-- InstanceBeginEditable name="head" --> and before <!-- InstanceEndEditable -->.


<!-- Needed by FancyBox -->
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/minified.js"></script><!--ONLY ONE of these on the page-->
<script type="text/javascript" src="http://www.freestyleacademy.rocks/fancybox/mousewheel.js"></script>
<link rel="stylesheet" href="http://www.freestyleacademy.rocks/fancybox/fancybox.css?v=2.1.3" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.freestyleacademy.rocks/fancybox/fancybox.pack.js?v=2.1.3"></script>
<link rel="stylesheet" href="http://www.freestyleacademy.rocks/fancybox/fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.freestyleacademy.rocks/fancybox/fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/fancybox/fancybox-media.js?v=1.0.5"></script>
<link rel="stylesheet" href="http://www.freestyleacademy.rocks/fancybox/fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.freestyleacademy.rocks/fancybox/fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/fancybox/fancyboxCustom.js"></script>

The KEY to the connection is rel="columnPages" and class="various fancybox.iframe" attribute which basically alerts fancybox that there exists a family of pages that needs to be displayed as a group or family. Think of rel="columnPages" as assigning a family surname to a set of pages just like your family surname is the same for all your family members. The fancybox javascript will be called into action by clicking on images/thumbnail.jpg which is embedded on the page. Select and copy the code below and paste it into your html page. Adjust it as needed for your purpose - ESPECIALLY the project# and all THE CAPTIONS.


<a rel="columnPages" class="various fancybox.iframe" title="Caption 1" href="project#/pages/column1.html"><img src="project#/images/thumbnail.jpg"> or a text link </a>
<a rel="columnPages" class="various fancybox.iframe" title="Caption 2" href="project#/pages/column2.html"></a><!--no image actually inserted, just the link-->
<a rel="columnPages" class="various fancybox.iframe" title="Caption 3" href="project#/pages/column3.html"></a>