Magic Squares – Standalone PHP Script

Posted by Ivan Churakov on March 1, 2013

Magic Squares are responsive interface elements that can display your content in a unique way. You can use it for displaying images, videos, maps, products, services or anything else that you can imagine (any HTML-content, except JavaScript). Visit our live preview to see how Magic Squares can serve your purposes. Magic Squares are colorful squares glued to window edge. As an administrator you can fully configure them: set size, color, background texture, icon, position, content, etc. Magic Squares can be easily integrated into any website, even into plain HTML-page (no more difficult than insert Facebook Like button, check out steps 5-6 in “Installation” paragraph).

Features

Unlimited number of Magic Squares: create as many Magic Squares as you wish.
Any HTML-content: display any HTML-content (except JavaScript).
Highly customizable: set size, color, icon, background texture, and even edit CSS.
Over 500 icons: use any of 500+ available icons.
Shortcode driven: if you want to see Magic Square on specific pages, insert appropriate shortcode at bottom of the page.
Cross domain access supported: you can install script on one domain and use it with unlimited number of domains.
Left and right edges: glue Magic Square to left/right edge.
Transition speed: expand Magic Squares as fast as you wish.
Responsive design: Magic Squares look nice and work with mobile devices.
Secure Admin Panel: configure script and manage data through nice admin panel.
Easy to integrate: insert only 3 lines of code into webpage (check out “Installation” paragraph).
and more, and more, and more…

Front End Demo

You can see Magic Squares on live preview page (left and right edge).

Admin Panel Demo

You can try admin panel:
URL: https://icprojects.net/php/magic-squares/
Login: admin
Password: admin

Installation

Let’s imagine that you have website http://www.website.com/ and you want to install script there.

Create folder magic-squares (use any other name) in root of your domain. Once created it can be reached by URL: http://www.website.com/magic-squares/
Edit inc/config.php and set MySQL database parameters.
Go to admin panel http://www.website.com/magic-squares/ using default login/password (login: admin, password: admin), configure script on Settings page and create at least one campaign on Campaigns page.
Make sure that your website loads jQuery. If it doesn’t, just add this line into head section:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Add these lines into head section (before </head> tag):
<link href="//www.website.com/magic-squares/css/ums.css" rel="stylesheet">
<script src="//www.website.com/magic-squares/js/ums-jsonp.js"></script>
Add shortcode (from Squares page) at the bottom of the page (before </body> tag). Example:
<div class="ums" data-id="X"></div>