Skip to content

Instantly share code, notes, and snippets.

@rchrd2

rchrd2/fakeBrowser.jquery.js

Last active October 4, 2015 01:58
Show Gist options
  • Save rchrd2/feecb270f7a7d9ce6b64 to your computer and use it in GitHub Desktop.
Save rchrd2/feecb270f7a7d9ce6b64 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fakeBrowser.jquery.js
/**
* jQuery plugin to add a faux browser around some images
* Based off of http://cloudcannon.com/deconstructions/2014/11/21/flat-css-browser-wrapper.html
*
* Example usage:
*
* <body>
* <img class="fakeBrowser" src="http://example.com/image.jpg"
* </body>
*
*
* $('.fakeBrowser').fakeBrowser();
*
* Author: RC
*/
(function ($) {
"use strict";
$.fn.fakeBrowser = function() {
$(this).each(function(index, elem) {
var $elem = $(elem);
var clone = $elem.clone();
var new_elem = $('<div class="fake-browser-ui"><div class="frame"><span></span><span></span><span></span></div>');
new_elem.append(clone);
$elem.replaceWith(new_elem);
});
};
})(jQuery);
Raw
styles.css
.fake-browser-ui {
padding: 20px 0 0;
border-radius: 3px;
border-bottom: 2px solid #ccc;
background: #ddd;
display: inline-block;
position: relative;
line-height: 0;
}
.fake-browser-ui .frame {
display: block;
height: 15px;
position: absolute;
top: 5px;
left: 1px;
}
.fake-browser-ui span {
height: 8px;
width: 8px;
border-radius: 8px;
background-color: #eee;
border: 1px solid #dadada;
float: left;
margin: 0 0 0 4px;
}
@rchrd2
Copy link
Author

rchrd2 commented Oct 4, 2015

Example jsbin http://jsbin.com/nexihi/edit?html,js,console,output

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment