Fancybox zooming to fullscreen view

[Webseite]

Hi.

I already send a email to the fancybox owners but I didn't became an
answer.

I want to zoom the pictures to fullscreen, like here:

http://www.screencast.com/users/shecter/folders/Jing/media/99b5497d-75d9-4374-a9c8-87d98bdb6d61

It will be nice, when the link "view fullscreen" is in the title bar.

Best regards and thanks already!

Webseite

Sorry for my 'bad' english, im Swiss...

[Webseite]

Hi,

It will be nice, when I can click on a link (e.g. Fullscreen) and then
it open a new window with the image.

Any ideas?

Thanks!

[MX Sport]

It's not fullscreen, it's a link to the original full size image
(which is larger than the one showing in the lightbox). When opening
it in the lightbox, the image is scaled down, and when clicking the
link to the full size, only the image is showing. If it was
fullscreen, the image would cover your entire screen (like YouTube
when clicking Fullscreen mode).

On 23 Jan, 13:56, Webseite <info.d...@gmail.com> wrote:
> Hi.
>
> I already send a email to the fancybox owners but I didn't became an
> answer.
>
> I want to zoom the pictures to fullscreen, like here:
>

> http://www.screencast.com/users/shecter/folders/Jing/media/99b5497d-7...

[Webseite]

Yeah, that's right.

But how I can open the same image in a new window, when I click on a
link in the title bar. Is there a Javascript?

> > Sorry for my 'bad' english, im Swiss...- Zitierten Text ausblenden -
>
> - Zitierten Text anzeigen -

[Webseite]

Really no ideas?

On 25 Jan., 17:23, Webseite <info.d...@gmail.com> wrote:
> Yeah, that's right.
>
> But how I can open the same image in a new window, when I click on a
> link in the title bar. Is there a Javascript?
>
> On 25 Jan., 15:09, MX Sport <p...@mx-sport.no> wrote:
>
>
>

> > It's notfullscreen, it's a link to the original full size image

> > (which is larger than the one showing in the lightbox). When opening
> > it in the lightbox, the image is scaled down, and when clicking the
> > link to the full size, only the image is showing. If it was
> >fullscreen, the image would cover your entire screen (like YouTube
> > when clickingFullscreenmode).
>
> > On 23 Jan, 13:56, Webseite <info.d...@gmail.com> wrote:
>
> > > Hi.
>
> > > I already send a email to the fancybox owners but I didn't became an
> > > answer.
>

> > > I want to zoom the pictures tofullscreen, like here:
>
> > >http://www.screencast.com/users/shecter/folders/Jing/media/99b5497d-7...
>
> > > It will be nice, when the link "viewfullscreen" is in the title bar.

>
> > > Best regards and thanks already!
>
> > > Webseite
>
> > > Sorry for my 'bad' english, im Swiss...- Zitierten Text ausblenden -
>

> > - Zitierten Text anzeigen -- Zitierten Text ausblenden -

[RavanH]

Webseite,

I'd start with customizing the title bar. There is an example on
http://fancybox.net/blog (#7) where you can basically see how it is
done.

You need to add your own function that will create a new titleFormat.
Something like:

function formatTitle(title, currentArray, currentIndex, currentOpts) {
if (title && title.length) {
if (currentOpts.titlePosition == 'float') {
return '<table id="fancybox-title-float-wrap" cellpadding="0"
cellspacing="0"><tr><td id="fancybox-title-float-left"></td><td
id="fancybox-title-float-main">' + title + '</td><td id="fancybox-
title-float-right">[ <a href="' + selectedArray[selectedIndex].href +
'">View full size</a> ]</td></tr></table>';
}
return '<div id="fancybox-title-' + currentOpts.titlePosition +
'">' + title + ' <span>[ <a href="' +
selectedArray[selectedIndex].href + '">View full size</a> ]</span></
div>';
}
}

$(".fancybox").fancybox({
'titleFormat' : formatTitle
});

Now I have not tested this at all so no guarantees here... It's just
to give you an idea :)

RavanH

P.S. If you get it working, let us know how so others can make use of
it too!

[Webseite]

You must change 'selectedArray' and 'selectedIndex' in 'currentArray'
and 'currentIndex'

Here is my code:

-----------------------------------
first javascript
-----------------------------------

function formatTitle(title, currentArray, currentIndex, currentOpts)
{

return '<span id="fancybox-title-' + currentOpts.titlePosition +
'"><table width="100%" border="0" cellspacing="0"
cellpadding="0"><tr><td class="tabelle1">' + title + '</td><td
class="tabelle2">[ <a href="' + currentArray[currentIndex].href +
'">View full size</a>]</td></tr></table></span>';
}

-----------------------------------
second javascript
-----------------------------------

$(".fancybox").fancybox({
'titleFormat' : formatTitle


});

-----------------------------------
CSS
-----------------------------------

.tabelle1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
text-align:left;
}

.tabelle2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
text-align:right;
}

.tabelle1 a:link, .tabelle1 a:visited .tabelle2 a:link, .tabelle2
a:visited {
COLOR: #FFFFFF;
}




Thank you for the help!

[Webseite]

Please, upload it in the blog-site on fancybox.net!

[RavanH]

Yep, you are right. A little careless of me: 'selectedArray' and
'selectedIndex' remained there from a copy/paste mixing two of my own
methods together. You nailed it :)

Thanks for sharing your final result. A link to the live example would
make it complete ;)

[hullamospapagaj]

Hi,

can you please upload or show me a demo site of this?

Thank you

[hullamospapagaj]

Hi,

can you please upload or show me a working demo site?

Thank you

On jan. 30, 11:24, Webseite <info.d...@gmail.com> wrote:

[Fancy Paul]

Perso, I have put this code for this exemple  here : www.formanosque.fr/catalogue/

If my screeen is under 2000px this allow to be shinked.

With CSS

#fancybox-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100% !important;

z-index: 1100;

display: none;

}

#fancybox-wrap {

position: absolute;

top: 0;

left: 0;

padding: 20px;

z-index: 1101;

outline: none;

display: none;

And HTML

<div id="cols-catalogue">

<a id='various1' href='#inline1'><div style='text-align:center;'><img src='mypict.png' border='0'></div></a>

</div>

<div style='display: none;'>

<div id='inline1' style='overflow:auto; padding:0; margin:0;'>

<center>

<object width="2000" height="800">

....

</object> 

</center>

</div>    

</div>