Embedding videos or slideshows per page #3
Comments
|
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:
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: 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).
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).
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 T: +1 385 202 7668 / M: +1 206 445 5429 Join the Fi Conversation: Google+, Twitter, Facebook On Aug 3, 2012, at 11:01 AM, Carlos wrote:
|
|
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. |
|
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. |
|
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. |
|
Thanks again Blake. Really appreciate the feedback. |
|
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 |
|
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. |
|
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. |
|
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 |
|
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. |
|
@dwarapudi 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. |
|
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 [[email protected]] @dwarapudihttps://github.com/dwarapudi 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. — |
|
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. |
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.
The text was updated successfully, but these errors were encountered: