22.12.2014, 02:33
|
|
Новичок на форуме
|
|
Регистрация: 10.12.2014
Сообщений: 2
|
|
|
при нажатии на div открыть картинку большего размера
В json массиве хранятся url маленьких и больших картинок. При нажатии на маленький div нужно открыть такую же картинку, но большего размера. Вопрос в следующем как сделать чтобы по клику на div с маленькой картинкой, открывалась большая картинка?
<html>
<head>
<title> json </title>
<meta charset="windows-1251">
<script type ="text/javascript" src='jquery-2.1.1.min.js'> </script>
<script type="text/javascript">
$(function () {
var json = {
fotos: [
{
"title": "Картинка 1",
"big_url": "big_url1",
"thumb_url": "thumb_url1"
},
{
"title": "Картинка 2",
"big_url": "big_url2",
"thumb_url": "thumb_url2"
}
]
}
for (i = 0; i < json.fotos.length; i++) {
var n = "thumb_url"
var str = "<img src='" + json.fotos[i].thumb_url + "'>";
var divid = "#d00" + (i + 1);
console.log(divid);
$(divid).append(str);
}
});
</script>
<style>
.divs
{
width: 100px;
height: 100px;
border: 5px solid #f00;
background: #fff;
margin: 20px;
position: absolute;
}
#d001
{
left: 0;
top: 0;
}
#d002
{
left: 115px;
top: 0;
}
</style>
</head>
<body>
<div id ="d001" class='divs'>
</div>
<div id ="d002" class='divs'>
</div>
</body>
</html>
|
|
22.12.2014, 02:53
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от renegade
|
|
открывалась большая картинка?
|
в место маленькой? или как? |
|
22.12.2014, 04:05
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
fancybox + json Oткрыть картинку большего размера по клику на маленькую
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<meta charset="utf-8">
<style>
body{
background-color:#0000AD;
}
.divs{
position:relative;
width:100px;
height:100px;
border:5px solid #f00;
background:#fff;
margin:20px;
display:inline-table;
}
.divs img{
cursor:pointer;
display:block;
}
</style>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<script type="text/javascript">
$(function() {
var json = {
fotos: [{
"title": "Картинка 1",
"big_url": "http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-lg.jpg",
"thumb_url": "http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg"
}, {
"title": "Картинка 2",
"big_url": "http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-lg.jpg",
"thumb_url": "http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-thumb.jpg"
}]
}
$.each(json.fotos, function(indx, el) {
var a = $("<a/>", {
"class": "divs fancybox",
"attr" : {"title" : el.title, "rel" : "group"},
"href" : el.big_url
}),
img = $("<img/>", {
"src": el.thumb_url,
"alt" : el.title
});
a.appendTo('body');
img.appendTo(a)
});
$(".fancybox").fancybox()
});
</script>
</head>
<body>
</body>
</html>
Последний раз редактировалось рони, 22.12.2014 в 11:48.
|
|
22.12.2014, 05:08
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
А нафиг генерить разметку скриптом? Никаких преимуществ, только недостатки! Не <div>, а <a>.
__________________
В личку только с интересными предложениями 
|
|
22.12.2014, 05:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от danik.js
|
|
А нафиг генерить разметку скриптом?
|
это не понял, а как ещё ответ с сервера вывести?
|
Сообщение от danik.js
|
|
Не <div>, а <a>.
|
может оно по каким-то мне неведомым правилам и верно , но див проще в плане разметки и не требует отмены действий по по умолчанию.
поставил <а> ... danik.js, считает что треба. |
|
22.12.2014, 10:07
|
|
Новичок на форуме
|
|
Регистрация: 10.12.2014
Сообщений: 2
|
|
По поводу того как должно открываться - новый div перекрывающий остальные и его можно закрыть на крестик, вот пример http://www.cherinfo.ru/news/71057 |
|
22.12.2014, 10:17
|
|
Интересующийся
|
|
Регистрация: 11.08.2013
Сообщений: 28
|
|
Сообщение от renegade
|
|
По поводу того как должно открываться - новый div перекрывающий остальные и его можно закрыть на крестик, вот пример http://www.cherinfo.ru/news/71057
|
Так я извиняюсь там fancybox используется. Fancybox - у для работы понадобится такой html-каркас:
<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>
Вам, уважаемый renegade требуется подключить fancybox и написать код, который всего лишь сгенерит из Ваших входных данных:
...
fotos: [{
"title": "Картинка 1",
"big_url": "http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-lg.jpg",
"thumb_url": "http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg"
}, {
"title": "Картинка 2",
"big_url": "http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-lg.jpg",
"thumb_url": "http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-thumb.jpg"
}]
...
такую разметку:
<a class="fancybox" rel="group" href="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-lg.jpg">
<img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg" alt="" />
</a>
<a class="fancybox" rel="group" href="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-lg.jpg">
<img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-thumb.jpg" alt="" /></a>
И всего делов то.
|
|
22.12.2014, 11:41
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
fancybox добавлен смотреть 3 пост |
|
22.12.2014, 11:52
|
|
Интересующийся
|
|
Регистрация: 11.08.2013
Сообщений: 28
|
|
|
Сообщение от рони
|
|
fancybox добавлен смотреть 3 пост
|
тем более |
|
22.12.2014, 13:06
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Да блядь че за костыли? Почему нельзя на серваке генерить разметку? Сервак умеет ченить? PHP полюбому умеет, так ведь? Так в чем проблема?
__________________
В личку только с интересными предложениями
|
|
|
|
