Bug in v1.3.1 - index for manual gallery

133 views
Skip to first unread message

apd

unread,
May 31, 2010, 1:52:56 AM5/31/10
to fancybox
Hi,

Thanks for the new 'index' key.

I have used this when setting up a manual gallery. However I have
found that on Firefox and Safari on the Mac, having this index value
present causes the close fancybox function to stop working. You click
outside FB or on the close icon and nothing happens. Then when you
click on the previous or next icons the close command is processed.
This also triggers a bunch of JS errors in Firebug.

As soon as I comment out the index key, everything works as normal.

Here is the way I'm setting up the FB (with index commented out):

<script type="text/javascript">
<!--
$("a.lightbox").click(function() {
$.fancybox([
'/_images/<%=productCode%>-500-1.jpg',
'/_images/<%=productCode%>-500-2.jpg',
'/_images/<%=productCode%>-500-3.jpg',
'/_images/<%=productCode%>-500-4.jpg'
], {
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack',
'type' : 'image',
'cyclic' : 'true'
//'index' : '0'
});
});
// -->
</script>

Janis

unread,
May 31, 2010, 3:57:33 AM5/31/10
to fancybox
Because you have to set index as integer - 'index' : 0

Janis

MJJK

unread,
Jun 5, 2010, 8:35:37 PM6/5/10
to fancybox
I am having trouble with this too. My goal is to launch the gallery to
a specific image in the group on page load or by clicking a link
(based on querystring or hashstring data).

Using:

'index':'3'

works in IE (loads my specified image) and not Firefox.

Using:

'index':3

does not work in either browser.

Is there a fix for this coming soon?

Mike

Janis

unread,
Jun 6, 2010, 7:35:19 AM6/6/10
to fancybox
There is nothing to fix.

MJJK

unread,
Jun 6, 2010, 1:04:20 PM6/6/10
to fancybox
Maybe fix was the wrong word...

Is there a way to open a manual gallery on page load and jump to a
specific image (grouped using "rel" or by class). As I previously
stated, creating the gallery using 'index':3 does not work in
FireFox... the last image in the group is loaded no matter what index
number I enter (though 'index':'3' works in IE).

Mike

Janis

unread,
Jun 6, 2010, 2:39:08 PM6/6/10
to fancybox
As I previously stated - there is nothing to fix.

MJJK

unread,
Jun 6, 2010, 2:44:54 PM6/6/10
to fancybox
Janis,

Here is the code that I modified from the demo page:

***********************************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox 1.3.1 | Demonstration</title>
<script type="text/javascript" src="http://code.jquery.com/
jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./fancybox/
jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="./fancybox/
jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/
jquery.fancybox-1.3.1.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/
$("a[rel=example_group]").fancybox({
'index' : 1,
'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>';
}
}).trigger('click');
});
</script>
</head>
<body>
<div id="content">
<h1>fancybox <em>v1.3.1</em></h1>

<p>This is a demonstration. <a href="http://fancybox.net">Home page</
a></p>

<hr />

<p>
Image gallery (ps, try using mouse scroll wheel)<br />

<a rel="example_group" href="./example/7_b.jpg" title="Lorem ipsum
dolor sit amet"><img alt="" src="./example/7_s.jpg" /></a>

<a rel="example_group" href="./example/8_b.jpg" title=""><img alt=""
src="./example/8_s.jpg" /></a>

<a rel="example_group" href="./example/9_b.jpg" title=""><img alt=""
src="./example/9_s.jpg" /></a>
</p>

</div>
<div><p>&nbsp;</p></div>
</body>
</html>

***********************************************************

If you run this, the third image in the set opens, not the image at
'index' : 1.

I must be doing something wrong...

Mike

Janis

unread,
Jun 6, 2010, 3:45:16 PM6/6/10
to fancybox
1) I hope you understand that index of third image is 2 (and not 3),
index 1 is for the second image as index starts from 0.

2) You have no logic in your code, I guess you need to -

$("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[rel=example_group]").eq(1).trigger('click');

Janis
Reply all
Reply to author
Forward
0 new messages