24.02.2016, 17:48
|
|
Аспирант
|
|
Регистрация: 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.
|
|
24.02.2016, 18:00
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
|
olmensk,
здесь закрашивается? если да то посмотрите структуру ul и элементов в этом списке
|
|
24.02.2016, 18:06
|
|
Аспирант
|
|
Регистрация: 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.02.2016, 18:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
olmensk,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
24.02.2016, 18:27
|
|
Аспирант
|
|
Регистрация: 24.02.2016
Сообщений: 33
|
|
|
Скажите пожалуйста ещё одну вещь,
если 2 - 3 аккордеона на одной странице, и в каждом выбрать по одному рисунку рандомно, то как сделать, что б в bottom2 написались отдельно каждая выбраная картинка,
ато получается названия самоменяются, например в 1м акордеоне выбрал картинку и появилось название "фигня1", во втором выбрал картинку и название "фигня1" заменилась на новое,
а как сделать, что б название из 1го аккордеона осталось, а со 2го акордеона название написалось рядом с названием из 1го акордеона, или с новой строки, и так с третьего тоже с новой и в bottom2 появлялиь назвния с каждого аккордеона.
Надеюсь понятно написал ^^))
Последний раз редактировалось olmensk, 24.02.2016 в 18:38.
|
|
24.02.2016, 18:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
olmensk,
$('.bottom2').html($('.bottom2').html() + "<br>"+ title);
|
|
24.02.2016, 18:45
|
|
Аспирант
|
|
Регистрация: 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.
|
|
24.02.2016, 19:17
|
|
Аспирант
|
|
Регистрация: 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.
|
|
24.02.2016, 19:43
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
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>
|
|
24.02.2016, 20:43
|
|
Аспирант
|
|
Регистрация: 24.02.2016
Сообщений: 33
|
|
|
Не получилось!
Надписи самозаменяются везде. !
В пределах одного аккордиона надписи самозаменяются, это ок,
но когда клацаю на превьюшку 2го аккордеона, то надпись из 1го аккордиона заменяется на надпись из 2го аккордиона.
...такоеже и с третим аккордионом, его надпись заменяется на надпись из предыдущих 2х...
а по отдельности, в контексте одного аккордиона, всё как надо.
Теперь бы сделать как-то так, что б из 1го аккор. надпись осталась когда клацаешь на 2й.
Пытался, пытался, у меня не получается такое, помогите.
|
|
|
|
