Форум программистов, компьютерный форум, киберфорум
JavaScript
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > JavaScript
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
10 / 10 / 0
Регистрация: 12.04.2012
Сообщений: 333
1

Добавить параметр, меняющий размер фото

24.09.2014, 16:27. Показов 1143. Ответов 5
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Вот написанный код - http://jsbin.com/sotufe/1/edit

У меня на форме есть input поле. Мне на этом же месте нужен select с несколькими опциями (маленькое, среднее, большое фото) И основная функция myimg имеет параметр myimage:

Javascript
1

function myimg(myimage) {}
Помогите мне добавить второй параметр - size - который регулирует размеры фото (устанавливает max-width и max-height) в зависимости от того, что выбрал пользователь из селекта: маленькое, среднее, большое фото.

Javascript
1

function myimg(myimage, size) {}
Добавлено через 19 минут
И еще как туда добавить нижний бар фото, как в этом примере - http://learn.javascript.ru/play/BwiZ
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 24.09.2014, 16:27
Ответы с готовыми решениями:

Макрос, меняющий размер шрифта на определенную величину
Здравствуйте. Задачка такая. Есть вордовский документ, в котором часть слов набрана Times New...

TextBox, меняющий размер при вводе текста
Здравствуйте. Возник вопрос: как динамически менять размер textBox'a при вводе в него текста? То...

Как добавить ВК фото в блок с фото на стене (там где 4 фотки)
Собственно сюда:

Уменьшить размер фото
Вот коды <li id="page_Portfolio"> <div class="box1"> <div...

5
Eva Rosalene
24.09.2014, 16:56
  #2
 Комментарий модератора 
Свой код размещаем текстом на форуме. Ссылка на песочницу - лишь дополнение.
0
10 / 10 / 0
Регистрация: 12.04.2012
Сообщений: 333
24.09.2014, 17:10  [ТС] 3
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<html>
<body style="background:#0f0; margin:0; padding:0">
<style>
#mygallery {width:100%; height:100%; background:rgba(0, 0, 0, 0.7); display:none; position:relative; position:absolute}
#myimages {margin: 0px auto;width:1050px;background:#fff}
#mygalimg {margin: 0px auto;max-width:1020px; max-height:768px;border:2px #000 solid; margin-top: 20px;margin-bottom: 20px;}
 
#wid{position:absolute; left:30%; top: 100px;}
 
#nextimg {font-size:70px;position:absolute; left:50%; top: 250px; margin-left:525px;width:39px;background:rgba(255, 255, 255, 0.7);border-radius: 0px 20px 20px 0px;cursor:pointer}
#preimg {font-size:70px;position:absolute; left:50%; top: 250px;margin-left:-564;width:39px;background:rgba(255, 255, 255, 0.7);border-radius: 20px 0px 0px 20px;cursor:pointer}
</style>
<div id="mygallery">
<div id="myimages">
<input id="new">
<div style="z-index:999; cursor:pointer" align="right" onclick="document.getElementById('mygallery').style.display = 'none'">Закрыть</div>
<center><img id="mygalimg"></center>
<hr>
<p id="myimgname"></p>
<hr>
</div>
<div id="nextimg" onclick="next()"><b>></b></div>
<div id="preimg" onclick="prev()"><b><</b></div>
</div>
 
<a class="mygallery" title="image 1" onclick="myimg(this);return false;" href="http://otvinta-f1.narod.ru/res/bg_9.gif">image 1</a>
<a class="mygallery" title="image 2" onclick="myimg(this);return false;" href="http://otvinta-f1.narod.ru/res/bg_8.gif">image 2</a>
<a class="mygallery" title="image 3" onclick="myimg(this);return false;" href="http://otvinta-f1.narod.ru/res/bg_7.gif">image 3</a>
<script>
for(var i = 0; i < document.getElementsByClassName("mygallery").length; i++){document.getElementsByClassName("mygallery")[i].id=i+"mygalimg"}
  function myimg(myimage) {
info = myimage.title;
imgsrc = myimage.href;
imgid = parseInt(myimage.id);
 
img = new Image();
img.src = imgsrc;
img.onload = function () {
 
document.getElementById("mygallery").style.display = "block";
document.getElementById("mygalimg").src = imgsrc;
document.getElementById("myimgname").innerHTML = info;
}
}
 
function next() {
imgid = imgid+1
if(imgid < document.getElementsByClassName("mygallery").length){imgid = imgid}else{imgid = 0}
myimg(document.getElementById(imgid+"mygalimg"))
}
function prev() {
imgid = imgid-1;
if(imgid >= 0){imgid = imgid}else{imgid = document.getElementsByClassName("mygallery").length}
myimg(document.getElementById(imgid+"mygalimg"));
}
</script>
 
</body>
</html>
Добавлено через 25 секунд
FraidZZ, вот код.
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
25.09.2014, 18:08 4
Как-то так
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<!DOCTYPE html>
<html>
<head>
<style>
body {background:#0f0; margin:0; padding:0;}
#mygallery {width:100%; height:100%; background:rgba(0, 0, 0, 0.7); display:none; position:absolute;}
#myimages {margin: 0px auto; width:1050px; background:#fff; position:relative;}
#mygalimg {margin: 0px auto;max-width:1020px; max-height:768px;border:2px #000 solid; margin-top: 20px;margin-bottom: 20px;}
 
#wid{position:absolute; left:30%; top: 100px;}
 
#nextimg {font-size:70px;position:absolute; right:0; top: 40%; margin-right:-39px;width:39px;background:rgba(255, 255, 255, 0.7);border-radius: 0px 20px 20px 0px;cursor:pointer}
#preimg {font-size:70px;position:absolute; left:0; top: 40%;margin-left:-39px;width:39px;background:rgba(255, 255, 255, 0.7);border-radius: 20px 0px 0px 20px;cursor:pointer}
</style>
 
</head>
 
<body>
 
<div id="mygallery">
 <div id="myimages">
  <select id="vubor" size="1" OnChange="document.images[0].style.width = this.options[selectedIndex].value">
  <option value="auto">Выберите размер</option>
  <option value="400px">Маленькое</option>
  <option value="600px">Среднее</option>
  <option value="800px">Большое</option>
  </select> 
  <div style="z-index:999; cursor:pointer" align="right" onclick="document.getElementById('mygallery').style.display = 'none'">Закрыть</div>
  <center><img id="mygalimg"></center>
  <hr>
  <p id="myimgname"></p>
  <hr>
 <div id="nextimg" onclick="next()"><b>></b></div>
 <div id="preimg" onclick="prev()"><b><</b></div>
 </div>
</div>
 
<a class="mygallery" title="image 1" onclick="myimg(this);return false;" href="http://otvinta-f1.narod.ru/res/bg_9.gif">image 1</a>
<a class="mygallery" title="image 2" onclick="myimg(this);return false;" href="http://otvinta-f1.narod.ru/res/bg_8.gif">image 2</a>
<a class="mygallery" title="image 3" onclick="myimg(this);return false;" href="http://otvinta-f1.narod.ru/res/bg_7.gif">image 3</a>
 
<script>
for(var i = 0; i < document.getElementsByClassName("mygallery").length; i++){document.getElementsByClassName("mygallery")[i].id=i+"mygalimg"}
  function myimg(myimage) {
info = myimage.title;
imgsrc = myimage.href;
imgid = parseInt(myimage.id);
 
img = new Image();
img.src = imgsrc;
img.onload = function () {
document.getElementById("mygallery").style.display = "table";
document.getElementById("mygalimg").src = imgsrc;
document.getElementById("myimgname").innerHTML = info;
}
}
 
function next() {
imgid = imgid+1
if(imgid < document.getElementsByClassName("mygallery").length){imgid = imgid}else{imgid = 0}
myimg(document.getElementById(imgid+"mygalimg"))
}
function prev() {
imgid = imgid-1;
if(imgid >= 0){imgid = imgid}else{imgid = document.getElementsByClassName("mygallery").length}
myimg(document.getElementById(imgid+"mygalimg"));
}
</script>
 
</body>
</html>
Заодно подправила стрелки - они были не на месте.
document.getElementById("mygallery").style.display = "table"; лучше, чем display = "block" - у Вас затемнение растягивалось не на всю высоту документа, а только на высоту видимой области.
document.images[0] - в общем случае такое, конечно, не прокатит. Лучше добавьте рисунку id.

Цитата Сообщение от Савва Посмотреть сообщение
И еще как туда добавить нижний бар фото, как в этом примере
Куда добавить? Внутрь mygallery?
2
10 / 10 / 0
Регистрация: 12.04.2012
Сообщений: 333
25.09.2014, 22:20  [ТС] 5
ludmila-sv, чтобы оно внутри сплывающего окна было. Тоже со стрелками и при клике выбрать фото можно было бы.
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
26.09.2014, 12:54 6
Вот такое после <hr> поставьте
HTML5
1
2
3
4
5
6

<a class="mygallery" title="image 1" onclick="document.getElementById('mygalimg').src=this.href;return false;" href="http://otvinta-f1.narod.ru/res/bg_9.gif">
<img src="http://otvinta-f1.narod.ru/res/bg_9.gif" width="200px"></a>
<a class="mygallery" title="image 2" onclick="document.getElementById('mygalimg').src=this.href;return false;" href="http://otvinta-f1.narod.ru/res/bg_8.gif">
<img src="http://otvinta-f1.narod.ru/res/bg_8.gif" width="200px"></a>
<a class="mygallery" title="image 3" onclick="document.getElementById('mygalimg').src=this.href;return false;" href="http://otvinta-f1.narod.ru/res/bg_7.gif">
<img src="http://otvinta-f1.narod.ru/res/bg_7.gif" width="200px"></a>
Только лучше сделать отдельные маленькие иконки, а не загружать большие картинки, установив им маленькую ширину 200рх.
1
26.09.2014, 12:54
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 26.09.2014, 12:54
Помогаю со студенческими работами здесь

как изменить размер фото....
есть ли возможность при загрузки пользователем фото на сайт, изменить его реальные размеры (вышину,...

Изменить размер сохраняемого фото
как изменить размер сохраняемого фото через camera.takePicture? или нужно где то в другом месте...

Изменить размер передаваемого фото
&lt;? $api_key = &quot;MY API KEY&quot;; $result = 0; if( is_uploaded_file( $_FILES ) ) { ...

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


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru