при нажатии на 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>
|
Цитата:
|
fancybox + json Oткрыть картинку большего размера по клику на маленькую
:write:
<!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>
|
А нафиг генерить разметку скриптом? Никаких преимуществ, только недостатки! Не <div>, а <a>.
|
Цитата:
Цитата:
поставил <а> ... danik.js, считает что треба. |
По поводу того как должно открываться - новый div перекрывающий остальные и его можно закрыть на крестик, вот пример http://www.cherinfo.ru/news/71057
|
Цитата:
<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>
И всего делов то. |
:write: fancybox добавлен смотреть 3 пост
|
Цитата:
|
Да блядь че за костыли? Почему нельзя на серваке генерить разметку? Сервак умеет ченить? PHP полюбому умеет, так ведь? Так в чем проблема?
|
| Часовой пояс GMT +3, время: 02:49. |