Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 24.02.2016, 17:48
Аспирант
Отправить личное сообщение для olmensk Посмотреть профиль Найти все сообщения от olmensk
 
Регистрация: 24.02.2016
Сообщений: 33

Сообщение от рони Посмотреть сообщение
olmensk,
о наконецто bottom2
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .bottom1{
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px
    }
    .bottom2{
        background-color: #FF00FF;
         color: #FFFF00;
    }

    .active {
        border: 1px  solid  #FF0000;
    }

  </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script>
   $(function(){
$(".list3 li").on("click", function() {
var url = $("img",this).data("img"),
     title = $("img",this).data("title");
$(".list3 li").not($(this).addClass("active")).removeClass("active");
$('.bottom1').css('background','url('+url+') repeat')
$('.bottom2').html(title);
})
   })
  </script>
</head>

<body>
<div class="bottom1"></div>
<div class="bottom2"></div>


<ul class="list3">
 <li  ><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" data-img="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" data-title= "фигня всякая"></li>
  <li  ><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" data-img="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" data-title= "всякая хрень"></li>

 </ul>
</body>

</html>
а почему блок bottom1 не закрашивается картинкой которую выбрал?
Назвние в bottom2 появляется, это то, что надо, но первый блок bottom1 не закрашивается в выбранную картинку почемуто... ((

Последний раз редактировалось olmensk, 24.02.2016 в 18:01.
Ответить с цитированием
  #22 (permalink)  
Старый 24.02.2016, 18:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

olmensk,
здесь закрашивается? если да то посмотрите структуру ul и элементов в этом списке
Ответить с цитированием
  #23 (permalink)  
Старый 24.02.2016, 18:06
Аспирант
Отправить личное сообщение для olmensk Посмотреть профиль Найти все сообщения от olmensk
 
Регистрация: 24.02.2016
Сообщений: 33

ПО-МОЕМУ РАЗОБРАЛСЯ!!! ))))))))))

СПАСИБО!!! ВЫ ЧУДО !!!!!!!!!!! СПАСИТЕЛЬ МОЙ

ПОКАЗЫВАЮ:
<div class="bottom1"></div><!--блок который будет закрашен выбранной картинкой-->
<div class="bottom2"></div><!--блок в котором напишется название картинки которая закрасит блок bottom1-->


<div id="mydiv3"><!--аккордеон в котором картинка которая будет красить блок-->
<ul class="list-bottom"> 
<li path-img="images/1.jpg"><img src="images/1.jpg"></li> <!--1-путь; 2-превью-->
<li path-img="images/2.jpg"><img src="images/2.jpg"></li> <!--1-путь; 2-превью-->
</ul> 
</div>


<!--скрипт окрашивания картинкой блока-->
	$(document).ready(function(){
    $('.bottom1 li').click(function () {      
      var img_path = $(this).attr("path-img"), title = $("img",this).data("title"); // Путь к изображению      
      $('.bottom1 li').css("border-color","white"); // Сбрасываем у тегов li рамку, ставим цвет белый
      $(this).css("border-color","#000"); // Устанавливаем красную рамку у выбранной картинки
      $('.bottom1').css('background','url('+img_path+') repeat'); // Меняем фон bottom1  
	  $('.bottom2').html(title); // пишем название в bottom2  
    });            
});

Последний раз редактировалось olmensk, 24.02.2016 в 18:37.
Ответить с цитированием
  #24 (permalink)  
Старый 24.02.2016, 18:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

olmensk,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #25 (permalink)  
Старый 24.02.2016, 18:27
Аспирант
Отправить личное сообщение для olmensk Посмотреть профиль Найти все сообщения от olmensk
 
Регистрация: 24.02.2016
Сообщений: 33

Скажите пожалуйста ещё одну вещь,

если 2 - 3 аккордеона на одной странице, и в каждом выбрать по одному рисунку рандомно, то как сделать, что б в bottom2 написались отдельно каждая выбраная картинка,

ато получается названия самоменяются, например в 1м акордеоне выбрал картинку и появилось название "фигня1", во втором выбрал картинку и название "фигня1" заменилась на новое,

а как сделать, что б название из 1го аккордеона осталось, а со 2го акордеона название написалось рядом с названием из 1го акордеона, или с новой строки, и так с третьего тоже с новой и в bottom2 появлялиь назвния с каждого аккордеона.

Надеюсь понятно написал ^^))

Последний раз редактировалось olmensk, 24.02.2016 в 18:38.
Ответить с цитированием
  #26 (permalink)  
Старый 24.02.2016, 18:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

olmensk,
$('.bottom2').html($('.bottom2').html() + "<br>"+ title);
Ответить с цитированием
  #27 (permalink)  
Старый 24.02.2016, 18:45
Аспирант
Отправить личное сообщение для olmensk Посмотреть профиль Найти все сообщения от olmensk
 
Регистрация: 24.02.2016
Сообщений: 33

То, что надо!!!
ОГРОМНОЕ СПАСИБО!! )))))))))))))))))

"..название из 1го аккордеона осталось, а со 2го акордеона название написалось рядом с названием из 1го акордеона c новой строки.."

<div class="bottom1"></div><!--блок который будет закрашен выбранной картинкой-->
<div class="bottom2"></div><!--блок в котором напишется название картинки которая закрасит блок bottom1-->


<div id="mydiv3"><!--аккордеон в котором картинка которая будет красить блок-->
<ul class="list-bottom"> 
<li path-img="images/1.jpg"><img src="images/1.jpg" data-title="текст1 mydiv3"></li> <!--1-путь; 2-превью-->
<li path-img="images/2.jpg"><img src="images/2.jpg" data-title="текст2 mydiv3"></li> <!--1-путь; 2-превью-->
</ul> 
</div>

<!--скрипт окрашивания картинкой блока-->

	$(document).ready(function(){
    $('.bottom1 li').click(function () {      
      var img_path = $(this).attr("path-img"), title = $("img",this).data("title"); // Путь к изображению      
      $('.bottom1 li').css("border-color","white"); // Сбрасываем у тегов li рамку, ставим цвет белый
      $(this).css("border-color","#000"); // Устанавливаем красную рамку у выбранной картинки
      $('.bottom1').css('background','url('+img_path+') repeat'); // Меняем фон bottom1  
	  $('.bottom2').html($('.bottom2').html() + "<br>"+ title);
 // пишем название в bottom2  
    });            
});

Последний раз редактировалось olmensk, 24.02.2016 в 19:32.
Ответить с цитированием
  #28 (permalink)  
Старый 24.02.2016, 19:17
Аспирант
Отправить личное сообщение для olmensk Посмотреть профиль Найти все сообщения от olmensk
 
Регистрация: 24.02.2016
Сообщений: 33

А можно ещё один, последний вопрос? ))) понимаю, что поднадоел, но сам не разберусь ((

Сейчас при каждом нажатии появляется название с новой строки, даже если 5раз нажать на одну и туже картинку, то её название 5 раз появитя друг за другом.

Как сделать, что б в bottom2 название каждой картинки появлялось 1раз из каждого аккордеона?

Тоесть обьясню.

1й аккордеон: например в нём 3 картинки и я нажал на 1-ю, появилось название 1й, потом нажал на вторую, и название с первой сменилось на 2ю. В итоге из первого аккордеона в bottom2 только одно название высветилось той картинки которую нажимал.

2й аккодеон: (В bottom2 уже есть название из аккрдеон1) и смысл такой же, какую б я картинку не клацал в аккордеон2 , то в bottom2 рядом с названием из 1го аккордеона, появлялось название из второго.

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

..надеюсь понятно..

<div class="bottom1"></div><!--блок который будет закрашен выбранной картинкой из любого акордеона-->
<div class="bottom2"></div><!--блок в котором напишется название картинки которая закрасит блок bottom1-->

<div id="mydiv3"><!--аккордеон1 в котором картинка которая будет красить блок bottom1-->
<ul class="list-bottom"> 
<li path-img="images/1.jpg"><img src="images/1.jpg" data-title="текст1 mydiv3"></li> <!--1-путь; 2-превью-->
<li path-img="images/2.jpg"><img src="images/2.jpg" data-title="текст2 mydiv3"></li> <!--1-путь; 2-превью-->
</ul> 
</div>

<div id="mydiv4"><!--аккордеон2 в котором картинка которая будет красить блок bottom1-->
<ul class="list-bottom"> 
<li path-img="images/1.jpg"><img src="images/1.jpg" data-title="текст1 mydiv4"></li> <!--1-путь; 2-превью-->
<li path-img="images/2.jpg"><img src="images/2.jpg" data-title="текст2 mydiv4"></li> <!--1-путь; 2-превью-->
</ul> 
</div>


<!--скрипт окрашивания картинкой блока-->
$(document).ready(function(){
    $('.bottom1 li').click(function () {      
      var img_path = $(this).attr("path-img"), title = $("img",this).data("title"); // Путь к изображению      
      $('.bottom1 li').css("border-color","white"); // Сбрасываем у тегов li рамку, ставим цвет белый
      $(this).css("border-color","#000"); // Устанавливаем красную рамку у выбранной картинки
      $('.bottom1').css('background','url('+img_path+') repeat'); // Меняем фон bottom1  
	  $('.bottom2').html($('.bottom2').html() + "<br>"+ title); // пишем название в bottom2  
    });            
});

Последний раз редактировалось olmensk, 24.02.2016 в 19:46.
Ответить с цитированием
  #29 (permalink)  
Старый 24.02.2016, 19:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

olmensk,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .bottom1{
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px
    }
    .bottom2{
        background-color: #FF00FF;
         color: #FFFF00;
    }

    .active {
        border: 1px  solid  #FF0000;
    }

  </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script>
$(function() {
    var arrText = [];
    $(".list-bottom").each(function(indx, ul) {
        arrText[indx] = "";
        $("li", ul).click(function() {
            var img_path = $(this).attr("path-img"),
                title = $("img", this).data("title");
            $(".bottom1 li").css("border-color", "white");
            $(this).css("border-color", "#000");
            $(".bottom1").css("background", "url(" + img_path + ") repeat");
            arrText[indx] = title;
            $(".bottom2").html(arrText.join("<br>"))
        })
    })
});

  </script>
</head>

<body>
<div class="bottom1"></div><!--блок который будет закрашен выбранной картинкой из любого акордеона-->
<div class="bottom2"></div><!--блок в котором напишется название картинки которая закрасит блок bottom1-->

<div id="mydiv3"><!--аккордеон1 в котором картинка которая будет красить блок-->
<ul class="list-bottom">
<li path-img="images/1.jpg"><img src="images/1.jpg" data-title="текст1 mydiv3"></li> <!--1-путь; 2-превью-->
<li path-img="images/2.jpg"><img src="images/2.jpg" data-title="текст2 mydiv3"></li> <!--1-путь; 2-превью-->
</ul>
</div>

<div id="mydiv4"><!--аккордеон2 в котором картинка которая будет красить блок-->
<ul class="list-bottom">
<li path-img="images/1.jpg"><img src="images/1.jpg" data-title="текст1 mydiv4"></li> <!--1-путь; 2-превью-->
<li path-img="images/2.jpg"><img src="images/2.jpg" data-title="текст2 mydiv4"></li> <!--1-путь; 2-превью-->
</ul>
</div>

</body>

</html>
Ответить с цитированием
  #30 (permalink)  
Старый 24.02.2016, 20:43
Аспирант
Отправить личное сообщение для olmensk Посмотреть профиль Найти все сообщения от olmensk
 
Регистрация: 24.02.2016
Сообщений: 33

Не получилось!
Надписи самозаменяются везде. !

В пределах одного аккордиона надписи самозаменяются, это ок,

но когда клацаю на превьюшку 2го аккордеона, то надпись из 1го аккордиона заменяется на надпись из 2го аккордиона.
...такоеже и с третим аккордионом, его надпись заменяется на надпись из предыдущих 2х...

а по отдельности, в контексте одного аккордиона, всё как надо.

Теперь бы сделать как-то так, что б из 1го аккор. надпись осталась когда клацаешь на 2й.

Пытался, пытался, у меня не получается такое, помогите.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие div блока при первом визите на сайт Nushaba Общие вопросы Javascript 28 20.12.2013 21:24
фрактальный сыр x-yuri Оффтопик 76 23.11.2011 21:59
Как сделать чтобы ссылки открывались в родительском окне infom@n Общие вопросы Javascript 2 02.10.2011 00:05
О фрилансе (Личный опыт) free Оффтопик 105 18.08.2011 17:02
Как сделать так что бы ссылки мигали разными цветами? woo_hoo Общие вопросы Javascript 2 19.03.2010 11:28