Подскажите, плиз, с изменением src для img внутри figure!
<section id="boxes">
<div class="two-up">
<div class="wrapper">
<figure>
<img src="./img/bt_desktop.png">
<img src="./img/desktop.jpg">
</figure>
<p>1Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="wrapper">
<figure>
<img src="./img/bt_tablet.png">
<img src="./img/tablet.jpg">
</figure>
<p>2Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="wrapper">
<figure>
<img src="./img/bt_smartphone.png">
<img src="./img/smart.jpg">
</figure>
<p>3Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</section>
Figure повторяется три раза, при клике, например, на первую из figure нужно изменить на src="./img/bt_desktop_hi" для первого img. Если меняю figure на div (button 0), прописываю классы и скриптом меняю, то все работает:
$(document).ready(function() {
$("#button0").click (function(){
var a = $(this);
var div = a.parents("#container");
if (!$(this).hasClass("active0")) {
$(this).addClass("active0");
}
$("#button1").removeClass("active1");
$("#button2").removeClass("active2");
div.animate({height:'1024', width: '1280'});
});
НО, ломается верстка - дивы не зумятся (с figure все ок), сайт сверстан так, что все элементы уменьшаются, при изменении размера окна браузера. Подскажите, плиз, решение для img src и figure! |
хорошо бы в действии увидеть что там ломается
на вскидку попробуйте клик повесить так
$(document).on("click", "#button", function(){... });
|
Сорри, в песочнице при сохранении эррор (при этом просматривается нормально :blink: ). Исходники все тут http://zalil.ru/34490180.
|
Sam L,
1. ВОТ так должен выглядить head
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Index</title>
<link href="./css/main.css" rel="stylesheet" type="text/css">
<link href="./css/style_buttons.css" rel="stylesheet" type="text/css">
<link href="./css/main(1).css" rel="stylesheet" type="text/css">
<script src="./js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">/*<![CDATA[*/var Liferay={Browser:
//code...
</script>
//code..
<script src="./js/main.js" type="text/javascript"></script>
<script src="./js/scripts.js" type="text/javascript"></script>
</head>
2. в файле script.js нужно закрыть коментарий
$(document).ready(function () {
$('#button0').click(function () {
$(this).hide()
})
}
);
/*$(document).ready(function() {// начало
$("#button0").click (function(){
var a = $(this);
var div = a.parents("#container");
if (!$(this).hasClass("active0")) {
$(this).addClass("active0");
}
$("#button1").removeClass("active1");
$("#button2").removeClass("active2");
div.animate({height:'1024', width: '1280'});
});
$("#button1").click (function(){
var a = $(this);
var div = a.parents("#container");
if (!$(this).hasClass("active1")) {
$(this).addClass("active1");
}
$("#button0").removeClass("active0");
$("#button2").removeClass("active2");
div.animate({height:'768', width: '1024'});
});
$("#button2").click (function(){
var a = $(this);
var div = a.parents("#container");
if (!$(this).hasClass("active2")) {
$(this).addClass("active2");
}
$("#button0").removeClass("active0");
$("#button1").removeClass("active1");
div.animate({height:'480', width: '800'});
});
});
// а где конец?
|
Спасиб, заработало.:) Но другой трабл - исчезает div="content",если изменить аттрибут src у картинки...:blink:
$(document).ready(function() {
$("#button0").bind("click", function() {
$(this).attr("src","/img/bt_tablet_hi.png");
});
});
. |
Sam L, открываете консоль и смотрите ошибки, если не получается разобраться то текст ошибок в студию)
|
в том то и дело, что ошибки в консоли - Failed to load resource относятся к combo и typekit. больше ошибок нет, ну или я не вижу..:-?
|
Цитата:
|
Все, ошибки все убраны, сорри, за молчание. Картинки меняются по клику. Сделал так:
$("#button0").bind("click", function () {
var a = $(this);
var div = a.parents("body");
div.animate({width: '1024'}, 1000);
$('#desktop').attr('src', 'img/bt_desktop_hi.png');
$('#tablet').attr('src', 'img/bt_tablet.png');
$('#smart').attr('src', 'img/bt_smartphone.png');
});
,Но столкнулся с другой бедой - задача состоит в том, чтобы сымитировать изменение размера окна (т.е. сейчас, если окно браузера уменьшить, например, ширину на 770 - весь контент подвижен - из 4 столбцов становится 2, навигация сползает вниз...). Т.е. нужно при клике на button0 отобразить контент как при изменении размера окна браузера на 700... div.animate({width: 'х'}, 1000); просто сжимает все содержимое - все 4 столбца, просто уменьшены... Направьте в правильную сторону, как это реализовать! Нужен добрый пинок.... |
Цитата:
какую семантическую нагрузку она несёт? -никакую. и мало того нарушает правила. так зачем ? чтоб было всего и побольше? да и всю разметку свою пересмотрите со стороны семантичности |
| Часовой пояс GMT +3, время: 00:35. |