| |
|
|
| | Здравствуйте, подскажите, как сделать на JQUERY или может уже имеется подобное, нужно сделать форму где при вводе значения в поле "ширина", автоматически пересчитывалось в другом поле "высота", тоесть автоматически ввёлся подсчёт пропорции размеров изображения. И наоборот, если в поле "высота" прописываешь значение, то автоматически пересчитывалось в поле "ширина".
Тут только нужен подсчёт, дальше я буду отправлять значения PHP скрипту на ресайз. | |
| |
|
|
| |
|
|
| |
для: web777
(08.05.2012 в 07:03)
| | | Относительно чего?
<script type="text/javascript">
var img = [400,200]; //размеры изображения (w,h), относительно которого расчет
$(function() {
$("#im").on('keyup','input', function() {
var i = $(this).index();
var n = ($(this).val()/img[i])*img[i^1];
$("#im input").eq(i^1).val(n);
});
});
</script>
<div id="im">
<input id="w" />
<input id="h" />
</div>
|
PS. Только учтите - это красивость, и если для пользователей, то не годится. Я же пошутить могу тогда. | |
| |
|
|
| |
|
|
| |
для: confirm
(08.05.2012 в 09:19)
| | | confirm, ваш код мне больше понравился, из-за его малого размера. Было бы не плохо обернуть код в отдельную функцию, т.к. вариантов размеров фото будет несколько штук не более четырех, а для каждого из них писать код неудобно. Ну и проверку сделать от больших чисел, было вообще супер.
Спасибо за реализацию! | |
| |
|
|
| |
|
|
| |
для: web777
(10.05.2012 в 10:33)
| | | Так это и есть функция, и ничего не надо оборачивать. Вот только посоветовать как же ею воспользоваться разными изображениями и вариантами, я не могу, для этого нужно знать более конкретно как у вас это реализовано.
Изображения на сервере? | |
| |
|
|
| |
|
|
| |
для: confirm
(10.05.2012 в 11:10)
| | | проще думаю ввиде отдельных скриншотов показать:
http://clip2net.com/s/1U8J7
http://clip2net.com/s/1U8Jp
ваш код будет работать только для одной копии изображения, чтобы сделать для всех 4х, нужно копировать код, но уже для каждой копии под своим индексом. Допустим сейчас у вас имена двух полей w и h, для другой копии нужно например w2 и h2 тоже и в самом коде нужно изменять.
Было бы не плохо как то передавать функции индексы названий полей, чтобы не писать для каждой копии изображений, отдельный код.
Вот как то так, думаю понятно объяснил:) | |
| |
|
|
| |
|
|
| |
для: web777
(11.05.2012 в 08:35)
| | | Мой код будет работать с любым числом изображений (объектов).
Я так понял, что пользователь выбирает файл (из списка, к примеру), а затем на этой странице выбирает необходимые ему размеры, и после этого скачивает их с сервера. Так я понял? А если так, то почему кнопка Скачать всего одна, если выбрать можно несколько эскизов? | |
| |
|
|
| |
|
|
| |
для: confirm
(11.05.2012 в 08:43)
| | | да нет, тут немного не так. Это закрытая страница с настройками изображения, я не привел её полностью, т.к. выделил только нужное. Тут администратор/менеджер выставляет значения. А на другой публичной странице через плагин uploadify3, пользователь загружает одно или несколько фото, только при этом выставленные значения подставляются при загрузке фотографий. | |
| |
|
|
| |
|
|
| |
для: web777
(11.05.2012 в 13:01)
| | | Понятно, если администратор, значит свой волк.
Код внизу, пояснения есть, можно править под себя. | |
| |
|
|
| |
|
|
| |
для: web777
(11.05.2012 в 08:35)
| | |
<?
if($_POST) {
echo '<pre>';
print_r($_POST);
if(isset($_POST['check'])) {
$work = array_intersect_key($_POST['sizes'], $_POST['check']);
echo 'The chosen sizes<br />';
print_r($work);
}
echo '</pre>';
}
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var imp = [<?php echo (800).','.(1200);?>];
$(function() {
$("#mdm, #sml, #min").on('keyup','input', function() {
if($(this).val()) {
var i = $(this).attr('id').charCodeAt() & 1;
var target = String.fromCharCode(98 | i ^ 1);
var n = parseInt(($(this).val()/imp[i])*imp[i^1]);
$(this).parent().children('#'+target).val(n);
} else return false;
}).on('keydown','input', function(e) {
if((e.keyCode<48 && e.keyCode!=37 && e.keyCode!=39
&& e.keyCode!=46 && e.keyCode!=8) || e.keyCode>57) return false;
else {
//проверка доступных размеров
}
});
});
</script>
</head>
<body>
<form method="post">
Medium
<div id="mdm">
W <input id="b" name="sizes[medium][w]" />
H <input id="c" name="sizes[medium][h]" />
<input type="checkbox" name="check[medium]" />
</div>
Small
<div id="sml">
W <input id="b" name="sizes[small][w]" />
H <input id="c" name="sizes[small][h]" />
<input type="checkbox" name="check[small]" />
</div>
Mini
<div id="min">
W <input id="b" name="sizes[mini][w]" />
H <input id="c" name="sizes[mini][h]" />
<input type="checkbox" name="check[mini]" />
</div>
<input type="submit" value="Get" />
</form>
</body>
</html>
|
Комментарии:
Так как кроме полей ввода размеров есть и другие поля, назначение которых для меня темный лес (Директория), то "опознавание" поля в который происходит ввод иное. Хотя по-прежнему поля заключены в родителей, но в данном случае их не два, а все сопутствующие выбираемому размеру. Следовательно выбор по индексу может быть затруднен, если в родителей, перед этими полями возможно будут добавлены еще. Хотя, если поля ввода размеров помещать первыми, то можно продолжать использование индексов в наборе.
Но здесь описан другой способ - по значениям атрибутов id полей, в качестве которых может быть любые литеры, с условием, что поля выбора ширины должны иметь литеру, младший бит кода которой равен 0, а у полей выбора высоты 1. При получении литеры целевого поля нужно складывать (лог. OR) десятичный код литеры поля выбора ширины с инверсным значением полученного индекса (XOR).
Можно поступить иным способом - размеры исходника, это объект, выбор значений из которого по значениям id полей. А узнать id целевого поля по условию.
Если Директории подразумевают ввод, то в обработчике следует добавить проверку полей, и если это поля выбора размеров, обработка, иначе выход.
Обработчик события keydown запрещает ввод не цифровых значений и разрешает клавиши забоя, удаления, курсоров влево и вправо. Если требуется проверка на доступные в каждом выборе значения, то ее можно описать в этом же обработчике.
Размеры исходного изображения помещаются в скрипт на стороне сервера в массив imp.
При вычислении значения для другого поля, учитываются только целое от результата. Другими словами, если при расчете получается 80.8, то 0.8 будет отброшено.
Имена полей организованы как два массива: массив размеров и массив выбора (о директории я не имею представления), ключи которых одинаковы. Это позволяет легко узнать на сервере выбор (пример в начале страницы).
Проверка на клиенте, все это прелюдия, действительную проверку нужно производить на сервере. | |
| |
|
|
| |
|
|
| |
для: confirm
(11.05.2012 в 13:03)
| | | здорово, спасибо огромное, действительно исчерпывающая информация.
Насчёт директория, это для выбора, если стоит галочка на против нужного размера фото, то при загрузке такое фото будет создаваться с таким размером в такой директории(что прописано в поле). Тоесть бывает случай когда не требуется более двух размеров, таким образом можно сделать выбор, в каждом из случаев. Такой вариант я ещё никогда не делал, решил попробовать, думаю удобно будет в будущем. Но тут полей куда ещё больше(путь для загрузки на сервере, вводный знак, качество фото и т.п.), это так сказать отдельный компонент для созданий разных профилей. Созданный такой профиль(массив значений) будет подключать какой нибудь модуль.
Тогда не придется писать отдельный загрузчик для каждого модуля отдельно, и страницу с настройками фото.
А насчёт проверки на сервере, я полностью согласен, но тут доступ будут иметь либо администратор, либо назначенный менеджер, но никто из них не будет корыстных целей.Но что то всё равно будет проверятся на стороне сервера однозначно.
кстати, а можно ещё сделать доп. проверку, на ограничение больших размеров?, например не более w:3000 и h:3000 если пользователь введёт больше этого числа, то скрипт обнуляет число, или просто не позволяет вводить больше.Както так. Я думаю проверку на то поле в котором прописывается число в данный момент, а то поле которое пересчитывается, проверку можно не делать т.к всёравно не слишком значительный размер будет от вводимого. | |
| |
|
|
| |
|
|
| |
для: web777
(11.05.2012 в 20:45)
| | | >вводный знак
Это что за знак такой? ) Водяной? Если говорить точно, то просто наложение прозрачной картинки, логотипа владельца, так как к watermark эта операция отношения не имеет.
Сделать можно все чего хочется, ну или почти все. Вот только не понять, относительно чего не больше 3000? Я так понимаю - на сервер уже имеется ранее загруженное изображение, для которого и изготавливаются малые копии. Из этого следует:
а) изображение уже имеет уникальный идентификатор сформированный MySQL. Малые же копии изображения могут иметь этот же id с указанием префикса (mid_, small_, mini_), и находиться в той же директории, что и изображение источник. Либо в директориях medium, small, mini, и содержать в имени только id родителя (изображения источника). Поэтому какой-то выбор id на странице редактирования (ID_Rand) выглядит более чем странно;
б) если размер исходного изображения, например, 2000х1500, то допуск до 3000х3000 будет означать увеличение размеров. Если речь идет об уменьшении, то значит должен быть некий верхний предел для каждой копии, то есть, среднее изображение не может быть равно исходному, иначе пропадает всякий смысл. Если уж и сравнивать, то с некой величиной в процентах от исходного.
Вот измененный код. Запускайте непосредственно это как страницу и смотрите. В данном случае будут случайно выбираться исходные размеры. Также задаются максимальные размеры для каждой из копии в процентах от исходного: 80, 50 и 30.
В код добавлены новые поля, как пример, что можно все что угодно привязать к каждому выбору, включая и качество, и тип, и т.д..
Почему эти дополнительные поля обрамляются своим родителем, а поля ввода размеров своим, я объяснять не буду, это думаю понятно из ранее сказанного.
<?
$mdm = 80;
$sml = 50;
$min = 30;
$img = array(
array('w'=>800,'h'=>1200),
array('w'=>2400,'h'=>1200),
array('w'=>1200,'h'=>900),
array('w'=>1800,'h'=>1000)
);
$src = rand(0,3);
if($_POST) {
echo '<pre>';
print_r($_POST);
if(isset($_POST['check'])) {
$work = array_intersect_key($_POST['sizes'], $_POST['check']);
echo 'The chosen sizes<br />';
print_r($work);
}
echo '</pre>';
}
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var imp = [<?php echo $img[$src]['w'].','.$img[$src]['h'];?>];
var adm = {'mdm':<?php echo $mdm;?>,'sml':<?php echo $sml;?>,'min':<?php echo $min;?>};
function checkMax(e) {
var p = $(e).closest('div.up').attr('id');
var i = $(e).index();
return (e.value > imp[i]*adm[p]/100) ? false : true;
}
function setSize(e) {
var i = $(e).index();
var n = parseInt((e.value/imp[i])*imp[i^1]);
$(e).parent().children().eq(i^1).val(n);
}
$(function() {
$("#mdm div:first, #sml div:first, #min div:first")
.on('keyup','input', function() {
if(this.value) {
if(!checkMax(this)) {
this.value = this.value.slice(0,-1);
return false;
}
setSize(this);
} else return false;
}).on('keydown','input', function(e) {
if((e.keyCode<48 && e.keyCode!=37 && e.keyCode!=39
&& e.keyCode!=46 && e.keyCode!=8) || e.keyCode>57) return false;
setSize(this);
});
});
</script>
<style>
#mdm div, #sml div, #min div {
display: inline-block;
}
</style>
</head>
<body>
<p>The image a source <?php echo $img[$src]['w'].'x'.$img[$src]['h'];?></p>
<form method="post">
Medium
<div id="mdm" class="up">
<div>
W <input name="sizes[medium][w]" />
H <input name="sizes[medium][h]" />
</div>
<div>
Dir <input name="sizes[medium][dir]" />
Mime <select name="sizes[medium][mime]">
<option value="1" selected>png</option>
<option value="2">jpg</option>
<option value="3">gif</option>
</select>
Quality <input name="sizes[medium][qual]" />
<input type="checkbox" name="check[medium]" />
</div>
</div>
Small
<div id="sml" class="up">
<div>
W <input name="sizes[small][w]" />
H <input name="sizes[small][h]" />
</div>
<div>
Dir <input name="sizes[small][dir]" />
Mime <select name="sizes[small][mime]">
<option value="1" selected>png</option>
<option value="2">jpg</option>
<option value="3">gif</option>
</select>
Quality <input name="sizes[small][qual]" />
<input type="checkbox" name="check[small]" />
</div>
</div>
Mini
<div id="min" class="up">
<div>
W <input name="sizes[mini][w]" />
H <input name="sizes[mini][h]" />
</div>
<div>
Dir <input name="sizes[mini][dir]" />
Mime <select name="sizes[mini][mime]">
<option value="1" selected>png</option>
<option value="2">jpg</option>
<option value="3">gif</option>
</select>
Quality <input name="sizes[mini][qual]" />
<input type="checkbox" name="check[mini]" />
</div>
</div>
<input type="submit" value="Get" />
</form>
</body>
</html>
|
Изображения лучше разбивать по содержимому - Природа, Цветы, Животные... И эти директории фиксированные. Если каждый пользователь будет создавать кучу директорий.... Во-первых нужно проверять, что он вводит, во-вторых есть ли уже такая, и т.п... Если уж как-то и привязывать директории к пользователю, то уж лучше пусть это делает сервер, автоматически.
Что касается качества изображения, то нужно будет тоже проверять, так как для jpg нужно указывать в процентах от 0 до 100, для png это уровень компрессии от 0 до 9, а качество gif определяется числом цветов в палитре: 2 - 256 и дизерингом.
Если же в данном случае речь идет о изображении не на сервере, а загружаемом, а к нему добавляются малые копии, то уж лучше такую админку выполнять на клиенте. В этом случае непосредственно на клиенте можно производить все операции с изображением: обрезка, изменение размеров, применение фильтров, нанесение логотипов и др.. Да и инструментов под рукой масса, и ограничения многие сняты. | |
| |
|
|
| |
|
|
| |
для: confirm
(12.05.2012 в 04:50)
| | | здорово, только сейчас заметил такое, если водить по символу, проверка срабатывает, но если нажать на число и не отпуская кнопку, поле заполняется пока не отпустишь кнопку. А так всё отлично.
По поводу водного знака, да всё верно, имелось введу наложение картинки(watermark). Я переименую, а то правда не понятно)
Сделал ещё один скрин
http://clip2net.com/s/1UnNs
это полная форма, для создания конфига состоящий из массива. Это не страница загрузки фотографий, а страница настроек. Пользователь не будет иметь доступ к выбору директории, качество изображений. Эта страница будет доступна только администраторам. И предполагается что настраивается эта страница будет один раз, до запуска модуля, к примеру новости. Изначально выставить настройки, прописать какие каталоги для какого формата, и остальные параметры. Потом, на другой странице, пользователь будет иметь возможность нажать на одну кнопку для выбора файла(ов), далее PHP скрипт по тем выставленным настройкам будет загружать фотографии. В качестве загрузчика, применяю uploadify3, но в нём нет клиентского функционала, поэтому фото будет ресайзится на сервере.
Кстати, фото будет привязываться к записи(новости) по ID номеру. Будет отдельная директория ID/, например
upload/news/id/original/
upload/news/id/mini/
|
в первом пути загрузка оригинального размера, во втором уменьшенный размер. Директория ID это номер новости | |
| |
|
|
| |
|
|
| |
для: web777
(12.05.2012 в 08:28)
| | | > если нажать на число и не отпуская кнопку, поле заполняется пока не отпустишь кнопку.
Просто добавьте идентичную проверку в обработчик события keydown, вот так будет выглядеть он:
.on('keydown','input', function(e) {
if((e.keyCode<48 && e.keyCode!=37 && e.keyCode!=39
&& e.keyCode!=46 && e.keyCode!=8) || e.keyCode>57) return false;
if(!checkMax(this)) {
this.value = this.value.slice(0,-1);
return false;
}
setSize(this);
|
А еще лучше переписать функцию проверки так:
function checkMax(e) {
var p = $(e).closest('div.up').attr('id');
var i = $(e).index();
if(e.value > imp[i]*adm[p]/100) {
e.value = e.value.slice(0,-1);
return false
} else return true;
}
|
а в обоих обработчиках (keydown и keyup) добавить вызов ее:
if(!checkMax(this)) return false;
|
Естественно удалив прежние вызовы.
Кроме этого нужно добавить проверку на ввод значений размеров (как собственно и остальных обязательных параметров) тех наборов, у которых отмечен чекбокс, при отправке формы.
Чуть позже допишу.
А вот с качеством лажа. Я же ведь писал, да и вы должны прекрасно знать, что для каждого типа изображения, понятие качества разные. А в вашей форме это справедливо только для JPEG. И выбирать надо не расширение, а mime тип - расширение .jpg и .jpeg, это один и тот же mime тип, и под каким расширением он будет, разве это так важно.
Что касается привязки имен, то даже в одной директории расположи все, можно выбрать по маске в glob(), имея ввиду префикс. Ну а в раздельных категориях вообще простота. Другими словами, в базе можно хранить при этом имя только основного изображения, и можно признак наличия малых. Так удобнее производить удаление, так как не потребуется узнавать имена малых изображений при удалении основного.
PS. Вот такую проверку при отправке формы нужно добавить:
$('form').submit(function() {
if(chk = $(this).find('input:checked')) {
var er = '';
$(chk).each(function(){
var p = $(this).closest('div.up').attr('id');
if(!$('#'+p).find('div:first input:first').val())
er += 'The sizes for the ' + err[p]
+ ' image are not chosen\n';
});
}
if(er) {
alert(er);
return false;
}
});
|
Ее также как и другие обработчики нужно заключить в блок $(function() {... А в тело скрипта добавить объект:
var err = {'mdm':'medium','sml':'small','min':'mini'};
|
| |
| |
|
|
| |
 6.1 Кб |
|
| |
для: web777
(08.05.2012 в 07:03)
| | | вот, вырезала из редактора. это не jQuery, зато понятно. | |
| |
|
|
| |
|
|
| |
для: elenaki
(08.05.2012 в 09:56)
| | | А что непонятного на jQuery? )
И слишком много писанины в прикреплении, можно и на чистом JS описать все гораздо проще. | |
| |
|
|
| |
|
|
| |
для: confirm
(08.05.2012 в 11:07)
| | | понятно то, что мой файл распаковал - и работаешь. а с вашим кодом что делать? даже версии jQuery не указано... а писанина не моя - сказала же "вырезано из редактора". :P | |
| |
|
|
| |
|
|
| |
для: elenaki
(08.05.2012 в 12:28)
| | | Ваш код (пусть из вырезка из чего-то) излишне и неоправданно большой.
То что я привел, будет работать в любой версии jQuery, если метод .on() заменить более устаревшим, например, .live(). А с этим методом только не ниже 1.7, которая всегда доступна на Гугле, и которую подключать лучше именно от туда. Так что за работоспособность можете не волноваться.
А сам код базируется на том, что в JS (а не только в jQuery) всегда можно получить массив дочерних элементов у любого родителя. По этим же соображениям обработка событий onchange элементов input делегируется родителю.
А массив, это индексы. А так как требуется обработка всего двух полей, то это обстоятельство в данном случае удобно использовать, так как простой операцией XOR просто, без всяких проверок, можно узнать какой элемент активен был, а какой "молчал". По этим индексам узнаем и размеры, которые тоже удобно разместить в массиве. По этим же индексам легко изменить значение поля другого элемента input.
Остается добавить проверку на ввод только цифр, и разрешить клавиши курсоры влево/вправо, Backspace и Delete.
Вот и вся суть. Согласитесь, что если все это описать на JavaScript, то получится тоже более лаконично, намного проще и короче, чем то, что вы привели. ;-) | |
| |
|
|
| |
|
|
| |
для: confirm
(08.05.2012 в 13:07)
| | | многа букаф | |
| |
|
|
| |
|
|
| |
для: elenaki
(08.05.2012 в 13:15)
| | | На много меньше, чем в вашем коде. ;-) | |
| |
|
|
|
