jQuery плагин выбора изображений
Пишу плагин выбора изображения для сайта, но возникли некоторые вопросы. Помогите разобраться.
Смысл таков. При создании поста на сайте пользователю предлагается выбрать 2 изображения: большое и маленькое. Соответственно 2 кнопки: выбрать большое изображение и выбрать маленькое. Возле каждой кнопки есть изображение-превью. Например, пользователь нажимает на кнопку "выбрать большое изображение", появляется всплывающее окно, где он выбирает изображение и нажимает кнопку "ок". Далее всплывающее окно исчезает и в превью отображается выбранное изображение. Проблема в том, что при выборе большого изображения, заполняется и маленькое. И наоборот. Вот накидал в песочнице простой аналог, только вместо выбора диалога с изображениями появляется простое окно с кнопкой "цвет". http://codepen.io/fatalstrike/pen/bIfBy Заранее спасибо за помощь :) js код плагина:
(function ($) {
$.fn.test = function (options) {
options = $.extend({
'color': '#777',
'myclick': function () {
}
}, options);
var $this = this;
var color_btn = $("#button");
var popup = $('.popup');
$.each($this, function () {
$(this).click(function () {
popup.css('display', 'block');
popup.find('p').text('Квадрат должен окрасится в цвет: ' + options.color);
})
color_btn.click(function() {
popup.css('display', 'none');
var color = options.color;
options.myclick.call($this, color);
});
});
}
})(jQuery);
$('#close').click(function() {
$(this).parent().css('display', 'none');
});
$('#link1').test({
color: 'red',
myclick: function (color) {
$('.box').css('background', color);
}
});
$('#link2').test({
color: 'green',
myclick: function (color) {
$('.box').css('background', color);
}
});
|
fatalstrike,
Вариант...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
<!-- .box {
display: block;
width: 100px;
height: 100px;
background: gray;
}
.popup {
display: none;
position: fixed;
top: 20%;
left: 40%;
width: 200px;
height: 100px;
background: gray;
padding: 10px;
}
-->
</style>
</head>
<body>
<div class="box"></div> <a href="#" id="link1">link1</a>
<br> <a href="#" id="link2">link2</a>
<div class="popup">
<p>text</p>
<button id="button">COLOR!</button>
<button id="close">Close this</button>
</div>
<script>
(function ($) {
$.fn.test = function (options) {
options = $.extend({
'color': '#777',
'myclick': function () {}
}, options);
var $this = this;
var color_btn = $("#button");
var popup = $('.popup');
$.each($this, function () {
$(this).click(function () {
popup.css('display', 'block');
popup.find('p').text('Квадрат должен окрасится в цвет: ' + options.color);
color_btn.click(function () {
popup.css('display', 'none');
var color = options.color;
options.myclick.call($this, color);
});
})
});
}
})(jQuery);
$('#close').click(function () {
$(this).parent().css('display', 'none');
});
$('#link1').test({
color: 'red',
myclick: function (color) {
$('.box').css('background', color);
}
});
$('#link2').test({
color: 'green',
myclick: function (color) {
$('.box').css('background', color);
}
});
</script>
</body>
</html>
|
А Если сделать тоже, только с двумя квадратами, то при выборе цвета для одного квадрата, окрашивается и другой
http://codepen.io/fatalstrike/pen/ixabd Подскажите, что не так в этом случае |
fatalstrike, попробуйте размещать пример прямо тут
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. Вариант ... добавлена строка 73 и исправлена функция кнопки закрытия
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.box {
display: table-cell;
vertical-align: middle;
width: 100px;
height: 100px;
background: gray;
text-align: center;
font-size: 20px;
font-weight: bold;
}
.popup {
display: none;
position: fixed;
top: 20%;
left: 40%;
width: 200px;
height: 100px;
background: gray;
padding: 10px;
}
.pull-left
{
float: left;
margin-right: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="pull-left">
<div class="box" id="box1">box1</div>
<a href="#" id="link1">Выбрать цвет</a>
</div>
<div class="pull-left">
<div class="box" id="box2">box2</div>
<a href="#" id="link2">Выбрать цвет</a>
</div>
<div class="popup">
<p>Выберите цвет
<select id="color_select">
<option value="red">Красный</option>
<option value="green">Зеленый</option>
</select></p>
<div> <button id="button">Окрасить</button>
<button id="close">Закрыть</button></div>
</div>
<script>
(function ($) {
$.fn.test = function (options) {
var options = $.extend({
'myclick': function () {}
}, options);
var $this = this;
var color_btn = $("#button");
var popup = $('.popup');
$.each($this, function () {
$(this).click(function () {
popup.css('display', 'block');
color_btn.unbind();
color_btn.click(function () {
popup.css('display', 'none');
var color = $('#color_select').val();
options.myclick(color);
});
})
});
}
})(jQuery);
$('#close').click(function () {
$('.popup').css('display', 'none');
});
$('#link1').test({
myclick: function (color) {
$('#box1').css('background', color);
}
});
$('#link2').test({
myclick: function (color) {
$('#box2').css('background', color);
}
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 00:51. |