Use Text Links Instead of Thumbnail Images in FancyBox “example_group”

To use text links instead of thumbnails in FancyBox galleries, add a line of code after the “example_group” javascript:

$("a[rel=example_group]").fancybox({

'transitionIn' : 'none',

'transitionOut' : 'none',

'titlePosition' : 'over',

'titleFormat' : function(title,

currentArray, currentIndex, currentOpts) {

return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>'; } });

$("a#text").fancybox();

Next, add the newly created “text” class to ‘example_group’ (related) links:

<a class="text" rel="example_group" href="./example/7_b.jpg">Text Link 1</a>

<a class="text" rel="example_group" href="./example/8_b.jpg">Text Link 2</a>

<a class="text" rel="example_group" href="./example/9_b.jpg">Text Link 3</a>

The text links now open a lightbox for the corresponding image file.  Mousing up and/or down while the cursor is directly over the lightbox cycles through other images in the ‘example_group’ gallery.

[REF: Make Fancybox Treat Text Links to Pictures… ]

Advertisements

Tags: ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: