Javascript-форум - Как в аккордеоне нажать на ссылку и что б надпись ссылки появилась в отдельном окне.

Страница 2 из 6

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Как в аккордеоне нажать на ссылку и что б надпись ссылки появилась в отдельном окне. (https://javascript.ru/forum/jquery/61558-kak-v-akkordeone-nazhat-na-ssylku-i-chto-b-nadpis-ssylki-poyavilas-v-otdelnom-okne.html)

olmensk

24.02.2016 01:46

Цитата:

Сообщение от рони (Сообщение 409010)

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, что б в него писалось название или номер картинки на которую нажали.

рони	24.02.2016 01:56

Цитата:

Сообщение от olmensk

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

в чём проблема то?

olmensk

24.02.2016 01:59

Цитата:

Сообщение от рони (Сообщение 409013)

в чём проблема то?

Проблема в том, что при клацанье на привью, картинка просто закрашивает див bottom, название не пишет, ничего кроме закрашивания не делает.
Вот я и спрашиваю, что и как надо в моём случае добавить, что б кроме закрашивания дива bottom в ещё одном диве написалось название картинки.
Скрипт может какой есть или так, я просто не понимаю как сделать правильно.

рони	24.02.2016 02:04

olmensk,
я пас ...

Цитата:

Сообщение от olmensk

что и как надо в моём случае добавить

кто другой, кроме вас, может знать-то?

olmensk

24.02.2016 02:06

Цитата:

Сообщение от рони (Сообщение 409015)

olmensk,
я пас ... кто другой, кроме вас, может знать-то?

Если б был кто-то я б на форум не писал.

рони	24.02.2016 02:25

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>

olmensk

24.02.2016 15:41

Цитата:

Сообщение от рони (Сообщение 409018)

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, поэтому прошу помочь. ))

рони	24.02.2016 16:25

Цитата:

Сообщение от olmensk

Вы смысл правильно уловили

вам нужно написать, то как вам нужно ... почему вы телепата ищите, так упорно... вы что и html с css не знаите?

olmensk

24.02.2016 16:31

Цитата:

Сообщение от рони (Сообщение 409082)

вам нужно написать, то как вам нужно ... почему вы телепата ищите, так упорно... вы что и 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й блок.

рони	24.02.2016 17:44

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>

Часовой пояс GMT +3, время: 09:33.

Страница 2 из 6

Последняя »

Показывать 40 сообщений этой темы на одной странице