PreviewMagic
PreviewMagic is a magic way to see content of other pages when you don't want to leave the main page. You can navigate from one page to another, clicking on links. You can send forms. You can apply javascript. You can load part of the page or You can load the whole page. You can use it everywhere!
Why PreviewMagic
It's always faster and more comfortable to load content by ajax!
But there are some well-known annoying points: ajax apps are invisible for search engines, and it’s difficult to develop them, and often there are problems with using the browser history.
PreviewMagic is an easy and beautiful way to add ajax facilities to every site with little effort. Your site remains visible for search engines. And you can use the browser history.
You can open pages either in a browser window or using the PreviewMagic panel. So your site will become more user friendly because of better navigation.
For instance you are looking throw a catalog and you want to get more info about some item. If you choose a traditional way, you can open the page about this item in a browser window. It has happened that there are several links on that page with additional information. You clicked on one of them and then you clicked on some link again. And now it will be difficult to find quickly the initial page of the catalog items.
If you use PreviewMagic you don’t leave the initial page while loading additional information. You can load more and more content by clicking on links. And if you want to return to the initial page the only thing you need to do is to hide the PreviewMagic panel.
PreviewMagic is easy. There are no JSON data and templates. You can use ordinary HTML or you can use PHP, JSP, ASP and any other server-side language. You can easily add your javascript to ajax-loaded content using PreviewMagic API. You can add transition animation to elements of loaded content.
You can use PreviewMagic everywhere. Look how different the examples are!Examples
Gallery
The Gallery example illustrates basic functionality of PreviewMagic and at the same time it shows unlimited creative possibilities.
Look how easy it is to create ajax image gallery using only plain html and several lines of javascript code!
Staff Managenment
This example shows how we can add ajax facilities to existing php application.
Some interesting features: tabs, sortable tables, sending POST request, different Views
More Examples
Book
This example illustrates integration of PreviewMagic and Bootstrap.js. With PreviewMagic it's easy to create a book-reader!
Animated Slideshow
With PreviewMagic it's easy to create an animated slideshow!
This example illustrates additional possibilities:
- To show PreviewMagic on "document load" event
- To add transition animation to the content
- To manage the PreviewMagic Panel by JavaScript
See also Magic LightBox which has been created on the base of PreviewMagic with many additional features
Main Features
Navigation
PreviewMagic is not a classic Ajax application framework. It means that all pages of your site can be opened either in your browser or through PreviewMagic ajax facilities. It makes your site SEO friendly: search engines will see all pages of your site.
PreviewMagic can keep data in the browser history. So you can use back and forward buttons of your browser for navigation.
PreviewMagic works in all modern browsers: IE10, IE11, Safary, Opera, Mozilla, Google Chrome, and has been tested on mobile devices working on Android, iOS, Windows Phone.
Effects
PreviewMagic contains about 40 different effects of content changing. All effects are based on keyframe css-properties. You can use default set of effects, 3 prearranged sets of effects (simple, wavy, diamond), all effects, custom set of effects, or you can switch effects off.
Customization
PreviewMagic is highly customizable. You only need to define a View property for every set of similar pages. You can use as many views as you want. So PreviewMagic panels with different view properties will look different.
JavaScript
PreviewMagic has an API to integrate it with other javascripts. You can apply your script to ajax-loaded content using PreviewMagic events and event handlers. You can open or hide PreviewMagic panel in you script.
This API also gives possibility to load content fast without applying effects. It may be useful in such cases as a table sorting.
Forms
PreviewMagic allows to use both GET and POST request methods working with forms. You can put additional data into ajax request.
Easy to Use
PreviewMagic doesn't require any server-side code. You can use simple HTML for your pages. But if you use PHP or something like that you get additional possibility of varying content according to the type of request (if it is ajax or not). It can shorten loading time and gives you more flexibility.
It's easy to start using PreviewMagic. You only need to add several lines of code, and you will get a real ajax-like application.
All examples with comments are included in the distribution.