Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 22.12.2014, 03:52   #1
incorporeal
Новичок
 
Регистрация: 22.12.2014
Сообщений: 1
Репутация: 10
По умолчанию 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, 04:58   #2
Smitt&Wesson
Профессионал
 
Аватар для Smitt&Wesson
 
Регистрация: 31.05.2010
Адрес: г. Киров
Сообщений: 13,936
Репутация: 796

skype: forwardbiznes
По умолчанию

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

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
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 17:27
перемещение div средствами JQuery Arassir JavaScript, Ajax 1 23.01.2011 18:16


00:48.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.