HTML Widget zooming effect

Hi,
I am trying to make my HTML Widgets in my iBooks Author book to being fired up when user taps on a small button in the side of the book.
For that sake, I place my widget first, then I drag my small button graphic to the widget area so it becomes the poster image of it.
Problem is that when I test my book and I tap on the button, there's always a "zooming effect" of the button prior to execute the Widget itself, that enlarges the little png for a little while, so it shows the big pixel jagged image. I don't like this effect, is there any way to get rid of it?
Thank you,
Ignacio

I am just using finally this workaround:
1) Place the HTML widget as usual, but without poster image, nor Title, Background... so it is sort of a "transparent hot spot" in the book
2) I draw a figure with text inside, as a button, and organize it so it lies below this transparent widget
When I run the book in the iPad, I see a crisp, clear button that I cap tap and the Widget plays at full screen without that annoying jagged PNG zoomed in.
Same thing if you use an image button rather than a figure.
Greetings,
Ignacio

Similar Messages

How do I create a magnifying glass zoom effect?

I'm building an image 'showcase of work' website site. Each html page features a selection of thumbnails on one side linked to a main image on the other. I am trying to find out how to create something like a zoom effect 'magnifying glass' so that the user can hover over the main image to zoom in within a confined circle or square in more detail, which moves with the mouse whilst hovering over the image. I'm sure you all know what I mean! (just in case, please see attached html file showing the page layout) (I also don't want to get too techy/over complicate things as I'm learning as I go). I want to be able to use this feature throughout the site, therefore, I guess it's another CSS rule that I need to apply...?
I'm hoping someone can point me in the right direction to find some sort of step by step 'how to' do this. I can't seem to find just what I'm looking for... maybe I'm not calling it by the right terminology!
I'm currently using Design Premium CS4 (predominantly Dreamweaver, Photoshop and a little Flash)
Cheers....

Hi
Magiczoom and lightbox are used for showing enlarged versions of images etc. similar to using a separate pop-up window (but without the annoyance of pop-up windows).
Anythingzoomer is a magnifying glass effect and works as such.
PZ

Is this possible to load HTML Widget to CS4 like CS5

Hi Everyone!
I have used Photoshop CS4 & CS5. I have created one CS5 Extensions Panel using HTML Widget from Adobe Configurator II .
In Photoshop CS5 Extensions Panel HTML widget shows Image & Text in HTML window.
Hence Is this possible to use HTML Widget in Photoshop CS4 or How to Load HTML file in Photoshop CS4 to Extensions Panel.
Thanks in advance.
-yajiv

Not exactly sure how you where planning to display that HTML content in relation to the overall page, but given the limitations of Flash... that may just not be possible...
But, it would be a simple matter to display an HTML iframe over the top of or behind a Flash .swf... So while the iframe would not be a part of the .swf, it certainly could be designed to make it look as though it were.
Controling the stacking order or layering of content on a Web page is accomplished through z-indexing. Correctly positioned and z-indexed, the iframe could apear over the top of the .swf... the .swf in effect being the background... OR the iframe could appear behind the .swf and with a transparent section in the .swf, the iframe would appear through that hole. If there is navigation or links in the iframe, they will be blocked by the .swf though.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
But this may be an option....
Best wishes,
Adninjastrator

Is there a way to create a pan and zoom effect in a lightroom slideshow?

Is there a way to create a pan and zoom effect in a lightroom slideshow?

Nope. Be a great feature. For that I use FotoMagico after exporting JPEG's from LR.

How do I reset the furthest page read in iBooks from an HTML Widget?

Our training department just got a bunch of iPads and I'm writing some custom HTML widgets for iBooks for them for testing, in-class activities, etc.
On the last page I have a link to clear all the forms and return to the first page. Like this: <a href="ibooks:///#page(1)">Click here</a>
That all works fine but the next time the book is opened it auto-syncs to the FURTHEST page read (the last page with the test on it) instead of the LAST page read (the first page- from the link mentioned above).
Basically we want the link to reset the furthest page read to the first page of the book when they finish the test so that the next person to use the iPad goes to page one automatically.
Does anyone have an idea of how to do something like completely clear the iBook cache?
Much obliged!

This was hand-coded HTML, CSS, jQuery/Javascript with a PHP file on our server that processes answers and emails them to our training director.
I use Brackets exclusively for coding.
Hope this helps you.

Animated .gif not supported inside HTML widget ?

iBooks author reject my HTML widget when there is animated .gif inside,
are gif not supported ?
somebody can confirm ?
and whatthe workaround to have an animated picture inside my HTML Widget,
seems Animated png are not spported too ...
Thanks for reply
daxx

Seem to be unsupported, sorry.
See this thread:
Re: I can't seem to get my GIF files on iBook. Anyone else having this problem?
Try a simple movie in a media widget or keynote slideshow widget instead.

Why do I get a white screen in a HTML widget once it has loaded?

I have created some HTML which works fine in Safari but as soon as I make it a widget it loads fine with the Default image on screen and then it just goes white with nothing more than a x in the top left corner. Any ideas what I a might be doing wrong. I have an info.plist directing to the html, a Default.png which works as it appears as loading but the page just will not display.
Any ideas very welcome.
THanks

Without seeing exactly what you have, troubleshooting is difficult.
You could try here iBooks Author: About HTML widget creation for more guidance. I became unstuck once when I made some HTML in Dreamweaver, but forgot to set the Doctype as the HTML5 one.
You could also look at this https://github.com/TrevorBurnham/iBooks-HTML-Widget-Boilerplate

Html Widget Crashes. How to load only one html widget at a time?

I have a bunch of html widgets which are just tab navigators with html pages inside of them. I must have about 20 of them , mostly leading to google image searches for common searches I tend to do in my work. Instead of constantly searching for these things on google I just click on the tab with the google search for say..."tree images". Its very fast and effecient for me.
The problem is now I have so many that it crashes photoshop, or crashes adobe configurator most of the time if I try to open the panel file. Im guessing that the panel I made tries to load all 20 google image searches at once, instead of only loading the page I click on one at a time. Is there anyway to stop configurator from loading my html widgets that arent clicked on ?

Anyone?

Cannot see zoom effect

After setting up a zoom on a still image it looks fine when using "play output" in the pan/zoom tool preview window but when I return to the timeline view and play that clip it doesn't display properly. Instead it shows the initial frame with something looking like the zoom effect going on behind it.
Can I not view the actual zoom effect for a clip after setting it up and returning to the timeline view? I will be grateful for any insight.
Still image is a .psd 1613 x 1080 in a project that is HD 1080i 1920 x 1080 (so the still image has black bars at both sides--which is the way I want it)
OS: Windows 7 Ultimate x64

Thank you to all three of you (Steve, Vipul, Bill) who took the time to answer and make suggestions.
I have uploaded two videos showing : 1) view in effect preview window and 2) view in timeline.
However, I think I may have done something wrong to begin with because when I created a new project and used the same source psd file to do the same kind of zoom effect it displayed perfectly both in the effect preview window and in the timeline.
Accordingly, because I can do what I want to do--get the proper zoom effect--I'm not going mess around with that original clip anymore.
What I did wrong with the original clip, I don't know, but I think that perhaps I was trying to make the orginal clip too short and that messed up the program. The new project clip with zoom that I created was a few seconds long.

The images in my html widget look blurry!

Hey there, I'm making some html widgets for my book using HYPE. When I insert this into the ibooks the program shows the preview image in crisp high quality but when I preview it on the iBook, the figure looks somewhat blurred. When I tap on the figure to enlarge it and make it interactive, everything looks fine and crisp, it's only the preview window before it's enlarged that doesn't looks so good. I even tried replacing the preview with a separate picture and previewing that but whatever I do, the preview just doesn't look sharp. Does anyone have any solutions I can try?
Thanks,
Caleb

Blurry preview icon for HTML widget
The best way to handle this issue is to make the preview icon transparent and place it over your own custom reference graphic on the page.
1- Place on the page the graphic you will be using as the reference icon for the widget
2- Place your widget on top of the custom graphic icon. Make sure it is in "Front". Also make the preview icon is as small as possible.
3- Click on the preview icon TWICE and make its transparency "0". If you only click the preview icon once the Transparency slider will not become active.
4- Now, when you preview the book, your Widget Link will open your custom HTML Widget and both will display at full resolution.
A bonus result of doing this... Since your link is transparent you can make it as large as needed to make it a large enough touch target.

Custom close / exit button in HTML widget

Hi,
how to set a custom close / exit button in a HTML widget for iBooks Author? I want to replace or hide the standard button in the top left corner.
I already tried some JavaScript but nothing seems to work so far. Where can this button be modified or disabled and how to create a custom one?
Best regards

Hi Ken,
thanks for your reply.
It's good to hear that this button can be changed.
It would be interesting to know how this can be achieved. Any hints?
Best regards

Need to wrap text around HTML widget

Hi,
I'm making a site with pages that contain lots of text and images to go along with the text next to it. The person hosting the site however says that all photos need to be linked through photobucket due to space,so I need to use HTML widgets for the photos, and i want it hosting on this site as opposed to .me. I know that you can wrap text around inserting images from your own computer and you can't wrap it around a widget, so at the moment i've inserted boxes into the text and put the widgets over the boxes but when viewed in a browser everything is out of place.
Is there any other solution? there really should be.
Cheers,
Tom

There is a way to lock the text so that it will appear the same in all browsers regardless of font or platform: apply a drop shadow with 6% opacity to the font which will convert it to an image. When you do you'll see this icon on the text box:
Click to view full size
To see the image indicator you'll have to select the checkbox "Show text imaging indicator" in iWeb's preferences:
Click to view full size
There is a downside to this in that having addition image files on the page can add to the loading time. That may or may not be an issue but if it is you can always remove the drop shadow.
NOTE: The text appears to be 13 pt Lucida Grande which is pretty small and difficult to read IMO. Using Times New Roman 14, a serf font, takes up about the same amount of room and, IMO, is much easier to read. Just a though.
Message was edited by: Old Toad

How to reset an iBooks Author Html Widget?

Hi folks!
I'm using with great pleasure Adobe Edge Animate 1.0 to make Html Widgets for Apple iBooks Author!
In a composition, I've defined this variable:
var track1 = new Audio();
        track1.src = "media/track1.m4a";
        track1.volume = 0.5;
and made it play:
track1.play();
All it works but...what if I want that - when I go out from the widget on iBooks on iPad - the track pauses?
I've coded this in my index.html file inside the widget:
    widget.pauseAudioVisual = function() {
// do this when closing Widget
$.Edge.getComposition(EDGE-114545384).getStage();
track1.pause();
widget.didEnterWidgetMode = function() {
// do this when entering widget
$.Edge.getComposition(EDGE-114545384).getStage();
track1.pause();
... but when I go out form widget the track still plays on....
Any hint?
Many thanks in advance!
Davide

I suspect the file is corrupted in some form.
Which could be a few keystrokes away from fixing or days of BS&T, sorry. There's no way to know, especially from here.
If you're handy with a text editor, crack into the xml and compare it to a behaving file to see if you can spot the issue(s). Or, do the same and carefully graft sections from it to a new file until you manage to manually rebuild.
In the end, tho, I think your time at this point is best spent simply redoing from scratch. If you have further questions, please start your own, unique thread so you can better track, close if solved, etc.
And again, to everyone....if your work has value, be sure to have a tested and reliable backup in place at all times.
Good luck.

How to use Dashcode to make HTML Widgets in iBooks Author?

I'm writing books on iBooks Author, and I got a problem:
I wanna add some HTML Widgets to my books, and I was told I should use Dashcode to make them. So I downloaded the Xcode, but I don't know how to open the Dashcode on my Mac. I really hope someone could give me some lessons, I would be very grateful!

Start here: iBooks Author: About HTML widget creation

Html widget for "ibooks author"

Hi,
I there a possibility to create a contact form in html to add to the html widget of "ibooks author" with an Adobe product?

Hi,
With Adobe FormsCentral, you can embed the HTML form into a HTML page.
Please check this document and see if the information/fuctionality described will work for you:
http://forums.adobe.com/docs/DOC-1991
Thanks,
Lucia

HTML Widget zooming effect

Similar Messages

Maybe you are looking for