Fancy Zoom ... is working, but where is the overlay?

RedFox · 2009-01-23 15:46:40

OK … smd_slimbox is working with Fancy Zoom (from http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/) on this page > www.redfoxtestdrive.nl/txp/hoe-ziet-textpattern-eruit … eh … almost! The overlay doesn’t work … !? Everything is in place … eh, I think. It lookes like there is no overlay image. Or isn’t that the way this kind of thing works! Is there somebody to show me the way?

jakob · 2009-01-23 16:44:28

Do you mean the fading of the background around the image like with lightbox? If so, fancy zoom doesn’t have that.

[ If you want a nice shadow effect to distance it from the background like you see on some sites that use it, you need to make your images png-files and include the shadow as png-transparency (the standard mac screenshot does this automatically, which is why you see it on many mac sites showing program screenshots). ] – EDIT: actually I might be wrong about this. The original fancy zoom site adds a drop-shadow on its own.

Otherwise it looks fine. Is that your help site for your textpattern clients? Looks like a nice idea. I keep on writing separate task-centered help documentation for each client but it is time-consuming.

Last edited by jakob (2009-01-23 16:48:21)

Bloke · 2009-01-23 17:07:42

The js you are using (copied out of the example) has these two lines in it:

// Select all links in object with gallery ID using the defaults options
$('#gallery a').fancyzoom(); 
// Select all links with tozoom class, set the open animation time to 1000
$('a.tozoom').fancyzoom({Speed:1000});

But you don’t have any element with an ID of “gallery” on your page, nor any anchors with a ‘tozoom’ class. I doubt that is the problem (I’ve never used FZ) because those lines should just be silently ignored. But it appears that it is not adding the overlay to the <body> tag. That could be because of some failed initialization.

It could also be those couple of validation errors in your <head>? I’m not sure how picky FancyZoom is on having an error-free DOM to work on.

Last edited by Bloke (2009-01-23 17:08:37)

RedFox · 2009-01-23 17:09:43

The demo’s at http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/ ,where I got the plugin from, do show an overlay background (with opacity!) So, it is possible! I did mail them with the same question, but I haven’t got an answer yet! Btw … I took this one because of the scaling technique … larger viewport = larger image … :)

Yes, this is a site for my clients. It’s a real project I can tell you … but my clients love it! It’s a general tutorial however. For some sites I still have to make extra mails and screendumps!

[edit]
Bloke is fast!

Last edited by RedFox (2009-01-23 17:11:56)

RedFox · 2009-01-23 17:24:06

Bloke wrote:

It could also be those couple of validation errors in your <head>? I’m not sure how picky FancyZoom is on having an error-free DOM to work on.

Validation is ok now > http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.redfoxtestdrive.nl%2Ftxp%2Fhoe-ziet-textpattern-eruit … doesn’t change the overlay outcome!

[edit]
I put an ID to a surrounding object …

<div id="gallery" class="article">
<h3>Hoe ziet Textpattern eruit?</h3>
<p><strong>Even een plaatje! Het is een gedeelte van Textpattern zoals het eruit kan zien in een browservenster. In dit geval in Firefox. Zo’n afbeelding noemen we een ‘screendump’! Je kan trouwens op de afbeelding klikken voor een screendump van van het gehele venster!</strong></p>
<p><a href="http://www.redfoxtestdrive.nl/txp/images/22.jpg" rel="lightbox-smd" title=""><img src="http://www.redfoxtestdrive.nl/txp/images/22t.jpg" alt="Het algemene venster van Textpattern na het inloggen!" /></a></p>

… but it didn’t change anything either!

Last edited by RedFox (2009-01-23 17:35:20)

Bloke · 2009-01-23 19:19:18

RedFox wrote:

Validation is ok now… I put an ID to a surrounding object … but it didn’t change anything either!

Hmmm, I figured those ideas of mine were stabs in the dark, but it’s always worth trying stuff I guess! For some reason it still doesn’t appear to be inserting the overlay <div> immediately before the <body> tag. Weird, but I’m fresh out of ideas, sorry. Anyone else?

Last edited by Bloke (2009-01-23 19:19:40)

RedFox · 2009-01-23 19:46:03

Sometimes when fancyzoom is executed I see a broken image icon … a split of a second and then it’s gone. Is the overlay an image? If so, then it could be that the path isn’t correct or the image can’t be found … !?

Bloke · 2009-01-23 20:06:26

RedFox wrote:

Sometimes when fancyzoom is executed I see a broken image icon … Is the overlay an image?

I don’t think so; it looks like it’s pure CSS to me, but I’ve not delved into the code in depth. Mind you, a broken image probably isn’t a good sign, unless the broken icon is shown while the image loads in that particular browser.

Last edited by Bloke (2009-01-23 20:07:41)

joebaich · 2009-01-23 22:06:54

I had a quick look at the js you added under the jQuery plug-ins. You likely copied it from the example without realising that it includes a number of options to be used individually, not together. You don’t need it all, in fact it countermands itself. The last $("img.fancyzoom").fancyzoom(); switches off the overlay enabled by the previous line $('a').fancyzoom({overlay:0.8});, for instance.

jakob · 2009-01-23 22:15:06

Joop, sorry, I explained a lot of rubbish earlier on. I’ll try and do a little better now. Dunno if joebaich is right as the original example does exactly the same as yours.

When I look at both pages in CSSedit, the entire background of the original site is covered with a div that is attached to the body (though something is wierd as some of the background elements shine through). On your page this is not the case. Try your own site without giving the body an id (currently it says body#home) to see if it works then. Maybe it’s not attaching the div to the body because of its id?

Bloke · 2009-01-23 22:34:30

joebaich wrote:

… it includes a number of options to be used individually, not together. You don’t need it all, in fact it countermands itself.

That’s what I was trying to allude to earlier; you explained it far more succinctly and far better than me, thanks!

In this case I’m not sure if it does actually have an influence or not: anything’s possible with weird shenanigans like this. The docs claim the opacity defaults to 0.8, so that last initializer should use 0.8 as well… except it won’t fire because the selectors don’t match anything in the page.

Bottom line, as you say, use one of the methods given in the example, not all of them :-)

jakob

That’s what I couldn’t figure out. It appears it’s not injecting the overlay <div> into the DOM — it should be prepended to <body> — which implies it ain’t matching <body> :-S Validation is the usual cause (but that’s now fixed). In a perfect world, the id shouldn’t make any difference but as you rightly say, I wouldn’t rule it out.

Past that, ummmm…

RedFox · 2009-01-24 05:24:16

joebaich wrote:

The last $("img.fancyzoom").fancyzoom(); switches off the overlay enabled by the previous line $('a').fancyzoom({overlay:0.8});, for instance.

I did some tests and only two methods(!) must be in the <head> to execute the plugin rightly. And those are:

<script type="text/javascript">
$(function() {	
//Set the default directory to find the images needed
//by the plugin (closebtn.png, blank.gif, loading images ....)
$.fn.fancyzoom.defaultsOptions.imgDir='ressources/';
//very important must finish with a /
// Select all links set the overlay opacity to 80%
$('a').fancyzoom({overlay:0.8});
});
</script>

the others doesn’t matter but they doesn’t harm either if they are in the <head> too!

jakob wrote:

Try your own site without giving the body an id (currently it says body#home) to see if it works then. Maybe it’s not attaching the div to the body because of its id?

It doesn’t matter … the overlay still doesn’t appear!

BTW … thanks to all trying to help me with this irritating misbehaviour of the plugin. Someday it will do what I want. Most of these ‘problems’ will be solved in time … :)

Last edited by RedFox (2009-01-24 05:34:04)

Textpattern CMS

Textpattern CMS support forum

#1 2009-01-23 15:46:40

Fancy Zoom ... is working, but where is the overlay?

#2 2009-01-23 16:44:28

Re: Fancy Zoom ... is working, but where is the overlay?

#3 2009-01-23 17:07:42

Re: Fancy Zoom ... is working, but where is the overlay?

#4 2009-01-23 17:09:43

Re: Fancy Zoom ... is working, but where is the overlay?

#5 2009-01-23 17:24:06

Re: Fancy Zoom ... is working, but where is the overlay?

#6 2009-01-23 19:19:18

Re: Fancy Zoom ... is working, but where is the overlay?

#7 2009-01-23 19:46:03

Re: Fancy Zoom ... is working, but where is the overlay?

#8 2009-01-23 20:06:26

Re: Fancy Zoom ... is working, but where is the overlay?

#9 2009-01-23 22:06:54

Re: Fancy Zoom ... is working, but where is the overlay?

#10 2009-01-23 22:15:06

Re: Fancy Zoom ... is working, but where is the overlay?

#11 2009-01-23 22:34:30

Re: Fancy Zoom ... is working, but where is the overlay?

#12 2009-01-24 05:24:16

Re: Fancy Zoom ... is working, but where is the overlay?

Board footer