Embedding videos or slideshows per page

[closdesign]

Is there a way to embed YouTube or Vimeo videos into the pages? Is it a simple HTML change, hotspot area? Would be awesome for that feature too.

Thanks.

[fi-blake-carroll]

Hi Carlos,

Thanks for your interest in the magazine web app. I checked into your questions have some responses and a tablet fix for you:

Is there a way to embed YouTube or Vimeo videos into the pages? Is it a simple HTML change, hotspot area? Would be awesome for that feature too.

Yes, but you might have to toggle the appearance of any kind of iframe embed since it won't receive input while the iframe is covering the pages. We did this on the dev teardown page for the original site this was designed for: http://glimpse-ie.thefind.com/glimpse (youtube embed on page 2) http://glimpse-ie.thefind.com/magazine/teardown2

Inside the pages we used a couple links to simulate the play button with a fake youtube background. The video is embedded onto of the player on click, and removed when you turn the page (though you can't curl the page corner this way so you need to use the button or keyboard arrows).

We have tested the magazine interactive on tablets and desktops and it works for the most part on iPad and somewhat on Android tablets. Looks like it works great on the a Windows 8 tablet or a tablet running Windows 8 (pretty pumped for that to come out). The only thing we saw was that on iPads, the hotspots don't highlight the hotspots if you are in "Spread Mode" and Android tablets (tested on Motorola Xoom with Android 4.0 (Ice Cream Sandwich) and Samsung Galaxy tablet running the same OS) tends to be very sluggish and jumpy.

On both Android tablets and iPads, they both don't load the hotspots indicators on the page unless you click on the #catalogue it self.

We would like to hit as much of our customer base as possible and any enhancements or code suggestions would be greatly appreciated.

I know that the project is in conjunction with Microsoft. (We are a Microsoft shop) . Excellent company. If possible, could there me enhancements for the latest Android OS and iPads for a wider user base? Just a suggestion that is all.

Good catch! The version on github split off from the one you see on the glimpse page near the end of development and there was some leftover code specific to the glimpse page that didn't get removed preventing the highlights from showing. I just pushed an update that should fix that.

As for the performance on other tablets there might be some low hanging fruit enhancements possible with adding -webkit-backface-visibility:hidden or the -webkit-transform:translate3d(0,0,0) approach to elements within the catalogue (turn.js also provides an "acceleration" option which uses translate3d as well). We went back and forth with these during development because of a rendering issue that cropped up with them briefly around Chrome 19 (though it got fixed pretty quickly so it should be safe to use again).

The behavior on tablets vs desktops changed a bit for the glimpse site so I believe the magazine on github is using some slightly older logic, but it's fairly close. I think the reasoning behind most of the changes was that users were doing a lot more browsing of the actual pages than individual products so having hotspots always appear (especially on pages that were hotspot heavy) was distracting. Most of the logic for when hotspots are visible can be found in the productHotspots.js file and some events being triggered elsewhere (mostly in the spread/fullscreen views).

We were wondering about a zoom feature for the magazine and if that could be added as a feature. Either zoom the whole catalog and allow the user to drag around within the spread, or zoom per page and scroll up and down the page. This would be an excellent addition. We are testing it with out magazine that tends to have smaller text, and a zoom would be greatly appreciated, particularly on a desktop. We know we can take out the tag to enable zooming on tablets via the 2 finger pinch, but there is not a way, that we see anyways, to zoom the magazine.

The zoom can be enabled, but this might be difficult to achieve without making the catalogue itself a fixed size. The turn.js component needs to manually resized (see resizeCatalogue() in spreadView.js). The turn.js call in particular is $catalogue.turn('size', newWidth, newHeight);

Since the width can change in different viewing modes it listens for size changes on an interval, but that logic could be modified to accommodate zooming. It might be a bit of an undertaking to achieve since a lot of the site is setup with overflow:hidden trying to just maximize the catalogue size. Probably the best place to start would be to make some modifications to the fullscreen view mode to allow the catalogue to appear in a scrollable container, and switching the resize logic in that mode to be either manually driven by a spread gesture or some kind of zoom level ui.

Another thing to consider if you're going to use this with a lot of text is to actually have text rendered on the pages themselves. Again the way the magazine is setup might not be ideal for this with the way it sizes, but turn.js supports additional dom elements within the pages so you could use background images with actual text. This would definitely require some more zooming logic to keep the text in place at all sizes, but it may be worthwhile since scaled image text becomes illegible quickly.

Cheers,

BLAKE CARROLL Developer • Fi

T: +1 385 202 7668 / M: +1 206 445 5429
blake.carroll@f-i.com / www.f-i.com

Join the Fi Conversation: Google+, Twitter, Facebook This communication is confidential and is only intended for the use of the individual or entity to which it is directed. It may contain information that is privileged and exempt from disclosure under applicable law. If you are not the Intended recipient, please notify us immediately. You should not copy it or disclose its content to any other person.

On Aug 3, 2012, at 11:01 AM, Carlos wrote:

Is there a way to embed YouTube or Vimeo videos into the pages? Is it a simple HTML change, hotspot area? Would be awesome for that feature too.

Thanks.

---

Reply to this email directly or view it on GitHub: https://github.com/FantasyInteractive/magazine/issues/3

[closdesign]

Blake,

Thanks for the info. Very much appreciated. We will definitely look into your suggestions on all of these. We will keep you updated on what we come up with. We are going to try to figure out how to integrate this with the CMS we use (Umbraco), and make some user controls to help with content editing, image uploads, video uploads, hot spot placement, etc. Probably going to be a year or so before we get it completely implemented, but this will definitely get us started. Like I said, we have been looking for an HTML5 and Javascript version of a page flip for a very long time. We found some not so robust ones that might have served a purpose but were very unreliable.
Really appreciate the feed back, help and the project of course.

[closdesign]

Blake,

Quick question. How did you optimize the Turn.js code or did you rewrite it? Seems like the base Turn.js code is really bad on tablets. But on your guy's project, it works quite smoothly. iPads work nicely with your example but bogs way down on the base Turn.js file. Any pointers?

Thanks in advance.

[fi-blake-carroll]

It should be pretty much the same actually. We added some functionality for IE9/10 (canvas gradients and pointer events), and some page image lazy loading since some of the catalogues had 100+ pages, but otherwise it's mostly intact. The latest version of turn.js (4 - we're using a fork of 3) on Emmanuel's site (http://turnjs.com/) has some additional optimizations though and it's looking very nice.

[closdesign]

Thanks again Blake. Really appreciate the feedback.

[dwarapudi]

Blake,

Excellent Magzine web app sample.

The hotspot functionality is not working. Coudl you please suggest what is the best CMS tool for creating hotspots. How to create hotspots and getting the images from the catelogue easily?

I am working on Grocery Comparision site using catelogs and looking for an option how to integrate with CMS tool?

Regards Rama

[blacksaintTR]

Hi Blake great sample thank you.

As dwarapudi mentioned the red hotspots do not work. I downloaded the zip file. After extracting the contents I opened the index.html in IE9, Mozilla Firefox 15 and Google Chrome 21 but the red dots did not work.

[closdesign]

@blacksaintTR ,

Are the red dots loaded via an XML or JSON file? Have you tried loading them on a server. Either locally (MAMP or through Visual Studio). If it is loaded via XML or JSON there may be some cross browser issues testing locally if you just drag the files into your browser. May need to be ran on a server.

[dwarapudi]

@closdesign

Do you have full working sample? I've tried loading from server but it is still same. I am working to make dyanamically i.e reading all files and hotspots reading from database. Have you done any working sample? which CMS software are your using to create hotspots?

Rama

[closdesign]

@dwarapudi ,

We have not implemented anything into our CMS. We will probably have to make a custom control to do this. We are using Umbraco CMS. An ASP.Net based CMS. There is no real way to define hotspots inside an CMS without customization. Most likely a combination of a Javascript/jQuery and custom control/server solution. If and when we do, we will definitely post out solution to an Umbraco CMS powered hotspot solution. At the moment we are extremely busy, so our time for development is very limited. If I can get the hotspots to work on my local server version, I will let you know to see if there is some sort of issue.

[closdesign]

@dwarapudi I just tested the hotspots. What is not working for you. The hotpots don't fire any modal or anything, because there is nothing hooked up to it to do so. If you go to the bottom right and click on the middle layout button that should bring up right column that has the products in them. When you hover over the items in the left side you should see the items that were "hotspots" highlight. Also the hotspots don't show up unless you hover over the magazine.

If you want the hotspots to fire a modal or other element you are going to have to wire that up yourself I am assuming since it is not built in functionality. Use jQuery. It is probably your best and easiest bet in targeting elements on the page unless you know straight Javascript. Target the 'data-id' to fire the hotspot highlight when the specific hotspot is clicked, unless you want to fire a modal. In that case you will have to fire the modal and fill in the modal dynamically based on the what you clicked on. Unless you make a modal for each and every hotspot you put into your catalog.

Of course examples of the modal I am talking about is on the http://glimpse-ie.thefind.com/glimpse website. You may want to take a look at the HTML of one of the catalogs that use the modal solution.

[dwarapudi]

Hi Carlos,

Thank you for your detailed explanation.

We are seriously looking for the entire solution for community project, Is there anyway you can help us or providing the resources to fill those gaps?

We strucked with Hotspot model window dynamic functionality and I am working on CMS system Integration for mapping the catalogue and pushing data by ODATA Jason.

Is there any way we can reproduce the entire working model like Glimpse easily ?

---

From: Carlos [notifications@github.com] Sent: Wednesday, 5 September 2012 3:35 AM : FantasyInteractive/magazine Cc: Rama Dwarapudi Subject: Re: [magazine] Embedding videos or slideshows per page (#3)

@dwarapudihttps://github.com/dwarapudi I just tested the hotspots. What is not working for you. The hotpots don't fire any modal or anything, because there is nothing hooked up to it to do so. If you go to the bottom right and click on the middle layout button that should bring up right column that has the products in them. When you hover over the items in the left side you should see the items that were "hotspots" highlight. Also the hotspots don't show up unless you hover over the magazine.

If you want the hotspots to fire a modal or other element you are going to have to wire that up yourself I am assuming since it is not built in functionality. Use jQuery. It is probably your best and easiest bet in targeting elements on the page unless you know straight Javascript. Target the 'data-id' to fire the hotspot highlight when the specific hotspot is clicked, unless you want to fire a modal. In that case you will have to fire the modal and fill in the modal dynamically based on the what you clicked on. Unless you make a modal for each and every hotspot you put into your catalog.

Of course examples of the modal I am talking about is on the http://glimpse-ie.thefind.com/glimpse website. You may want to take a look at the HTML of one of the catalogs that use the modal solution.

— Reply to this email directly or view it on GitHubhttps://github.com/FantasyInteractive/magazine/issues/3#issuecomment-8271814.

[blacksaintTR]

Hi Blake,

is there any working XML sample for the red dots to work. Since I do not have much products, will not need a database.