ПоказатьМакет.html

Может кому пригодится
Клиентам часто приходится показывать макет сайта в браузере
и вот для себя сделал такую страничку показывалку

— не нужно указывать никаких параметров в html (имя макета должно совпадать с именем html файла)
— макет должен быть подготовлен (ширину его делаю например 2000px
— данный способ удобен для показа фиксированных страничек

Пример
исходник посмотрите в той же страничке или

<code>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<style type="text/css">
* {margin:0;
   padding:0;}
#prew span {
	color: #FFF;
	background: #000;
	font: italic 24px Georgia, "Times New Roman", Times, serif;
}
</style>
</head>

<body>
<div id="prew"align="center"><span>
Loading preview...</span></div>
<script>
$(document).ready(function(){
	var filename = location.pathname.substr(location.pathname.lastIndexOf("/")+1,location.pathname.length);
	if (filename == "") {filename="index.html"}
    var imageUrl=filename.replace("html","jpg");
	
    var img = new Image();
	img.onload = function() {
	$("#prew").html("").fadeOut(0).css({'height': this.height+'px',
					'background-image': 'url(' + imageUrl + ')',
					'backgroundPosition' : 'top center'}).fadeIn(1000);
	}
	img.src = imageUrl;

     });
</script>
</body>
</html>
</code>

5 комментариев

блин осталось, эти теги ненужны
<_code></_code>
  • аватар ololo
  • 0
хорошая идея, это лучше, чем делать поддельный скриншот-коллаж
2 онлайн сервиса которые оборачивают скрин в рамку браузера:
_//makepreview.ru/
_//www.browsercover.me/
при чем тут рамка браузера? а скролить в этой рамки и изменять ее размер тоже можно? как оценить какая инфа будет на первом экране?
да и не для этого это совсем

Чтобы оставлять комментарии, нужно или зарегистрироваться.