Как настроить отображение картинки на разных разрешениях?

BadBoy
На сайте с 31.01.2005
Offline
278
1001

Приветствую.

Нужна помощь в настройке.

Как настроить отображение баннера для всех мобильных устройств, чтобы оно пропорционально и корректно смотрелось на разных устройствах. От ipad до iphоne и прочих смартфонах, если за основу брать 2 баннера, большой и маленький.

Чтобы баннер отображался в самом верху сайта, с возможностью закрыть его, нажав на крестик. Есть ли готовые решения?

vkusnoserver
На сайте с 30.04.2011
Offline
104
#1

Я как-то делал responsive banner по этому how-to от Adobe, возможно вам будет на будущее полезным (потребуется Adobe Edge Reflow CC). А так для вашей конкретной задачи можно воспользоваться сервисами типа Specless или куда более крутым BannerFlow.

Скидки на хостинг (/ru/forum/629944) | Конфигуратор (http://www.vkusnoserver.ru/link.php?id=31) | Администрирование (/ru/forum/871196) CEO собственной персоной - skype: vkusnoandy
R
На сайте с 18.12.2009
Offline
92
#2

@media (min-width: Npx){ /*набор стилей*/ }

@media (max-width: Npx){ /*набор стилей*/ }

где N - значение.

Подробнее - http://stackoverflow.com/a/13550716

Станислав
На сайте с 27.12.2009
Offline
223
#3

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

<div id="banner">
<img src="/image/pic.jpg">
</div>

<script>
$(function(){
$('#banner').ready(function(e){
var width = screen.width;
if(width < 1000) { // Если ширина дисплея меньше 1000px
$('#banner').find('img').attr('src', '/image/pic_small.jpg');
}
});
});
</script>

Для закрытия баннера нужно вывести кнопочку и при клике по ней сделать запись в куку и скрыть баннер, и при загрузке странице проверять куку, если кука существует то не выводить баннер.

К примеру есть кнопочка


<span id="close-banner">x</span>

Тогда пишем скрипт
$(function(){
$('#close-banner').on('click', function() {
// Тут создаем cookie (banner=close)

// удаляем код баннера с страницы
$('#banner').remove();
});
});

Тогда нужно поправить HTML код вывода баннера. Я не в курсе на чем у вас написан двиг, но в любом случае нужно проверять куку именно на серверном движке, чтобы баннер временно не отображался на страницах в случае если он закрыт.

Ну а так, будет как то так

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<?php if($banner) { ?> // $banner - переменная содержит (true/false), значение переменной определяется проверкой существования куки
<div id="banner">
<img src="/image/pic.jpg">
</div>
<?php } ?>


Мы там, где рады нас видеть.
BadBoy
На сайте с 31.01.2005
Offline
278
#4

rerighter, спасибо, полезно.

Ms-Dred, а готовое решение можете скомпилировать? Я не прогер, не смогу все сопоставить в 1 файл.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий