Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 22.12.2014, 02:52   #1
incorporeal
Новичок
Джуниор
 
Регистрация: 22.12.2014
Сообщений: 1
По умолчанию jQuery - По клику на 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": "PIA16684_ip.jpg",
                             "thumb_url": "profile9.png"
                         },
                         {
                             "title": "Картинка 2",
                             "big_url": "095_1.jpg",
                             "thumb_url": "Busy_Snake.100x100-75.png"
                         }
                     ]
                 }
                 for (i = 0; i < json.fotos.length; i++) {
                     var n = "thumb_url"
                     //alert(data[i][n]);
                     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>
incorporeal вне форума Ответить с цитированием
Старый 22.12.2014, 03:58   #2
Smitt&Wesson
Старожил
 
Аватар для Smitt&Wesson
 
Регистрация: 31.05.2010
Сообщений: 13,964
По умолчанию

Не проще-ли фанкибох установить. Там такое предусмотрено.
Пиши пьяным, редактируй трезвым.
Справочник по алгоритмам С++ Builder
Smitt&Wesson вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery. Получить список всех div внутри UL. Человек_Борща JavaScript, Ajax 7 22.10.2013 15:21
jQuery. Blur на div. Как сделать? Mr_freeman JavaScript, Ajax 2 24.01.2013 15:55
[jQuery] Вывод div-блока Strangers JavaScript, Ajax 3 01.09.2012 21:19
Jquery load в div Delphinchik JavaScript, Ajax 2 17.02.2011 16:27
перемещение div средствами JQuery Arassir JavaScript, Ajax 1 23.01.2011 17:16