Background-size wrong when fadeing image

[cvdeeden]

Hi Jack,

I have managed to combine a fancybox css (no jquery) and html with your wheelzoom, which works perfectly when I have the div/image on display: block; (so visible).

Except, when I add a jQuery function to fadeIn the div/image, the wheelzoom doesn't get the right background-size which makes it 100px width and that isn't correct.

Please check http://office.prelicious.nl/builds/test/demo/ with the working file And please check http://www.quintystexel.nl/eten-drinken for the broken file, click on the first image ('Quinty's Lunch')

Do you know the problem? I seriously can't find it :( The only thing I've changed is, I made the div invisble (the overlay) and added a jQuery function to make it fade in when it's being triggered.

I've added some attachments, maybe you can find the problem there.

I've also chagned this line:

backgroundSize: width+'px '+height+'px',

To this (to match my fancybox css, this gives NO problems at all - this is not important but just so you know I've changed it):

backgroundSize: width+'px 100%',

I hope you can help me

[jackmoore]

Hi,

I just looked at your page briefly, but I don't understand why you have so much fancybox markup in your DOM. I think you are making this way more complicated than it needs to be.

Why don't you get rid of all that markup and assign fancybox to an anchor that points to the image file. Then assign the zoom plugin to .fancybox-image using fancybox's onComplete function? I've done this with Colorbox and it seems to work fine.

[cvdeeden]

Hi Jack,

I have tried that before with an iframe but that worked though, except The width and height were static instead of adjusting themselfs to The fancybox

Isnt there any solution for this? Otherwise of you have ? colorbox with zoom example i. Can try that but i really like fancybox

Though i Use so Much Markup because im still working on it but cant go any further because of The zoom

I Wanna try the oncomplete you Said, have any example? I know the function but dont know how to assign the zoom within that oncomplete

---

Met vriendelijke groet, Chlo? van den Eeden

PRELICIOUS

Op 18 okt. 2013 om 19:36 heeft "Jack Moore" notifications@github.com<mailto:notifications@github.com> het volgende geschreven:

Hi,

I just looked at your page briefly, but I don't understand why you have so much fancybox markup in your DOM. I think you are making this way more complicated than it needs to be.

Why don't you get rid of all that markup and assign fancybox to an anchor that points to the image file. Then assign the zoom plugin to .fancybox-image using fancybox's onComplete function? I've done this with Colorbox and it seems to work fine.

Reply to this email directly or view it on GitHubhttps://github.com/jackmoore/wheelzoom/issues/2#issuecomment-26614677.

[jackmoore]

I assume it would be something like this.

$('a.example').fancybox({onComplete:function(){ 
    $('.fancy-image').wheelzoom(); 
}});

Where your anchor elements are setup like this:

<a href='fullsizeimage.jpg' class='example'><img src='thumbnail.jpg'/></a>

[cvdeeden]

Well I’ve used your colorbox now, works better for me ☺ Fancybox apaerantly has some issues with onComplete and stuff so I decided to take your colorbox

It works, just one question: How can I turn on the autoscale ? My photo is like this now: http://s.prelicio.us/13214402.png

That’s a bit large hehe

Met vriendelijke groet, Chloë van den Eeden

[PRELICIOUS]

T: 06-39207532 E: info@prelicious.nlmailto:info@prelicious.nl W: www.prelicious.nlhttp://www.prelicious.nl

Narvikweg 9b 9723 TV GRONINGEN

KVK: 57243417 te Groningen BTW: NL218026961B01

Van: Jack Moore [mailto:notifications@github.com] Verzonden: vrijdag 18 oktober 2013 21:02 Aan: jackmoore/wheelzoom CC: PRELICIOUS | Algemeen en informatie Onderwerp: Re: [wheelzoom] Background-size wrong when fadeing image (#2)

I assume it would be something like this.

$('a.example').fancybox({onComplete:function(){

$('.fancy-image').wheelzoom();

}});

Where your anchor elements are setup like this:

— Reply to this email directly or view it on GitHubhttps://github.com/jackmoore/wheelzoom/issues/2#issuecomment-26621239.

[jackmoore]

The image will be automatically scaled to fit within Colorbox, so use either the width/height or maxWidth/maxHeight to set a fixed size, or a percent size (with 100% being the size of the viewport) for Colorbox. For example:

$('a.example').colorbox({maxHeight:'80%'});

[cvdeeden]

Thanks, you’re my hero! ☺

Thank you for the help, everything is done now. Have a good weekend!!

Met vriendelijke groet, Chloë van den Eeden

[PRELICIOUS]

T: 06-39207532 E: info@prelicious.nlmailto:info@prelicious.nl W: www.prelicious.nlhttp://www.prelicious.nl

Narvikweg 9b 9723 TV GRONINGEN

KVK: 57243417 te Groningen BTW: NL218026961B01

Van: Jack Moore [mailto:notifications@github.com] Verzonden: vrijdag 18 oktober 2013 21:50 Aan: jackmoore/wheelzoom CC: PRELICIOUS | Algemeen en informatie Onderwerp: Re: [wheelzoom] Background-size wrong when fadeing image (#2)

The image will be automatically scaled to fit within Colorbox, so use either the width/height or maxWidth/maxHeight to set a fixed size, or a percent size (with 100% being the size of the viewport) for Colorbox. For example:

$('a.example').colorbox({maxHeight:'80%'});

— Reply to this email directly or view it on GitHubhttps://github.com/jackmoore/wheelzoom/issues/2#issuecomment-26624516.

[cvdeeden]

Ok last question :X sorry Ive put it online, now I get some error, do you know why?

Ive just copied it

http://www.quintystexel.nl/eten-drinken

1. Uncaught TypeError: Object [object Object] has no method 'colorbox' eten-drinken:150http://www.quintystexel.nl/eten-drinken

Met vriendelijke groet, Chloë van den Eeden

[PRELICIOUS]

T: 06-39207532 E: info@prelicious.nlmailto:info@prelicious.nl W: www.prelicious.nlhttp://www.prelicious.nl

Narvikweg 9b 9723 TV GRONINGEN

KVK: 57243417 te Groningen BTW: NL218026961B01

Van: Jack Moore [mailto:notifications@github.com] Verzonden: vrijdag 18 oktober 2013 21:50 Aan: jackmoore/wheelzoom CC: PRELICIOUS | Algemeen en informatie Onderwerp: Re: [wheelzoom] Background-size wrong when fadeing image (#2)

The image will be automatically scaled to fit within Colorbox, so use either the width/height or maxWidth/maxHeight to set a fixed size, or a percent size (with 100% being the size of the viewport) for Colorbox. For example:

$('a.example').colorbox({maxHeight:'80%'});

— Reply to this email directly or view it on GitHubhttps://github.com/jackmoore/wheelzoom/issues/2#issuecomment-26624516.

[jackmoore]

It's because you used a link element instead of a script tag to include Colorbox's script. From your page:

<link rel="stylesheet" href="http://www.zzmijnsimpelcms.nl/shared/fancyzoom/jquery.colorbox.js" />

Should be:

<script src="http://www.zzmijnsimpelcms.nl/shared/fancyzoom/jquery.colorbox.js"></script>

[cvdeeden]

I guess I’m really that stupid if I didn’t see that lol

Thanks (for the last time, sorry to bother you)

Met vriendelijke groet, Chloë van den Eeden

[PRELICIOUS]

T: 06-39207532 E: info@prelicious.nlmailto:info@prelicious.nl W: www.prelicious.nlhttp://www.prelicious.nl

Narvikweg 9b 9723 TV GRONINGEN

KVK: 57243417 te Groningen BTW: NL218026961B01

Van: Jack Moore [mailto:notifications@github.com] Verzonden: vrijdag 18 oktober 2013 22:26 Aan: jackmoore/wheelzoom CC: PRELICIOUS | Algemeen en informatie Onderwerp: Re: [wheelzoom] Background-size wrong when fadeing image (#2)

It's because you used a link element instead of a script tag to include Colorbox's script. From your page:

Should be:

— Reply to this email directly or view it on GitHubhttps://github.com/jackmoore/wheelzoom/issues/2#issuecomment-26627042.