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

olmensk

24.02.2016, 00:31

Здравствуйте.
Есть акордеон, внутри него есть список типа:

<ul class="list3">
<li path-img="images/npview/np/z/1.gif"><img src="images/npview/np/z/1.gif"></li>
</ul>

1-это путь к картинке
2-это её превьюшка.

Отображается это так: раскрываешь аккордеон и видишь превьюшку 50х50рх нажимаешь на неё и в отдельном окне появляется картинка.

Вопрос, как сделать так, что б при нажатии на превьюшку, название картинки или может номер её появлялось в отдельном div, типа хочу сделать своеобразный "блокнот" где писалось какая картинка высветилась.

Спасибо.

рони

24.02.2016, 00:46

olmensk,
http://fancyapps.com/fancybox/

olmensk

24.02.2016, 00:48

olmensk,
http://fancyapps.com/fancybox/

Что это? Можно обьяснить? Я открыл и там просто галереи.

рони

24.02.2016, 00:51

видишь превьюшку 50х50рх нажимаешь на неё и в отдельном окне появляется картинка. == http://fancyapps.com/fancybox/

olmensk

24.02.2016, 00:54

==

Не так поняли меня )) В отдельном окне не картинка должна появиться, а её название или номер который ей приписан.
Тоесть появляется картинка (она и так появляется), а параллельно в отдельном div пишется её номер или имя.

рони

24.02.2016, 01:04

olmensk,
так сделайте див с нужной информацией и по клику на картинку покажите этот див ... непонятно в чём проблема?

olmensk

24.02.2016, 01:20

olmensk,
так сделайте див с нужной информацией и по клику на картинку покажите этот див ... непонятно в чём проблема?

Мне надо не div что б открылся клацая на картинку.

Мне что б клацая ка превью, в отдельном окошке писалось название этой картики которую превью представляет.

рони

24.02.2016, 01:23

Мне надо не div что б открылся клацая на картинку.

Мне что б клацая ка превью, в отдельном окошке писалось название этой картики которую превью представляет.
не осилил

olmensk

24.02.2016, 01:28

не осилил

У меня картинка при нажатии на превью, закрашивает блок (появляется в блоке) отдельном. Я хочу сделать так, что б кроме картинки в ЕЩЁ одном блоке просто писалась её название или описание.

рони

24.02.2016, 01:42

olmensk, кто его знает о чём вы пишите
:-? где код ... ?

olmensk

24.02.2016, 01:46

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

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

olmensk

24.02.2016, 01:59

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

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

рони

24.02.2016, 02:04

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

olmensk

24.02.2016, 02:06

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

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

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

olmensk

24.02.2016, 16:31

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

olmensk

24.02.2016, 17:48

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 не закрашивается в выбранную картинку почемуто... ((

рони

24.02.2016, 18:00

olmensk,
здесь закрашивается? если да то посмотрите структуру ul и элементов в этом списке

olmensk

24.02.2016, 18:06

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

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

ПОКАЗЫВАЮ:

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

<div id="mydiv3">
<ul class="list-bottom">
<li path-img="images/1.jpg"><img src="images/1.jpg"></li> 
<li path-img="images/2.jpg"><img src="images/2.jpg"></li> 
</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
});
});

рони

24.02.2016, 18:07

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

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

... ваш код...

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

olmensk

24.02.2016, 18:27

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

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

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

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

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

рони

24.02.2016, 18:34

olmensk,
$('.bottom2').html($('.bottom2').html() + "<br>"+ title);

olmensk

24.02.2016, 18:45

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

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

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

<div id="mydiv3">
<ul class="list-bottom">
<li path-img="images/1.jpg"><img src="images/1.jpg" data-title="текст1 mydiv3"></li> 
<li path-img="images/2.jpg"><img src="images/2.jpg" data-title="текст2 mydiv3"></li> 
</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:17

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

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

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

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

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

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

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

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

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

<div id="mydiv3">
<ul class="list-bottom">
<li path-img="images/1.jpg"><img src="images/1.jpg" data-title="текст1 mydiv3"></li> 
<li path-img="images/2.jpg"><img src="images/2.jpg" data-title="текст2 mydiv3"></li> 
</ul>
</div>

<div id="mydiv4">
<ul class="list-bottom">
<li path-img="images/1.jpg"><img src="images/1.jpg" data-title="текст1 mydiv4"></li> 
<li path-img="images/2.jpg"><img src="images/2.jpg" data-title="текст2 mydiv4"></li> 
</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
});
});

рони

24.02.2016, 19:43

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>

<div id="mydiv3">
<ul class="list-bottom">
<li path-img="images/1.jpg"><img src="images/1.jpg" data-title="текст1 mydiv3"></li> 
<li path-img="images/2.jpg"><img src="images/2.jpg" data-title="текст2 mydiv3"></li> 
</ul>
</div>

<div id="mydiv4">
<ul class="list-bottom">
<li path-img="images/1.jpg"><img src="images/1.jpg" data-title="текст1 mydiv4"></li> 
<li path-img="images/2.jpg"><img src="images/2.jpg" data-title="текст2 mydiv4"></li> 
</ul>
</div>

</body>

</html>

olmensk

24.02.2016, 20:43

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

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

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

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

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

Пытался, пытался, у меня не получается такое, помогите.

рони

24.02.2016, 20:48

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

olmensk

24.02.2016, 20:52

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

<div class="bloknot"></div>

<section class="ac-container1">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">аккордеон1</label>
<article class="ac-small">
<ul class="list1">
<li path-img="images/a1.jpg"><img src="images/a1.jpg" data-title="надпись a1"></li>
<li path-img="images/a2.jpg"><img src="images/a2.jpg" data-title="надпись a2"></li>
</ul>
</article>
</div>
</section>

<section class="ac-container2">
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">аккордеон2</label>
<article class="ac-small">
<ul class="list2">
<li path-img="images/b1.jpg"><img src="images/b1.jpg" data-title="надпись b1"></li>
<li path-img="images/b2.jpg"><img src="images/b2.jpg" data-title="надпись b2"></li>
</ul>
</article>
</div>
</section>

//a .
$(function() {
var arrText = [];
$(".list1").each(function(indx, ul) {
arrText[indx] = "";
$("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
$(".list1 li").css("border-color", "white");
$(this).css("border-color", "#000");
$(".bottom1").css("background", "url(" + img_path + ") repeat");
arrText[indx] = title;
$(".bloknot").html(arrText.join("<br>"))})
})
});

// b
$(function() {
var arrText = [];
$(".list2").each(function(indx, ul) {
arrText[indx] = "";
$("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
$(".list2 li").css("border-color", "white");
$(this).css("border-color", "#000");// Устанавливаем красную рамку у выбранной картинки
$('.bottom1').css('background','url('+img_path+') repeat'); // Меняем фон страницы
arrText[indx] = title;
$(".bloknot").html(arrText.join("<br>"))}) // пишем название
});
});

olmensk

24.02.2016, 20:53

скрипт именно это и делает
нет, не делает, у меня надписи заменяются.

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

рони

24.02.2016, 20:56

olmensk,
а зачем вы 2 скрипта вместо одного сделали????

рони

24.02.2016, 21:00

olmensk,
достаточно $(".list1, .list2"). или $(".ac-small") или $("ul")
перед циклом .each

olmensk

24.02.2016, 21:19

olmensk,
достаточно $(".list1, .list2"). или $(".ac-small") или $("ul")
перед циклом .each

заработало ))

olmensk

24.02.2016, 22:22

olmensk,
достаточно $(".list1, .list2"). или $(".ac-small") или $("ul")
перед циклом .each

Скажите пожалуйста ещё одно, последнее, вот у меня есть ещё один блок, как сделать подобное, что б в один блокнот записалось но с 3х аккордионов, НО 1и2 окрашивают bottom1, а 3й аккоридон окрашивает bottom2?

Просто если вставляю перед each ещё и list3, тогда аккордион закрашивает не тот div
а когда отдельно вставляю скрипт, то надпись из аккордионов 1и2 заменяется надписью из аккордиона3

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

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

<div class="bloknot"></div>

<section class="ac-container1">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">аккордеон1</label>
<article class="ac-small">
<ul class="list1">
<li path-img="images/a1.jpg"><img src="images/a1.jpg" data-title="надпись a1"></li>
<li path-img="images/a2.jpg"><img src="images/a2.jpg" data-title="надпись a2"></li>
</ul>
</article>
</div>
</section>

<section class="ac-container2">
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">аккордеон2</label>
<article class="ac-small">
<ul class="list2">
<li path-img="images/b1.jpg"><img src="images/b1.jpg" data-title="надпись b1"></li>
<li path-img="images/b2.jpg"><img src="images/b2.jpg" data-title="надпись b2"></li>
</ul>
</article>
</div>
</section>

<section class="ac-container3">
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">аккордеон2</label>
<article class="ac-small">
<ul class="list3">
<li path-img="images/c1.jpg"><img src="images/c1.jpg" data-title="надпись c1"></li>
<li path-img="images/c2.jpg"><img src="images/c2.jpg" data-title="надпись c2"></li>
</ul>
</article>
</div>
</section>

$(function() {
var arrText = [];
$(".list1, .list2").each(function(indx, ul) {
arrText[indx] = "";
$("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
$(".list1 li").css("border-color", "white");
$(this).css("border-color", "#000");
$(".bottom1").css("background", "url(" + img_path + ") repeat");
arrText[indx] = title;
$(".bloknot").html(arrText.join("<br>"))})
})
});

Это последнее, честное слово )

рони

24.02.2016, 23:30

olmensk,
$(function() {
var arrText = [];
$(".list1, .list2, .list3").each(function(indx, ul) {
arrText[indx] = "";
$("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
$("li", ul).css("border-color", "white");
$(this).css("border-color", "#000");
$(".bottom" + (indx == 2? 2 : 1)).css("background", "url(" + img_path + ") repeat");
arrText[indx] = title;
$(".bloknot").html(arrText.join("<br>"))})
})
});

olmensk

24.02.2016, 23:38

РОНИ, ты мегакрут! Огромнейшее спасибо от души! )))

olmensk

25.02.2016, 01:53

olmensk,
$(function() {
var arrText = [];
$(".list1, .list2, .list3").each(function(indx, ul) {
arrText[indx] = "";
$("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
$(".list1 li").css("border-color", "white");
$(this).css("border-color", "#000");
$(".bottom" + (indx == 2? 2 : 1)).css("background", "url(" + img_path + ") repeat");
arrText[indx] = title;
$(".bloknot").html(arrText.join("<br>"))})
})
});

Извини, извини, но.. почему-то только заметил цвет у блока не меняется (( . Надписи записываются как надо, а цвета не меняются ((
Что я не так делаю? (( непонимаю...

Вот эту надпись убираешь + (indx == 2? 2 : 1) и цвета меняются, но 3й аккордеон заливает цветом первый div и текст не вносится, а надпись оставляшь, текст вносится но цвета вообще не реагируют не в первом ни во втором ни в третем акордеоне.. (((

рони

25.02.2016, 01:56

olmensk,
$("li", ul).css("border-color", "white");

olmensk

25.02.2016, 02:07

olmensk,
$("li", ul).css("border-color", "white");

Вот так?

$(function() {
var arrText = [];
$(".list1, .list2, .list4").each(function(indx, ul) {
arrText[indx] = "";
$("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
$("li", ul).css("border-color", "white");
$(this).css("border-color", "#000");
$(".bottom1" + (indx == 2? 2 : 1)).css("background", "url(" + img_path + ") repeat");
arrText[indx] = title;
$(".bloknot").html(arrText.join("<br>"))})
})
});

(( не работает ((

+ (indx == 2? 2 : 1) убираешь и цвета 1и2 аккор меняют но 3й акор меняет не в том блоке, а оставляешь, цвета не реагируют вообще нигде. ((((

рони

25.02.2016, 02:10

olmensk,
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li{
border: 5px solid 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 = [];
$(".list1, .list2, .list3").each(function(indx, ul) {
arrText[indx] = "";
$("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
$("li", ul).css("border-color", "white");
$(this).css("border-color", "#000");
$(".bottom" + (indx == 2? 2 : 1)).css("background", "url(" + img_path + ") repeat");
arrText[indx] = title;
$(".bloknot").html(arrText.join("<br>"))})
})
});
</script>
</head>

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

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

<div class="bloknot"></div>

<section class="ac-container1">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">аккордеон1</label>
<article class="ac-small">
<ul class="list1">
<li path-img="images/a1.jpg"><img src="images/a1.jpg" data-title="надпись a1"></li>
<li path-img="images/a2.jpg"><img src="images/a2.jpg" data-title="надпись a2"></li>
</ul>
</article>
</div>
</section>

<section class="ac-container2">
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">аккордеон2</label>
<article class="ac-small">
<ul class="list2">
<li path-img="images/b1.jpg"><img src="images/b1.jpg" data-title="надпись b1"></li>
<li path-img="images/b2.jpg"><img src="images/b2.jpg" data-title="надпись b2"></li>
</ul>
</article>
</div>
</section>

<section class="ac-container3">
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">аккордеон2</label>
<article class="ac-small">
<ul class="list3">
<li path-img="images/c1.jpg"><img src="images/c1.jpg" data-title="надпись c1"></li>
<li path-img="images/c2.jpg"><img src="images/c2.jpg" data-title="надпись c2"></li>
</ul>
</article>
</div>
</section>

</body>

</html>

рони

25.02.2016, 02:13

olmensk,
или я не подозреваю о каком цвете речь кроме бордюра для li

olmensk

25.02.2016, 02:25

Да, тут работает,... но я переношу эту схему на мой "мод" и меняю всего один див bottom на своё название, дальше при + (indx == 2? 2 : 1) не работает, а если удалить то работает но 3й аккор меняет цвет не тому диву...

Вся структура 1 в 1 как я написал выше.

что не так? ((

Не бордер а заливка картинкой всего блока. непонимаю. .. надписи меняются как надо, а цвет перестал меняться...хотя аккор3 меняет, а аккр 1и2 перестали.

olmensk

25.02.2016, 18:48

olmensk,

Скажите пожалуйста, а если у меня такое, вместо сcылок на картинку, как-бы кнопка для div.
Как в таком случае правильно написать название, что б записалось в bloknot3?

<div class="bloknot3"></div>


<div id="mydiv7" style="display:none;">
<div class="np2l-1">
<div class="shape cuboid-7 cub-7">
<div class="face ft"></div>
</div>

</div>
<div id="mydiv8" style="display:none;">
<div class="np2l-1">
<div class="shape cuboid-8 cub-8">
<div class="face ft"></div>
</div>
</div>

<div id="mydiv9" style="display:none;">
<div class="np2l-1">
<div class="shape cuboid-9 cub-9">
<div class="face ft"></div>
</div>
</div>



<input id="ac-13" name="accordion-1" type="checkbox" />
<label for="ac-13">Заголовок</label>
<article class="ac-small">
<ul class="list5">
<li><a class="button7" href="javascript:void(0);" onclick="viewdiv('mydiv7');" data-title="текст название button7"></a></li>
<li><a class="button8" href="javascript:void(0);" onclick="viewdiv('mydiv8');" data-title="текст название button8"></a></li>
<li><a class="button9" href="javascript:void(0);" onclick="viewdiv('mydiv9');" data-title="текст название button9"></a></li>
</ul>
</article>



//список
$(function() {
var arrText = [];
$(".list1, .list2").each(function(indx, ul) {
arrText[indx] = "";
$("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
$(".list1 li, .list2 li").css("border-color", "white");
$(this).css("border-color", "#000");
$(".wall-top").css("background", "url(" + img_path + ") repeat");
arrText[indx] = title;
$(".bloknot3").html(arrText.join("<br>"))})
})
});



function viewdiv(id)
{
var el=document.getElementById(id);
if(el.style.display=="block")
{
el.style.display="none";
} else {
el.style.display="block";
}
}

olmensk

25.02.2016, 21:14

РОНИ

Я разобрался, сделал чуть по другому, сделал так:
<li><a class="button7" href="javascript:void(0);" onclick="viewdiv('mydiv7');" title="Угл"><img src="images/npview/button/7.png" data-title="- Дополнительный Угл"></a></li>
и всё заработало и менять в скрипте ничего не пришлось ))

рони

25.02.2016, 21:43

olmensk,

<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li{
border: solid #FF00FF 3px;
}
li a{
display: block;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
//список
$(function() {
var arrText = [];
$(".list5 li").each(function(indx, li) {
arrText[indx] = "";
$(li).click(function() {var img_path = $("a",this).attr("path-img"),title = $("a", this).data("title");
$(".list5 li").css("border-color", "white");
$(this).css("border-color", "#000");
//$(".wall-top").css("background", "url(" + img_path + ") repeat");
arrText[indx] = title;
$(".bloknot3").html(arrText.join("<br>"))})
})
});
function viewdiv(id)
{
var el=document.getElementById(id);
if(el.style.display=="block")
{
el.style.display="none";
} else {
el.style.display="block";
}
}

</script>
</head>

<body>
<div class="bloknot3"></div>


<div id="mydiv7" style="display:none;">
<div class="np2l-1">
<div class="shape cuboid-7 cub-7">
<div class="face ft">777</div>
</div></div>

</div>
<div id="mydiv8" style="display:none;">
<div class="np2l-1">
<div class="shape cuboid-8 cub-8">
<div class="face ft">888</div>
</div>
</div></div>

<div id="mydiv9" style="display:none;">
<div class="np2l-1">
<div class="shape cuboid-9 cub-9">
<div class="face ft">999</div>
</div>
</div></div>



<input id="ac-13" name="accordion-1" type="checkbox" />
<label for="ac-13">Заголовок</label>
<article class="ac-small">
<ul class="list5">
<li><a class="button7" href="javascript:void(0);" onclick="viewdiv('mydiv7');" data-title="текст название button7">7</a></li>
<li><a class="button8" href="javascript:void(0);" onclick="viewdiv('mydiv8');" data-title="текст название button8">8</a></li>
<li><a class="button9" href="javascript:void(0);" onclick="viewdiv('mydiv9');" data-title="текст название button9">9</a></li>
</ul>
</article>



</body>

</html>

olmensk

26.02.2016, 15:15

Спасибо огромное, всё работает, то, что я искал )))

olmensk

26.02.2016, 15:26

Скажите пожалуйста ещё одно, а как сделать, что б при "вЫключении блока", его надпись тоже "отключалась" из списка?
Просто получается блоки можно "скрыть или показать", а надпись появилась и навсегда даже когда блок скрыт.
Если невозможно, тогда ладно, Вы и так мне очень помогли, спасибо.

рони

26.02.2016, 20:53

olmensk,
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li{
border: solid #FF00FF 3px;
}
li a{
display: block;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
//список
$(function() {
var arrText = [];
$(".list5 li").each(function(indx, li) {
arrText[indx] = "";
$(li).click(function() {var img_path = $("a",this).attr("path-img"),title = $("a", this).data("title"), id = $("a", this).data("viewdiv");
$(".list5 li").css("border-color", "white");
$(this).css("border-color", "#000");
id = $(id).toggle().is(":hidden")
arrText[indx] = id ? "" : title;
$(".bloknot3").html(arrText.join("<br>"))})
})
});
</script>
</head>

<body>
<div class="bloknot3"></div>


<div id="mydiv7" style="display:none;">
<div class="np2l-1">
<div class="shape cuboid-7 cub-7">
<div class="face ft">777</div>
</div></div>

</div>
<div id="mydiv8" style="display:none;">
<div class="np2l-1">
<div class="shape cuboid-8 cub-8">
<div class="face ft">888</div>
</div>
</div></div>

<div id="mydiv9" style="display:none;">
<div class="np2l-1">
<div class="shape cuboid-9 cub-9">
<div class="face ft">999</div>
</div>
</div></div>



<input id="ac-13" name="accordion-1" type="checkbox" />
<label for="ac-13">Заголовок</label>
<article class="ac-small">
<ul class="list5">
<li><a class="button7" href="javascript:void(0);" data-viewdiv="#mydiv7" data-title="текст название button7">7</a></li>
<li><a class="button8" href="javascript:void(0);" data-viewdiv="#mydiv8" data-title="текст название button8">8</a></li>
<li><a class="button9" href="javascript:void(0);" data-viewdiv="#mydiv9" data-title="текст название button9">9</a></li>
</ul>
</article>



</body>

</html>

olmensk

26.02.2016, 22:28

РОНИ Вы просто супер!! Всё работает как надо!! ОГРОМНОЕ СПАСИБО!! Я указал Вас возле скрипта =)