Open a gallery from one image.

[Canelson]

Hello!
I need your help to jump from Slimbox2 to Fancybox.
I have a photoblog which uses Slimbox2 (I must use jQuery) to show
the photos, but now I need to show some video from vimeo too, and
Slimbox2 doesn't support it, so I'm moving to Fancybox. My problem is
that I don't know how to open a group of images from just one link, as
it is working right now (you can check the FOTOGRAFIA tab from my
website)

If anyone can help me, you can check the code here: http://www.canelson.com.ar/index.html

TIA, Matias from Argentina.

[JFK]

the simplest way to create a fancybox gallery is this

1. the script:
$(document).ready(function() {
$("a.gallery").fancybox();
});

2. the html:
// call your first image
<a class="gallery" rel="gallery" href="image01.jpg" ><img
src="image01_thumbnail.jpg" />show gallery</a>

//load and hide the rest of your images
<div style="display:none;">
<a class="gallery" rel="gallery" title="gallery title #2"
href="image02.jpg"></a>
<a class="gallery" rel="gallery" title="gallery title #3"
href="image03.jpg"></a>
<a class="gallery" rel="gallery" title="gallery title #4"
href="image04.jpg"></a>
<a class="gallery" rel="gallery" title="gallery title #5"
href="image05.jpg"></a>
<a class="gallery" rel="gallery" title="gallery title #6"
href="image06.jpg"></a>
etc ....
</div>

... later you can add some effects and adjust the parameters

On the other hand, if you want to show video from vimeo, youtube or
whatever, I would recommend you to do it in AJAX mode using an
external .txt file to call the video; just follow this 3 steps to
avoid some headaches.

1. set your script: (youtube example)
$("a#youtube").fancybox({
'frameWidth': 425, 'frameHeight': 344, 'overlayOpacity':0.6,
'hideOnContentClick': false,
'callbackOnClose': function() { // this is important to finish
the video after closing fancybox
$("#fancy_content").empty();
}
});

2. your html (call your external file)
<a id="youtube" href="youtube.txt">show youtube video in fancybox</a>

3. create your .txt file with your video provider parameters - here
for a youtube example:
<object width="425" height="344"><param name="movie" value="http://
www.youtube.com/v/b-yJBsjatW0&hl=en&fs=1"></param><param
name="allowFullScreen" value="true"></param><param
name="allowscriptaccess" value="always"></param><embed src="http://
www.youtube.com/v/b-yJBsjatW0&hl=en&fs=1" type="application/x-
shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
width="425" height="344"></embed></object>

saludos y buena suerte

[Canelson]

Thanks JFK! I'll try this now and see how it works.

Saludos para vos también.

> <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/b-yJBsjatW0&hl=en&fs=1"></param><param

> name="allowFullScreen" value="true"></param><param

> name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/b-yJBsjatW0&hl=en&fs=1" type="application/x-

[Canelson]

Well, it's working. I have only one problem with the gallery: when I
click on the link to start seeing it, instead of seeing the first
picture I get an iframe of my whole website inside and when I click on
the link to see the second image, the gallery starts. Any idea?

Vimeo implementation worked perfectly.

THANKS!

[JFK]

sounds like you messed it up a bit ;)
do you have a link where I can see your code?

quiza solo es un error de dedo

[Canelson]

Yes, just go to http://www.canelson.com.ar/jfk.html

I made it fully functional (css&javascript) so you can check it out.
Only Milan and Israel galleries are working and you can search for
"JFK" in the code to find the problems faster).

Thanks a lot!

[JFK]

gotcha

you have this:
<a class="israel" rel="israel">
<img src="img/profiles/israel.png" width="40" height="41"
alt="Israel" />
<strong>Israel</strong>38 fotos</a>

and this
<div style="display:none;">
<a class="israel" rel="israel" title="israel title #2" href="photos/
Israel/Israel-01.jpg"></a>
<a class="israel" rel="israel" title="israel title #3" href="photos/
Israel/Israel-02.jpg"></a>
etc .......

just try this:
<a class="israel" rel="israel" title="israel title #1" href="photos/
Israel/Israel-01.jpg">
<img src="img/profiles/israel.png" width="40" height="41"
alt="Israel" />
<strong>Israel</strong>38 fotos</a>

and remove the first picture from the hidden div

luego has lo mismo para cada galeria

On Apr 24, 12:24 pm, Canelson <canel...@gmail.com> wrote:
> Yes, just go tohttp://www.canelson.com.ar/jfk.html

[Canelson]

FIXED!

As you sais I messed up. I forgot to add the link to the first image
outside the <div>. My mistake, sorry!

Thanks fot your help.

On Apr 24, 4:24 pm, Canelson <canel...@gmail.com> wrote:
> Yes, just go tohttp://www.canelson.com.ar/jfk.html

[Canelson]

JFK!

I have one more question/idea:

Is there any way to apply the same method for the vimeo external link
to the pictures? Because I have too many photos on my website and now
my index.html file weights 47 KB (40 are only the links to the
photos). So I was wondering if the fancybox code could grab the list
of pictures from an external .txt file so my index.html file could
weigth less and the user doesn't need to load all the 40 KB if he only
wants to see my resumé, for example (yes, I know I'm talkinkg about
JUST 40 KB, sorry).

Maybe I'm asking something stupid, but I don't understand JavaScript
at all.

Matias.

[JFK]

there is not stupid questions ... just a bit of ignorance ;)

I don't think you can achieve that. I would rather create another html
page for my picture gallery (with all inline images - hidden perhaps?)
and create just a link in my index file to the gallery - so the index
file will be dramatically reduced in size

you have to load all those pictures anyway and the index file is not
the right place (it will take years to load) and I think this solution
is by far more elegant

[Canelson]

Thanks JFK for your help. I tried to figure this out by myself, but I
get a blank page everytime I click on the link. I've done this:

I created a new html file.
It has the most basic html structure and inside the body tag I added:

<a class="group" rel="group" href="photos/Photo-01.jpg"></a>
<a class="group" rel="group" href="photos/Photo-02.jpg"></a>
etc.

Then I close the body and html tags. When I click on the link Fancybox
opens blank. Then I tried adding the meta information for loading
the .js files but I get the same error, so finally I added the
Fancybox script too and I keep on getting the blank page inside a
Fancybox "skin". Any ideas?