article gallery

[Sara]

hello
I want to create something like image gallery but instead of loading
images , want it to load some text with navigation buttons.I tried
many methods but didn't work yet,would you please help me?

thanks

[mygoggie]

Well, this ended up as a tutorial, so if ne of the mods or webmaster
can add this to the www, it would be great.

To display text in FancyBox requires the following steps:
1. Write your text and tests that it displays as you want it in a
browser. Test your links to external sites and pages.
2. Hyperlinking from the HTML page to your text
3. Making your text invisible
4. Making your text visible in a FancyBox using an Ajax call
5. Intercepting the external links in your FancyBoxed text and closing
the FancyBox.

So, let's walk through some steps.

STEP 1:
Let's create the text to be displayed. We can link to various sections
in the text and make each section visible in a separate page. So,
let's make two sections. Section "Basic" and section "Advanced".

Put the text in a invisible <div> and separate the text into sections

// Hide the complete block of text to be displayed
// This class is set in the CSS file to be hidden
<div class='hidden'>
// All text regarding 'Basic' stuff wil go here. Give it a class of
'readme' to display the text as per your CSS settings.
// This section is defined by the ID='basic'
<div id='basic' class='readme'>
// Give it a hyperlink anchor
<a name='basic'></a>
All text regarding basic text ....
And here an external hyperlink
<a class='external' href='http://www.your_linky1.com
target='_blank' title='Click to surf to the linky1'>The Linky1</a>
// End of 'Basic' section
</div>

// All text regarding 'Advanced' stuff wil go here. Give it a class
of 'readme' to display the text as per your CSS settings.
// This section is defined by the ID='advanced'
<div id='advanced' class='readme'>
// Give it a hyperlink anchor
<a name='advanced'></a>
All text regarding advanced text ....
And here an external hyperlink
<a class='external' href='http://www.your_linky2.com
target='_blank' title='Click to surf to the linky2'>The Linky2</a>
// End of 'Basic' section
</div>
</div



STEP 2:
Add some settings to your CSS file:

.hidden { display: none; }

.readme { ... Set your class readme stuff ... }



STEP 3:
Add the hyperlinks to open the FancyBoxed text to your HTML page's
text. We will use an ID to trigger the display of each of the basic
and advanced sections

... your other HTML code ....
<a href='#basic' onclick='return false;' id='basic_trigger'
rel='Fancyboxed_text' title='This is a title field for the BASIC
readme text.'>Basic text</a>
<a href='#advanced' onclick='return false;' id='advanced_trigger'
rel='Fancyboxed_text' title='This is a title field for the ADVANCED
readme text.'>Advanced text</a>
... your other HTML code ....

STEP 4:
Now the last step is required to add the necessary FancyBox code to
your web page' header:

/* Code to display basic code */
jQuery('#basic_trigger').fancybox({
'width': '80%',
'height': '80%',
'overlayShow': true,
'onComplete': textBox,
'type': 'ajax',
'ajax': {
dataFilter: function(data) {
return jQuery(data).find('#basic')[0];
}
}
});

/* Code to display advanced code */
jQuery('#advanced_trigger').fancybox({
'width': '80%',
'height': '80%',
'overlayShow': true,
'onComplete': textBox,
'type': 'ajax',
'ajax': {
dataFilter: function(data) {
return jQuery(data).find('#advanced')[0];
}
}
});

function textBox()
{
/* Set title for text block to the top */
jQuery('#fancybox-title').css({'top':'-3em', 'bottom':'auto'});

/* Move right arrow inwards to allow the vertical scrollbar to
work */
jQuery('#fancybox-right').css({'right':'40px', 'width':'25%'});

/* Move the active left section as far left to allow hyperlinks
in the text to work*/
jQuery('#fancybox-left').css({'width':'10%'});
}

jQuery('a.external').fancybox({
'hideOnContentClick' : false,
'zoomSpeedIn' : 600,
'zoomSpeedOut' : 500,
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack'
});


Well, that is that. Because we have used the rel='Fancyboxed_text'
tag, you can browse from section to section using the arrows.

Trust this helps!