Slideshows of Items Not Currently Visible / itemArray Param

[abe]

Hi.

I'd like to be able to create a slideshow from a series of images that
are not visible in the form of thumbnails at the time of the fancybox
call. In versions of fancybox prior to 1.2.1, you could do this with
the itemArray optional parameter. That parameter has been removed
from the API with version 1.3 and now it's not apparent how to achieve
this effect.

The only other (really inelegant) solution that's apparent is to have
a bunch of invisible "rel" elements on the web page (or to insert them
into the DOM dynamically) just so jQuery can get its hands on them.
That seems like a kludgy hack. There must be a better way. Any
ideas?

I noticed that a couple of people have previously posted on this topic
but with no answers. A number of people wanted to be able to open up
slideshows of images from a single thumbnail, which seems like a
useful and reasonable thing to be able to do so I'm hopeful that there
is a solution.

Tootles,

-abe.

[JFK]

You have to declare the set of images within your gallery somewhere
(unavoidable)
if you don't want a bunch of invisible "rel" elements in your html,
you may declare the set of images within the fancybox custom script
itself
you could place the script in a separated js file so it doesn't has to
increase the size of your html document though

so ... having a single thumbnail:
<a id="myThumb" href="javascript:;" ><img src="images/thumb.jpg"
alt="" /></a>

call the gallery with this script:

<script type="text/javascript">
// from this point in a separate js file optional
$(document).ready(function() {
$("#myThumb").click(function() {
$.fancybox([
'images/01.jpg',
'images/02.jpg',
{
'href': 'images/03.jpg',
'title': 'title for image 3'
},
{
'href': 'images/04.jpg',
'title': 'title for image 4'
}
], {
// fancybox options
'type' : 'image', //required
'padding': 0 // optional
}); // closes fancybox
}); // closes click
}); // closes ready
</script>

NOTICE that images without title use the path/name format per line
only while images with title have to be contained between { }
brackets, specifying both the href and title attributes for each
image.

[abe]

JFK,

Excellent! This works and looks like almost exactly what I was
looking for.

One other little question -
Is there a way to tell fancybox to start with the Nth image in the
sequence rather than the first?

Thanks 1.0e6!

-abe.

[JFK]

just add the following option to the script :
'index': n

... where n=number of the image you want to display first
IMPORTANT: bear in mind that in javascript the first image would have
an index=0 so if you want to start with the 4th image then the index
value has to be set to 3
does it make sense?

[abe]

JFK,

Dang, that's slick as snot. Thanks so much. It's just mind blowing
when things work as they ought to. I'm liking jQuery and fancybox
more and more.

Your little trick works great for putting together image galleries
that can work either "in page" using an image replacement gallery or
"out of page" using a lightbox. Here's an example that I'm working
on: click the plus sign to go into lightbox mode, click the magnifier
to magnify while still in the same page, the lightbox is also
draggable so the expanded images can be viewed at 100%:
http://www.timetrafficker.com/watches/led/pulsar-p1/index.html

Again, thanks for your help. I owe you a virtual beer. Here you go:
<beer>Guiness</beer>

Not quite as satisfying as the real thing, I know, but less calories.

-abe.

[JFK]

I appreciate the beer, thanks
but maybe the developer would appreciate a donation

[abe]

Good idea. I was thinking of doing that but I put it off until I knew
that I could get everything working as I wanted. Now that I'm
confindent in keeping Fancybox, I just Paypal'ed him. 10 Euros is
entirely reasonable. Thanks for the reminder.

-abe.

[mwerneck]

Hello,

I have created a separate JS file with this code and it works perfect. Thanks for that! 

I was wondering how could I create multiple galleries in one html page. I would have 10 thumbnails in one HTML and each one would have it's own "slideshow of items not currently visible". 

I tryed naming the thumbnails id="example1", id="example2" and so on... and in the same separate JS file I specified the different ids and it's photos for all other galleries. One after the other. It worked,but only sequentially. I can't open gallery number 2 if gallery number 1 has not yet been opened!

Can anyone help me with this issue? Thanks a lot for your time!

[JFK]

show a link to see what is going on

[mwerneck]

Thanks a lot for your time JFK.

Here is the link for testing: http://mwerneck.com/fb/post.html

And here is the code I've put together: galeria.js

// JavaScript Document

$(document).ready(function() {
$("a#example1").click(function() {
$.fancybox([
'./images/evento1a.jpg',
'./images/evento1b.jpg',
'./images/evento1c.jpg',
'./images/evento1d.jpg',
'./images/evento1e.jpg',
'./images/evento1f.jpg',
'./images/evento1g.jpg',
'./images/evento1h.jpg',
'./images/evento1i.jpg',
'./images/evento1j.jpg',

], {
// fancybox options
'type' : 'image', //required

'padding': 5 // optional
}); // closes fancybox

$("a#example2").click(function() {
$.fancybox([
'./images/evento2a.jpg',
'./images/evento2b.jpg',
'./images/evento2c.jpg',
'./images/evento2d.jpg',
'./images/evento2e.jpg',
'./images/evento2f.jpg',
'./images/evento2g.jpg',
'./images/evento2h.jpg',

], {
// fancybox options
'type' : 'image', //required

'padding': 5 // optional

}); // closes fancybox

}); // closes click
}); // closes ready

});

If I click the image on the right, before clicking the image on the
left... nothing happens. If I click left first... the right one works
fine after.

There should be around 10 thumbnails with it's own galleries... and I
would need them to work independently. Any ideas how to fix this?

Once again, thank you for your time!

Mariano

[JFK]

your issue is simple to solve, just bear in mind that everything you
open, you have to close it (properly)
so
//opens
$(document).ready(function() {

// my stuff here

}); // closes ready

those above are actually your first and last lines in your script ....
the rest goes in the middle
now, on the other hand, each gallery opens (or should open) with a
click (on each thumbnail) .... so for EACH gallery you have to open a
jQuery click and close it properly

$("a#example1").click(function() {
// fancybox in here
}); // closes click


$("a#example2").click(function() {
// fancybox in here
}); // closes click

but if you analyze your code you actually never closed the first click
so the second script for #example2 is actually within the first script
for #example1
like:

$("a#example1").click(function() {
// fancybox in here

$("a#example2").click(function() {
// fancybox in here
}); // closes click

if you are using a decent text editor (like notepad++ for instance) it
will tell you what brackets (and where) are closing its corresponding
opening bracket
and this is why I always use in all my examples in this forum
// closes ready or // closes fancybox or // closes whatever
so you don't get lost where actually your code ends