Форум

Sam L · #1 (**permalink**) 07.05.2013, 17:21

<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!

animhotep · #2 (**permalink**) 07.05.2013, 17:24

хорошо бы в действии увидеть что там ломается
на вскидку попробуйте клик повесить так

$(document).on("click", "#button", function(){... });

Sam L · #3 (**permalink**) 07.05.2013, 17:52

Сорри, в песочнице при сохранении эррор (при этом просматривается нормально

). Исходники все тут http://zalil.ru/34490180.

cyber · #4 (**permalink**) 07.05.2013, 18:26

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'});
	});
});
// а где конец?

Sam L · #5 (**permalink**) 07.05.2013, 19:14

Спасиб, заработало.

Но другой трабл - исчезает div="content",если изменить аттрибут src у картинки...

$(document).ready(function() {
    $("#button0").bind("click", function() {
        $(this).attr("src","/img/bt_tablet_hi.png");
    });
});

.

cyber · #6 (**permalink**) 07.05.2013, 19:19

Sam L, открываете консоль и смотрите ошибки, если не получается разобраться то текст ошибок в студию)

Sam L · #7 (**permalink**) 07.05.2013, 19:23

в том то и дело, что ошибки в консоли - Failed to load resource относятся к combo и typekit. больше ошибок нет, ну или я не вижу..

cyber · #8 (**permalink**) 07.05.2013, 19:32

Цитата:

combo и typekit

это что?)

Sam L · #9 (**permalink**) 16.05.2013, 19:21

Все, ошибки все убраны, сорри, за молчание. Картинки меняются по клику. Сделал так:

$("#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 столбца, просто уменьшены...

Направьте в правильную сторону, как это реализовать!
Нужен добрый пинок....

dmitriymar · #10 (**permalink**) 16.05.2013, 19:27

Сообщение от Sam L

<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>

я конечно извиняюсь, а для чего сия конструкция ? чтоб была ?
какую семантическую нагрузку она несёт? -никакую. и мало того нарушает правила. так зачем ? чтоб было всего и побольше?
да и всю разметку свою пересмотрите со стороны семантичности

Форум

Справочник

Discord чат

Курсы javascript