jdelak / delakdevswitcher Goto Github PK

This project is no longer maintained!

Switcheroo is a product demo bar designed for showcasing your products (themes, websites, plugins) in a nice and sleek way.

Switcheroo demo can be found here: http://switcheroo.getkodo.com/

It officially supports modern browsers and IE >= 8

iDevices have some serious issues with using iframe this way, that's why bar is automatically closed on tablets/mobile.

Yes, it is.

Switcheroo is licensed under MIT licence, which basically means you can do anything with it (just don't remove the link to this github page from the js source).

Products are to be added inside products.js file, and assigned to $products global variable. Sample markup:

$products = {
    visia : {
        name     : 'Visia',
        tag      : 'WP',
        img      : 'http://i.imgur.com/hgp2v0H.jpg',
        url      : 'http://visia.themes.pixelentity.com/',
        purchase : 'http://themeforest.net/item/visia-responsive-one-page-retina-wordpress-theme/5602067?ref=OriginalEXE',
        tooltip  : 'Optional Tooltip'
    },

    bigwig_wp : {
        name     : 'BigWig',
        tag      : 'WP',
        img      : 'http://i.imgur.com/uoreaON.jpg',
        url      : 'http://bigwig.themes.pixelentity.com/',
        purchase : 'http://themeforest.net/item/bigwig-modern-corporate-retina-wordpress-theme/5217458?ref=OriginalEXE'
    }

};

Note that tooltip is optional, everything else is mandatory.

NOTE: You can now specify if you product should not display viewport buttons, simply add responsive: 0 parameter to the product object in the list above. If not present or value is different, buttons will be showby default for each product.

Default product will be used if no hash is present. Check products.js for $current_product = 'visia';, just replace the visia with the id of your product.

You can link to certain product using hashtag + id of the product you want to link to. For example, http://demourl.com/#bigwig_wp. If no product is linked, default product you specified will be displayed.

Note: If you are using this on Envato marketplace, you have to use query string parameter "product" instead because marketplace encodes hash and that causes problem. So on Evato, specify product you are linking to like this: http://demourl.com/?product=bigwig_wp

Uncompressed scripts and styles are included in the package, only they are commented. Simply comment compressed scripts/styled and uncomment uncompressed ones.

Sure it is. Simply remove 'textual' class from .logo and replace words with your image (optimal height is 60px).

Of course you can, simply add dark class to the body element and voila.

Find bugs, report bugs, fix bugs.