Как в аккордеоне нажать на ссылку и что б надпись ссылки появилась в отдельном окне.
Здравствуйте.
Есть акордеон, внутри него есть список типа: <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, типа хочу сделать своеобразный "блокнот" где писалось какая картинка высветилась. Спасибо. |
olmensk,
http://fancyapps.com/fancybox/ |
Цитата:
|
Цитата:
Цитата:
|
Цитата:
Тоесть появляется картинка (она и так появляется), а параллельно в отдельном div пишется её номер или имя. |
olmensk,
так сделайте див с нужной информацией и по клику на картинку покажите этот див ... непонятно в чём проблема? |
Цитата:
Мне что б клацая ка превью, в отдельном окошке писалось название этой картики которую превью представляет. |
Цитата:
|
Цитата:
|
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, что б в него писалось название или номер картинки на которую нажали. |
Цитата:
|
Цитата:
Вот я и спрашиваю, что и как надо в моём случае добавить, что б кроме закрашивания дива bottom в ещё одном диве написалось название картинки. Скрипт может какой есть или так, я просто не понимаю как сделать правильно. |
olmensk,
я пас ... Цитата:
|
Цитата:
|
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, поэтому прошу помочь. )) |
Цитата:
|
Цитата:
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,
о наконецто 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>
|
Цитата:
Назвние в bottom2 появляется, это то, что надо, но первый блок bottom1 не закрашивается в выбранную картинку почемуто... (( |
olmensk,
здесь закрашивается? если да то посмотрите структуру ul и элементов в этом списке |
ПО-МОЕМУ РАЗОБРАЛСЯ!!! ))))))))))
СПАСИБО!!! ВЫ ЧУДО !!!!!!!!!!! СПАСИТЕЛЬ МОЙ :) ПОКАЗЫВАЮ: <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,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Скажите пожалуйста ещё одну вещь,
если 2 - 3 аккордеона на одной странице, и в каждом выбрать по одному рисунку рандомно, то как сделать, что б в bottom2 написались отдельно каждая выбраная картинка, ато получается названия самоменяются, например в 1м акордеоне выбрал картинку и появилось название "фигня1", во втором выбрал картинку и название "фигня1" заменилась на новое, а как сделать, что б название из 1го аккордеона осталось, а со 2го акордеона название написалось рядом с названием из 1го акордеона, или с новой строки, и так с третьего тоже с новой и в bottom2 появлялиь назвния с каждого аккордеона. Надеюсь понятно написал ^^)) |
olmensk,
$('.bottom2').html($('.bottom2').html() + "<br>"+ title);
|
То, что надо!!!
ОГРОМНОЕ СПАСИБО!! ))))))))))))))))) "..название из 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
});
});
|
А можно ещё один, последний вопрос? ))) понимаю, что поднадоел, но сам не разберусь (( :)
Сейчас при каждом нажатии появляется название с новой строки, даже если 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,
<!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>
|
Не получилось!
Надписи самозаменяются везде. ! В пределах одного аккордиона надписи самозаменяются, это ок, но когда клацаю на превьюшку 2го аккордеона, то надпись из 1го аккордиона заменяется на надпись из 2го аккордиона. ...такоеже и с третим аккордионом, его надпись заменяется на надпись из предыдущих 2х... а по отдельности, в контексте одного аккордиона, всё как надо. Теперь бы сделать как-то так, что б из 1го аккор. надпись осталась когда клацаешь на 2й. Пытался, пытался, у меня не получается такое, помогите. |
Цитата:
|
<div class="bottom1"></div><!--блок который будет закрашен выбранной картинкой из любого акордеона-->
<div class="bloknot"></div><!--блок в котором напишется название картинки которая закрасит блок bloknot-->
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container1"><!--аккордион1-->
<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"><!--аккордион2-->
<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>"))}) // пишем название
});
});
|
Цитата:
С каждого аккордеона, должно появиться в итоге по одной надписи, а получается что в пределах 1го аккордиона надписи меняются, а выбираешь во втором, то надпись из 2го заменяет надпись из 1го, а надо ,что б надпись "добавилась" снизу и было уже 2 надписи (1й и 2й аккодеоны) и так с третим и 4м. |
olmensk,
а зачем вы 2 скрипта вместо одного сделали???? |
olmensk,
достаточно $(".list1, .list2"). или $(".ac-small") или $("ul") перед циклом .each |
Цитата:
|
Цитата:
Просто если вставляю перед each ещё и list3, тогда аккордион закрашивает не тот div а когда отдельно вставляю скрипт, то надпись из аккордионов 1и2 заменяется надписью из аккордиона3
<div class="bottom1"></div><!--блок1 который будет закрашен выбранной картинкой из любого акордеона 1и2-->
<div class="bottom2"></div><!--блок2 который будет закрашен выбранной картинкой из акордеона 3-->
<div class="bloknot"></div><!--блок в котором напишется название картинки которая закрасит блок bloknot-->
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container1"><!--аккордион1-->
<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"><!--аккордион2-->
<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"><!--аккордион3-->
<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>"))})
})
});
Это последнее, честное слово ) |
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>"))})
})
});
|
РОНИ, ты мегакрут! Огромнейшее спасибо от души! )))
|
Цитата:
Извини, извини, но.. почему-то только заметил цвет у блока не меняется (( . Надписи записываются как надо, а цвета не меняются (( Что я не так делаю? (( непонимаю... Вот эту надпись убираешь + (indx == 2? 2 : 1) и цвета меняются, но 3й аккордеон заливает цветом первый div и текст не вносится, а надпись оставляшь, текст вносится но цвета вообще не реагируют не в первом ни во втором ни в третем акордеоне.. ((( |
| Часовой пояс GMT +3, время: 06:13. |