Javascript.RU

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

Сообщение от рони Посмотреть сообщение
olmensk, кто его знает о чём вы пишите
где код ... ?

1)
<div class="bottom"></div> <!--блок который будет краситься в картинку-->


2)

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


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


css не пишу там просто размеры.

Надо сделать так: добавить ещё один div, что б в него писалось название или номер картинки на которую нажали.

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

Сообщение от olmensk
Надо сделать так: добавить ещё один div, что б в него писалось название или номер картинки на которую нажали.
в чём проблема то?
Ответить с цитированием
  #13 (permalink)  
Старый 24.02.2016, 01:59
Аспирант
Отправить личное сообщение для olmensk Посмотреть профиль Найти все сообщения от olmensk
 
Регистрация: 24.02.2016
Сообщений: 33

Сообщение от рони Посмотреть сообщение
в чём проблема то?
Проблема в том, что при клацанье на привью, картинка просто закрашивает див bottom, название не пишет, ничего кроме закрашивания не делает.
Вот я и спрашиваю, что и как надо в моём случае добавить, что б кроме закрашивания дива bottom в ещё одном диве написалось название картинки.
Скрипт может какой есть или так, я просто не понимаю как сделать правильно.
Ответить с цитированием
  #14 (permalink)  
Старый 24.02.2016, 02:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

olmensk,
я пас ...
Сообщение от olmensk
что и как надо в моём случае добавить
кто другой, кроме вас, может знать-то?
Ответить с цитированием
  #15 (permalink)  
Старый 24.02.2016, 02:06
Аспирант
Отправить личное сообщение для olmensk Посмотреть профиль Найти все сообщения от olmensk
 
Регистрация: 24.02.2016
Сообщений: 33

Сообщение от рони Посмотреть сообщение
olmensk,
я пас ... кто другой, кроме вас, может знать-то?
Если б был кто-то я б на форум не писал.
Ответить с цитированием
  #16 (permalink)  
Старый 24.02.2016, 02:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

olmensk,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .bottom{
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px
    }
    .bottom span{
        background-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");
$('.bottom').css('background','url('+url+') repeat').find("span").html(title);
})
   })
  </script>
</head>

<body>
<div class="bottom"><span></span></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>
Ответить с цитированием
  #17 (permalink)  
Старый 24.02.2016, 15:41
Аспирант
Отправить личное сообщение для olmensk Посмотреть профиль Найти все сообщения от olmensk
 
Регистрация: 24.02.2016
Сообщений: 33

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

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .bottom{
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px
    }
    .bottom span{
        background-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");
$('.bottom').css('background','url('+url+') repeat').find("span").html(title);
})
   })
  </script>
</head>

<body>
<div class="bottom"><span></span></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>

почти )) немного не то. 1й блок должен окрашиваться картинкой которую выбрал из аккордеона, а во 2м блоке, должно появляться название этой картинки.

Вы смысл правильно уловили, но не до конца)) Я к сожалению слабо работаю с JQuery, поэтому прошу помочь. ))
Ответить с цитированием
  #18 (permalink)  
Старый 24.02.2016, 16:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от olmensk
Вы смысл правильно уловили
вам нужно написать, то как вам нужно ... почему вы телепата ищите, так упорно... вы что и html с css не знаите?
Ответить с цитированием
  #19 (permalink)  
Старый 24.02.2016, 16:31
Аспирант
Отправить личное сообщение для olmensk Посмотреть профиль Найти все сообщения от olmensk
 
Регистрация: 24.02.2016
Сообщений: 33

Сообщение от рони Посмотреть сообщение
вам нужно написать, то как вам нужно ... почему вы телепата ищите, так упорно... вы что и html с css не знаите?
Я ж пишу вроде бы понятно ) ок, ещё раз:

1)
<div class="bottom1"></div>
<div class="bottom2"></div>

2)

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


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

<!----------------------------------------------------------------->

bottom1 - этот блок закрашивается картинкой которую выбрали

bottom2 - в этом блоке пишется название картинки которая закрасила bottom1

Мне надо, что б первый блок закрасился, а во втором блоке написалось название картинки которая закрасила 1й блок.

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

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>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие 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