Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как по клику на фото, его можно увеличить и вывести в том же месте. / 8 сообщений из 8, страница 1 из 1
09.11.2015, 14:09
    #39098378
son456
son456
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как по клику на фото, его можно увеличить и вывести в том же месте.
Здравствуйте! Столкнулся с проблемой Как по клику на фото, его можно увеличить и вывести в том же месте.
Код:
Код: javascript
1.
2.
3.
4.
5.
$(document).ready(function(){
$('img').not('#fullview').click(function(){
$('body').append('<img id="fullview" src="'+$(this).attr('src')+'" style="position: absolute;width: 20%;  "/>');
});
});


Код вывода изображения
Код: php
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
<?php  foreach($goods as $photo) :?>
<img src="<?php echo SITE_URL.UPLOAD_DIR."/".$photo['namePhoto'];?>"  />
<p>
<a href="<?php echo SITE_URL;?>addphoto/option/edit/id/<?php echo $photo['id'];?>">
Изменить
</a>
<a href="<?php echo SITE_URL;?>addphoto/option/delete/id/<?php echo $photo['id'];?><?php echo $previous;?>">
Удалить
</a>
</p>		
<?php  endforeach;?>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.11.2015, 14:42
    #39098445
son456
son456
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как по клику на фото, его можно увеличить и вывести в том же месте.
Как вернуть все назад.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.11.2015, 15:10
    #39098493
son456
son456
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как по клику на фото, его можно увеличить и вывести в том же месте.
Код: javascript
1.
2.
3.
4.
5.
$(document).ready(function(){
$('img').not('#fullview').click(function(){
$('body').append('<img id="fullview" class="active" src="'+$(this).attr('src')+'" style="width: 30%; top: 1%; left: 25%; position: absolute;"/>');
});
});


Осталось разобраться как вернуться к исходному состоянию.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.11.2015, 16:25
    #39098621
SharuPoNemnogu
SharuPoNemnogu
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как по клику на фото, его можно увеличить и вывести в том же месте.
Код: javascript
1.
$('img#fullview').click(function(){$(this).remove();});
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.11.2015, 16:30
    #39098629
son456
son456
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как по клику на фото, его можно увеличить и вывести в том же месте.
Не работает.
Код: javascript
1.
2.
3.
4.
5.
6.
$(document).ready(function(){
$('img#fullview').click(function(){$(this).remove();});
$('img').not('#fullview').click(function(){
$('body').append('<img id="fullview" class="active" src="'+$(this).attr('src')+'" style="width: 30%; top: 1%; left: 25%; position: absolute;"/>');
});
});
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.11.2015, 16:33
    #39098633
son456
son456
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как по клику на фото, его можно увеличить и вывести в том же месте.
И так тоже:
Код: javascript
1.
2.
3.
4.
5.
6.
$(document).ready(function(){
$('img').not('#fullview').click(function(){
$('body').append('<img id="fullview" class="active" src="'+$(this).attr('src')+'" style="width: 30%; top: 1%; left: 25%; position: absolute;"/>');
});
$('img#fullview').click(function(){$(this).remove();});
});
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.11.2015, 16:50
    #39098648
SharuPoNemnogu
SharuPoNemnogu
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как по клику на фото, его можно увеличить и вывести в том же месте.
Код: javascript
1.
$('body').on('click', 'img#fullview', function(){$(this).remove();});
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.11.2015, 16:59
    #39098658
если я правильно понял задачу...
если я правильно понял задачу...
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как по клику на фото, его можно увеличить и вывести в том же месте.
son456,

Код: html
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.
<!DOCTYPE html>
<html>
<head>
<title>tmp</title>
<meta charset="utf-8">
<style>
.popup, .im {
  position:absolute;
  border:1px solid #0067A1;
  background-size:100% 100%;
  background-repeat:no-repeat;
  cursor:pointer;
}
.popup {top:60px; height:180px; width:270px; display:none;}
.im {top:90px; height:120px; width:200px;}
.s1 {left:50px; background-image:url("http://www.svadba-inform.ru/userfiles/foto_molodozh/cortezh/Lexus_GS.jpg");}
.s2 {left:300px; background-image:url("http://xage.ru/media/uploads/2007/6/strannyie-avtomobili/strannyie-avtomobili_1.jpg");}
.s3 {left:550px; background-image:url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRZLi3Ko0FHnetsrA50uKTycjXQTnDvnEIddtxm4rJ2YmmWOpUj2w");}
</style>
</head>
<body>
<div class="im s1"></div>
<div class="im s2"></div>
<div class="im s3"></div>
<script>
var popup = document.createElement('div');
popup.className = 'popup';
popup.onclick = function () {this.style.display = 'none';}
document.body.appendChild(popup);

var im = document.getElementsByClassName('im');
for (var i=0; i<im.length; i++) {
  im[i].onclick = function () {
  var st = getComputedStyle(this), pSt = popup.style;
  pSt.left = parseInt(st.left) - 35 + 'px';
  pSt.display = 'block';
  pSt.backgroundImage = st.backgroundImage;
  }
}
</script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как по клику на фото, его можно увеличить и вывести в том же месте. / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 495ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1445648]:
 0ms
get settings:
 10ms
get forum list:
 15ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 165ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 46ms
get tp. blocked users:
 1ms
others: 240ms
total:  495ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]