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:
- Create column1.html and save it in Websites/project#/pages/ and attach your newly created columns.css that you saved in Websites/project#/styles
- Duplicate column1.html and create column2.html and column3.html - duplicate it as many times as needed for your own content
- Enter your content on column1.html, column2.html, column3.html, etc. and stylize it through columns.css
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="https://www.freestyleacademy.rocks/jquery/minified.js"></script><!--ONLY ONE of these on the page-->
<script type="text/javascript" src="https://www.freestyleacademy.rocks/fancybox/mousewheel.js"></script>
<link rel="stylesheet" href="https://www.freestyleacademy.rocks/fancybox/fancybox.css?v=2.1.3" type="text/css" media="screen" />
<script type="text/javascript" src="https://www.freestyleacademy.rocks/fancybox/fancybox.pack.js?v=2.1.3"></script>
<link rel="stylesheet" href="https://www.freestyleacademy.rocks/fancybox/fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="https://www.freestyleacademy.rocks/fancybox/fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/fancybox/fancybox-media.js?v=1.0.5"></script>
<link rel="stylesheet" href="https://www.freestyleacademy.rocks/fancybox/fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="https://www.freestyleacademy.rocks/fancybox/fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="https://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>