Div и картинки. Адаптивная верстка

morohon · October 8, 2013

Здравствуйте, уважаемые посетители форума. Замучался решать вопрос, он следующий. У меня есть скрипт ротатора картинок, который меняет картинки по времени (делает это через ul). Как сделать так, чтобы картинки которые он выводит НИКОГДА не выходили за границы div'а? И еще вопрос. Мне нужно чтобы все это было адаптивно к экрану (будет показываться на full HD, но была бы возможность посмотреть с 17-24"(Radmin)). Если вас не затруднит, помогите пожалуйста. Код прилагаю. В нем о размещении элементов даже не пахнет (много раз исправлял). Нужен такой вариант как во вложении (картинке), чтобы так было на всех экранах (ток картинки по-больше в высоту ну и выровняно). Понимаю, что прошу много, если это трудно - подскажите в какую сторону копать, я плох в css и js. Спасибо огромное тем, кто откликнется

P.S. Картинка может быть как вертикальная, так и горизонтальная (на схеме показано)


<?php
error_reporting(E_ALL);
header('Content-Type: text/html; charset=utf-8');
include "scripts/config.php";
$errors=connect();
$sql=mysql_query('SELECT * FROM `index`') or die (mysql_error());
if(mysql_num_rows($sql) <= 0)
echo 'ошибка'.$errors;
$row=mysql_fetch_assoc($sql);
$path=$row['images'];
$count=count(glob('images/'.$path.'*.jpg'));
if($count == 0){?>
<img src="default/1.jpg" width="500" height="313">
<?php
exit();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="clock/assets/css/style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div#rotator {
	 float:left;
	 width: 800px;
	 max-width: 75%;
}
div#rotator img {
max-width: 100%;
	 height: auto;
}
div#rotator ul{
	 position: relative;
	 list-style: none;
	 padding: 0px;
}
div#rotator ul li {
	 position: absolute;
	 list-style: none;
}
div#rotator ul li.show {
	 z-index:500;
}
.clock {
float: right;
}
.main {
	 float: right;
}
.marq{
	 position: absolute;
	 bottom: 0;
	 right: 0;
	 left: 0;
}
.text {
	 color: blue;
	 font-size:95px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">

function theRotator() {
var time="<?php echo $time;?>";
// Устанавливаем прозрачность всех картинок в 0
$('div#rotator ul li').css({opacity: 0.0});

// Берем первую картинку и показываем ее (по пути включаем полную видимость)
$('div#rotator ul li:first').css({opacity: 1.0});

// Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
setInterval('rotate()',time);
}

function rotate() {
// Берем первую картинку
var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));

// Берем следующую картинку, когда дойдем до последней начинаем с начала
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));

// Расскомментируйте, чтобы показвать картинки в случайном порядке
// var sibs = current.siblings();
// var rndNum = Math.floor(Math.random() * sibs.length );
// var next = $( sibs[ rndNum ] );

// Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

// Прячем текущую картинку
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
};

$(document).ready(function() {
// Запускаем слайдшоу
theRotator();
});

</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script src="clock/assets/js/script.js"></script>
</head>
<body>

<div id="rotator" align="center">
<ul>
<li class="show"><img src="<?php echo 'images/'.$row['images'].'1'.$type; ?>" class="img_main" /></li>
<?php
for ($i=2;$i<=$count;$i++){?>
	 <li><img src="<?php echo 'images/'.$row['images'].$i.$type; ?>" class="img_main" /></li>
<?php }
?>
</ul>
</div>
<div class="main">
<img src="<?php echo 'config_images/'.$row['logo']; ?>" class="main">
</div>
<div class="clock">
<?php include "clock/index.html"; ?>
</div>
<div class="marq">
<marquee direction="left" loop="-1" behavior="scroll" scrolldelay="1" scrollamount="10">
<span class="text"><?php echo $row['marquee'];?></span>
</marquee>
</div>
</body>
</html>

Edited October 8, 2013 by morohon

npofopr · October 9, 2013

Копать в сторону адаптивной верстки.

Возьмите любой фреймворк (тот же бутстрап, фоундейшн, purecss) и пользуйтесь.

Sign In

Div и картинки. Адаптивная верстка

Question

morohon

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information