IMAGES INSIDE POP-UP WINDOWS

[verydeepwater]

I would like to make images in an Epub 3 clickable, so they open up in window containing a larger copy of the image, when viewed in iBooks. I have experimented with the coding for pop up footnotes, using the aside tag.
ie:
in the main body of the text:
<span><a epub:type="noteref" id="footnote-3091-9-backlink" class="_idFootnoteLink" href="#footnote-3091-9">
<div class="fifty">
<img src="image/family.jpg" alt="" />
</div></a></span>

and in the place of the footnote:
<div class="_idFootnotes">
<aside epub:type="footnote" id="footnote-3091-9" class="_idFootnote">
<p class="footnote"><a class="_idFootnoteAnchor" href="#footnote-3091-9-backlink"></a><div class="hundred">
<img src="image/family.jpg" alt="" />
</div></p>
</aside>
</div>

This works in producing copy of the image within pop-up window, but the image and window are the same size as the original in the text. The window also has scroll bars.
My question is how do you adjust the size of the pop-up window and get rid of the scroll bars? Or is there a better way of doing this?

[Tex2002ans]

Originally Posted by verydeepwater

Or is there a better way of doing this?

This is something best left to the reading programs themselves, and NOT trying to come up with some incredibly hackish code that will most likely break in a future update (and if the book was read in anything OTHER than that specific version of iBooks you are coding for).

Many of the reading devices/programs nowadays allow you to click on an image and get a full-sized version of it already.

[verydeepwater]

This is not what I was referring to. Instead of the image opening up full screen if tapped, as is normal, the desired effect is for the pop-up window to appear as a smaller window within the existing one, like a bubble. You can get this effect with pop-up footnotes in EPUB-3 (using a variation of above coding as recommended by Apple) when using iBooks reader.

[carlosanima3d]

Hi verydeepwater,

Did you find a way to the image pop-up for the epub?
I am also interested in doing it for the kindle format.

Any help would be greatly appreciated.

Thanks

JC

[mattmc]

Originally Posted by verydeepwater

This is not what I was referring to. Instead of the image opening up full screen if tapped, as is normal, the desired effect is for the pop-up window to appear as a smaller window within the existing one, like a bubble. You can get this effect with pop-up footnotes in EPUB-3 (using a variation of above coding as recommended by Apple) when using iBooks reader.

So, you want the popover (it's called a popover) to contain a larger, or smaller version of the image? A popover will contain a smaller version. If you want a larger version, the person double-taps the image in the text, and it goes fullscreen. There's no way to change the size of the popover.

Originally Posted by carlosanima3d

Hi verydeepwater,

Did you find a way to the image pop-up for the epub?
I am also interested in doing it for the kindle format.

Any help would be greatly appreciated.

Thanks

JC

Not possible AFAIK, sorry.

[Turtle91]

I haven't tried it, but can you embed an image in an SVG wrapper in the popover?

With the correct settings the SVG wrapper would auto shrink/expand the embedded image to fill the container.

[verydeepwater]

The pop-up code using the aside tag works for iBooks, and Gitden on Android. It does not work on kindle. I have also used this code to pop-up an image in its own window (not full screen). For example, in fixed layout epubs you can make an enlarged version of part of the background pop up.

Originally Posted by carlosanima3d

Hi verydeepwater,

Did you find a way to the image pop-up for the epub?
I am also interested in doing it for the kindle format.

Any help would be greatly appreciated.

Thanks

JC

[HarryT]

That's right; on the Kindle, a pop-up footnote gets any images it contains stripped out. You do of course see the image if you tap the link on the footnote to display it full-page.

[DiapDealer]

Regardless of the window size, a popover image is always going to block a large portion of the original page (even on a 10" tablet) anyway. As such, I see absolutely no advantage in creating an image popover less than full screen size--which most renderers already do inherently (including pan/zoom control).

[Turtle91]

While I tend to agree, Diap, I can think of a couple reasons why you'd want an image like that. e.g. a large map in the main screen with a list of locations below. A tap on the location would display a pop-up with an image of that location zoomed in - rather than just enlarging the original image.

Also, the OP's question was: "... how do you adjust the size of the pop-up window and get rid of the scroll bars?"
So adjusting the window size and having an image fill the smaller window could be useful, depending on what the OP wanted to do with it.

Now that Marvin 3 supports ePub3, I'll have to start playing around with some of these functions to see what I like!

[DiapDealer]

Originally Posted by Turtle91

A tap on the location would display a pop-up with an image of that location zoomed in - rather than just enlarging the original image.

In that case, wouldn't the "already zoomed in" part be the sole feature? Whether it was full-screen or not wouldn't really be relevant in my opinion. I still see no reason/advantage for a popover image that is a little bigger than the original, but still not full-screen. What would that in-between-size gain anyone? The background is still unusable whether you can see portions of it behind the popover or not.

But hey ... as long as I don't end up buying books that have hackish code that only works on certain devices/apps (and breaks my reader of choice's inherent image-zooming ability), I'm all for experimentation.