iUI and FancyZoom

18 views
Skip to first unread message

Charles Hourtoule

unread,
Dec 7, 2009, 1:46:03 PM12/7/09
to iphone...@googlegroups.com
Hello there,

I would like to use the FancyZoom javascript (to zoom in images with a Mac OS X style) with my iUI webapp, it would totally fit with the iPhone.
But the issue is that it doesn't work, and I have no clue why.

The script is available here: http://www.cabel.name/2008/02/fancyzoom-10.html

I followed all the steps to install it but it doesn't worked, I guess this is because of iUI, someone can tell me how I can make it work?

Here is what firebug can tell me in the console: http://img687.imageshack.us/img687/2897/bugiuifancyzoom.png
I've double checked the image exist, and works well when I go to the link without javascript.

Would be great if someone have an idea, thanks!

Charles

(Message also posted on http://code.google.com/p/iui/issues/detail?id=199)

Sean Gilligan

unread,
Dec 7, 2009, 3:27:57 PM12/7/09
to iphone...@googlegroups.com
Charles Hourtoule wrote:
> I would like to use the FancyZoom javascript (to zoom in images with a
> Mac OS X style) with my iUI webapp, it would totally fit with the iPhone.
> But the issue is that it doesn't work, and I have no clue why.
>
> The script is available here:
> http://www.cabel.name/2008/02/fancyzoom-10.html
>
> I followed all the steps to install it but it doesn't worked, I guess
> this is because of iUI, someone can tell me how I can make it work?
>
> Here is what firebug can tell me in the console:
> http://img687.imageshack.us/img687/2897/bugiuifancyzoom.png
> I've double checked the image exist, and works well when I go to the
> link without javascript.
>
> Would be great if someone have an idea, thanks!

Try adding target="_fastzoom" or target="_ignore" to the <a> tag with
the href that points to the full image. That should stop iUI from
trying to load the image via AJAX.

-- Sean

Charles Hourtoule

unread,
Dec 7, 2009, 3:46:15 PM12/7/09
to iphone...@googlegroups.com
I've just tried to do that, now this is going to the image but without any javascript effect.

I'll try to manually put the divs containing the image:

<div id="ZoomBox">
<a href="javascript:zoomOut();"><img src="/images/spacer.gif" id="ZoomImage" border="0"></a> <!-- THE IMAGE -->
<div id="ZoomClose">
<a href="javascript:zoomOut();"><img src="/images/closebox.png" width="30" height="30" border="0"></a>
</div>
</div>

I'll let you know.

Thanks,
--
Charles

Charles Hourtoule

unread,
Dec 7, 2009, 4:44:57 PM12/7/09
to iphone...@googlegroups.com
Still doesn't work, no javascript at all is executed. I've also tried adding /onload="setupZoom()"/ in the div of the page containing the image (normally located in the body tag), didn't work.

--
Charles

Charles Hourtoule

unread,
Dec 7, 2009, 5:06:49 PM12/7/09
to iphone...@googlegroups.com
I think I may have a idea. When I put onload="alert('ok!')" in the div tag that contain my page (with the image), it doesn't do anything.
What can I do to make it work? I think that can make the script work if we solve this. That would be awesome :-)

Thanks,

--
Charles

Sean Gilligan

unread,
Dec 7, 2009, 5:35:56 PM12/7/09
to iphone...@googlegroups.com
Charles Hourtoule wrote:
>
> >
> > Still doesn't work, no javascript at all is executed. I've also tried
> > adding /onload="setupZoom()"/ in the div of the page containing the
> > image (normally located in the body tag), didn't work.
> >
>
> I think I may have a idea. When I put onload="alert('ok!')" in the div
> tag that contain my page (with the image), it doesn't do anything.
> What can I do to make it work?

It sounds like you are trying to load Javascript along with an Ajax page
fragment. Search this list and/or the iUI issues database for solutions.

-- Sean

George Bontas

unread,
Dec 15, 2009, 5:50:21 AM12/15/09
to iphone...@googlegroups.com
Hi,

Have you solved the issues! I fell the same as you at the beginning. Nothing works.. even the demo is broken!!!

Regards

2009/12/8 Charles Hourtoule <cha...@cableorganizer.com>

--

You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
To post to this group, send email to iphone...@googlegroups.com.
To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.

Charles Hourtoule

unread,
Dec 16, 2009, 12:21:28 PM12/16/09
to iphone...@googlegroups.com
Hi George,

No it didn't work, I tried with some hacks but I never managed to make it work properly.
That's a pity cause it would be perfect in a web-app. I'm sure there is a way to make it work though, but I might not be strong enough ;-)

Regards,

Charles


On Dec 15, 5:50 am, George Bontas <bontasgeo...@gmail.com> wrote:
> Hi,
>
> Have you solved the issues! I fell the same as you at the beginning. Nothing
> works.. even the demo is broken!!!
>
> Regards
>
> 2009/12/8 Charles Hourtoule <char...@cableorganizer.com>
>
>
>
>
>
> > On Dec 7, 4:44 pm, Charles Hourtoule <char...@cableorganizer.com><char...@cableorganizer.com>wrote:
> > > On Dec 7, 3:46 pm, Charles Hourtoule <char...@cableorganizer.com><char...@cableorganizer.com>wrote:
>
> > > >  On Dec 7, 3:27 pm, Sean Gilligan <msgilli...@gmail.com><msgilli...@gmail.com>wrote:

Sean Gilligan

unread,
Dec 16, 2009, 1:01:06 PM12/16/09
to iphone...@googlegroups.com
You'd be surprised how much better help you get on this list if you
actually post a link to your work in progress (better still with an
easily downloaded source .zip)

-- Sean
> iphonewebdev...@googlegroups.com.

Sean Gilligan

unread,
Dec 16, 2009, 6:57:39 PM12/16/09
to iphone...@googlegroups.com
Sean Gilligan wrote:
> You'd be surprised how much better help you get on this list if you
> actually post a link to your work in progress (better still with an
> easily downloaded source .zip)

p.s. I just saw my post and in retrospect it sounds kind of snarky. I
don't mean to be. I'm truly amazed at how much specific help folks on
this list have received when the post a link to a page/site that is
having a problem.

If your project is confidential, but you are having basic problem with
Safari/WebKit/iUI/PHP/Whatever you should be able to create a simple
reduction that demonstrates the issue and post that.

-- Sean

Charles Hourtoule

unread,
Dec 17, 2009, 10:19:06 AM12/17/09
to iphone...@googlegroups.com
Yeah I see what you mean and I totally agree with that.
The thing is that I didn't save the changes I've made (it didn't work and I didn't realize I could share my failure lol).

Anyway this was not big changes, I tried to get rid of the dynamic generation of HTML (the insertZoomHTML() function in FancyZoomHTML.js) by directly adding the div box for the image:

// ZOOM IMAGE

<div id="ZoomBox">
<a href="javascript:zoomOut();"><img src="/images/spacer.gif" id="ZoomImage" border="0"></a> <!-- THE IMAGE -->
<div id="ZoomClose">
<a href="javascript:zoomOut();"><img src="/images/closebox.png" width="30" height="30" border="0"></a>
</div>
</div>

Then I tried to call setupZoom() inside the page fragment, where the images are, but it didn't work.
setupZoom() is supposed to be in the OnLoad event of the <body> tag, this function call prepZooms() that will replace all <a href> that redirect to an image with a new OnClck event).

I think that's all I've done :)

Regards,

Charles
Message has been deleted

ltlfrari

unread,
Dec 18, 2009, 3:40:14 PM12/18/09
to iPhoneWebDev
Not sure if this will work but might be worth a try.

From what I understand you need to execute the setupZoom function
'each' time you get a new page from the back end.

First off, you need to include the fancyZoom javascripts in the head
of the initial page you send to the device, ie the same place as you
specify the iui scripts etc.
If you have images in the initial page you want to zoom enable, call
the setupZoom function after the inital page loads. This only works
for the initial page load because after that iUI is obtaining the data
via Ajax and inserting the results into the DOM itself so any
javascript never gets execute.

What you need to do (I think) is capture the new page load event and
invoke the setupZoom function again. I don't know if executing
setupzoom multiple time will cause any problems though, something to
experiment with.

What I have done is to add this code as a script to my main page head
section so that it executes when the page loads, it sets up an event
listenr to capture the 'aftertransition' (iUI 0.40) event and use that
to execute some javascript (like this in your case):

addEventListener("aftertransition", function(event)
{
if (event.out == false) {

setupZoom();

}
}

Each time you go to a new page (external from a server OR internal
bookmarked page) it will run the setupZoom function after the new page
is displayed. you could change the vent.out == false to vent.out ==
true to do that on the old page out event instead.

Like I say, I have no idea if executing setupZoom multiple times is a
bad thing or not.

Hope that helps

Dave E

Charles H

unread,
Dec 21, 2009, 10:10:19 AM12/21/09
to iPhoneWebDev
Thanks Dave, I'll look into that and let you know if it worked.

Regards,

Charles

Charles H

unread,
Dec 21, 2009, 1:56:05 PM12/21/09
to iPhoneWebDev
I finally make it worked !

Here is what I had to do:

1/ First, as you said, we have to load setupZoom() every time a new
page loads (Ajax), so I added a call to setupZoom() in the slideDone()
function (iui.js).

Then it didn't worked yet, because the setupZoom() will append the
zoombox just after the body tag, which was an issue because it was
hidden by the toolbar or something else.

2/ So I had to change a little thing in the insertZoomHTML() function,
which is located in FancyZoomHTML.js :
Line 12:
var inBody = document.getElementsByTagName("body").item(0);
by
var inBody = document.getElementsByTagName("div").item(0);

In order to append the zoombox after the div, instead of the body tag.

And it worked!!! ;-)
Now I just have to customize the zoombox to make it larger (because it
doesn't zoom very larger).

Thanks,

Charles

Reply all
Reply to author
Forward
0 new messages