ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как по клику на фото, его можно увеличить и вывести в том же месте.
8 сообщений из 8, страница 1 из 1
Как по клику на фото, его можно увеличить и вывести в том же месте.
    #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:09
| Ответить | Цитировать | Написать  
Как по клику на фото, его можно увеличить и вывести в том же месте.
    #39098445
son456
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son456
Гость
Как вернуть все назад.
...
Рейтинг: 0 / 0
09.11.2015, 14:42
| Ответить | Цитировать | Написать  
Как по клику на фото, его можно увеличить и вывести в том же месте.
    #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, 15:10
| Ответить | Цитировать | Написать  
Как по клику на фото, его можно увеличить и вывести в том же месте.
    #39098621
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
Код: javascript
1.
$('img#fullview').click(function(){$(this).remove();});
...
Рейтинг: 0 / 0
09.11.2015, 16:25
| Ответить | Цитировать | Написать  
Как по клику на фото, его можно увеличить и вывести в том же месте.
    #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:30
| Ответить | Цитировать | Написать  
Как по клику на фото, его можно увеличить и вывести в том же месте.
    #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:33
| Ответить | Цитировать | Написать  
Как по клику на фото, его можно увеличить и вывести в том же месте.
    #39098648
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
Код: javascript
1.
$('body').on('click', 'img#fullview', function(){$(this).remove();});
...
Рейтинг: 0 / 0
09.11.2015, 16:50
| Ответить | Цитировать | Написать  
Как по клику на фото, его можно увеличить и вывести в том же месте.
    #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
09.11.2015, 16:59
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как по клику на фото, его можно увеличить и вывести в том же месте.
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39098629&tid=1445648]:
 0ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 148ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 41ms
get tp. blocked users:
 1ms
others: 251ms
total:  481ms
созд. / загр.: 481ms
x
x
Закрыть


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