<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

В начале курса у нас будет только идея, а в конце готовый продукт, который можно использовать в практических целях.

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Скрипт галереи на JavaScript

Скрипт галереи на JavaScript

Описание: Не так давно я выложил на сайт скрипт, открывающий изображения в новом окне. Однако, иногда бывает нужно, чтобы изображение не открывалось в новом окне, а просто подставлялось в определённую область, где оно будет выводиться в большом размере. Именно такой скрипт галереи на JavaScript я и представляю Вашему вниманию сегодня.

Результат:

Главное изображение

Изображение 1 Изображение 2 Изображение 3
Изображение 4 Изображение 5 Изображение 6

Код JavaScript (вставлять между тегами <head> и </head>):

<script type="text/javascript">
  function setBigImage(foto) {
    document.getElementById("bigimg").src = foto.src;
  }
</script>

Код HTML (вставлять между тегами <body> и </body>):

<div>
  <p style = 'text-align: center;'>
    <img id = 'bigimg' src = 'gallery1.jpg' height = '150' alt = 'Главное изображение' />
  </p>
  <table style = 'margin: 0 auto;' border = '1'>
    <tr>
      <td>
        <img src = 'gallery1.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 1' />
      </td>
      <td>
        <img src = 'gallery2.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 2' />
      </td>
      <td>
        <img src = 'gallery3.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 3' />
      </td>
    </tr>
    <tr>
      <td>
        <img src = 'gallery4.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 4' />
      </td>
      <td>
        <img src = 'gallery5.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 5' />
      </td>
      <td>
        <img src = 'gallery6.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 6' />
      </td>
    </tr>
  </table>
</div>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (24):

Natalymath Natalymath 11.06.2011 16:25:56

Спасибо! Уже применила на практике, опять-таки несколько изменив код (по щелчку в заданном месте появляются другие изображения)

Ответить

shaen8032002 shaen8032002 06.04.2013 00:04:22

Добрый день , а не подскажете как вы реализовали другие превьюшки к картинкам ? не особо разбираюсь в коде , по тому прошу помощи

Ответить

ajushki ajushki 21.07.2011 02:45:27

Спасибо! А как можно сделать кнопки или ссылки "вперед", "назад" по бокам от головного изображения?

Ответить

Admin Admin 21.07.2011 02:54:39

http://myrusakov.ru/imagerotatorbutton.html - внимательно изучите этот код. Тогда поймёте, как сделать.

Ответить

ajushki ajushki 22.07.2011 01:22:59

Огромное спасибо! Получилось!!! :) (Пишу контрольную по java-script`ам, сама блондинка, спросить не у кого...Еще раз спасибо! Осталось придумать как сделать рамку на картинке, большой вариант которой показан сверху :) )

Ответить

ajushki ajushki 25.07.2011 02:30:18

Михаил, добрый вечер! Сломала голову, но так и не поняла, как сделать выделение (например цветной рамкой) миниатюры, большой вариант которой показан сверху. Может Вас не затруднит помочь советом? Спасибо.

Ответить

Admin Admin 25.07.2011 03:59:53

Выделить цветной рамкой можно с помощью CSS, добавив свойство "border: 1px solid #ffff00;". И это свойство добавлять через JavaScript примерно так: this.style.border = "1px solid #ffff00";

Ответить

annata annata 06.07.2012 00:41:18

Уважаемый Михаил! Спасибо большое за ваши уроки. Не могли бы Вы подсказать, как сделать так, чтобы вместе с большой фотографией под ней появлялась еще и подпись (информация об изображении)?

Ответить

Admin Admin 06.07.2012 00:49:57

Не так это просто. Надо добавить тег <p> под большим изображением, куда подставлять текст (через свойство innerHTML) в зависимости от выбранного изображения. Этот текст можно передавать в качестве параметра в функции setBigImage(). Если знаете хоть чуть-чуть JavaScript, то реализуете это без проблем, если нет, то даже не пытайтесь, а изучайте для начала основы.

Ответить

annata annata 10.08.2012 15:46:47

Спасибо!

Ответить

lev_100rus lev_100rus 11.07.2012 19:47:36

Михаил, подскажите пожалуйста как сделать анимационную галерею как на этом сайте http://tuscaroratackle.com/

Ответить

Admin Admin 11.07.2012 21:37:27

Если знаете JavaScript, то сможете создать. Если не знаете, то рекомендую найти плагин JQuery, их достаточно много для этих целей.

Ответить

radeonx801 radeonx801 03.09.2012 18:00:56

Доброго времени суток. Не подскажете, почему, при добавлении скрипта на сайт, картинки не отображаются, хотя путь прописан верно? Возможно они как то не так выгружаются?

Ответить

Admin Admin 03.09.2012 22:47:55

Расширение файлов не соответствует, например. Или если Вы его меняли, то получилось что-нибудь вроде .png.jpg

Ответить

radeonx801 radeonx801 04.09.2012 10:46:12

Нет, не в этом дело, они все .jpg Всё равно спасибо, далее наверно сама разберусь =) Просто интересно получается. На одном компьютере нормально работает и открывает, на другом - красные крестики вместо фото )

Ответить

greg77 greg77 04.12.2012 10:28:33

Уважаемая Анна, здесь я узнал, что Вас интересовал тот же вопрос что и меня. Если Вы сумели реализовать эту задачу, не могли бы ли Вы поделиться со мной Вашим скриптом? Мой мейл: gregarben@mail.ru Передо мной стоит следующая задача: за основу я использовал несколько переделанный для своей странички вышеописанный скрипт, но в нем, к сожалению, не прописано как ввести надписи описывающие каждая свою картинку. Код: alt = 'Изображение 1' - не то что нужно, т.к. текст в данном случае появляется только при наведении курсора на изображение, а нужно, чтоб при каждом клике, текст описания, относящийся даной картинке появлялся под или рядом только с увеличенным вариантом данной картинки (при этом, в моем варианте рядом с малыми картинками в галерее, надписей быть не должно). Буду очень благодарен за Вашу помощь в решении данного вопроса! И, конечно, мы были бы оба (уверен - и не только мы) благодарны Михаилу если бы он выложил необходимые изменения в скрипте для решения данного вопроса, но он, к сожалению, уже высказал свое мнение по данному вопросу..

Ответить

Pinzet Pinzet 31.05.2014 22:22:34

Я кажется решил эту проблему, обращайтесь на roma_tip@mail.ru

Ответить

ilyadenisovid ilyadenisovid 16.10.2013 07:22:28

Михаил, а что сделать, если нужно при нажатии на маленькую картинку, чтобы текст в <p>, который находится под большим изображением, менялся. Пробую так, н оне выходит - function setBigImage(foto) { document.getElementById("bigimg").src = foto.src; document.getElementByID("text_photo").innerHTML = "новый текст"; }

Ответить

Admin Admin 16.10.2013 11:46:32

getElementById, а не getElementByID.

Ответить

Pinzet Pinzet 31.05.2014 22:19:40

Спасибо за скрипт, вроде во всем разобрался, но возникла следующая проблема. Если я хочу вставить несколько галерей на одной странице, то вторая галерея не работает, изображения по клику выводятся в первой галерее.Как можно это исправить?

Ответить

Dima12345 Dima12345 03.12.2014 16:48:07

Можно и без скрипта) <table class="class" border="0" cellspacing="0" cellpadding="4" width="20" bgcolor="#ffffff" align="center" height="70" valign="top"> <tbody> <tr> <td valign="top" width="384" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td colspan="4"><img style="border-bottom: #ffffff 0px solid; border-left: #ffffff 0px solid; border-top: #ffffff 0px solid; cursor: crosshair; border-right: #ffffff 0px solid" name="bigtitle" alt="" width="384" height="384" src="IMAGES/384x384_01.jpg" /></td> </tr> <tr> <td><img style="border-bottom: #ffffff 4px solid; border-left: #ffffff 1px solid; border-top: #ffffff 1px solid; cursor: crosshair; border-right: #ffffff 1px solid" alt="" width="96" height="96" onMouseOver="bigtitle.src='IMAGES/384x384_01.jpg'" src="IMAGES/96x96_01.jpg" /></td> <td><img style="border-bottom: #ffffff 4px solid; border-left: #ffffff 1px solid; border-top: #ffffff 1px solid; cursor: crosshair; border-right: #ffffff 1px solid" alt="" width="96" height="96" onMouseOver="bigtitle.src='IMAGES/384x384_02.jpg'" src="IMAGES/96x96_02.jpg" /></td> <td><img style="border-bottom: #ffffff 4px solid; border-left: #ffffff 1px solid; border-top: #ffffff 1px solid; cursor: crosshair; border-right: #ffffff 1px solid" alt="" width="96" height="96" onMouseOver="bigtitle.src='IMAGES/384x384_03.jpg'" src="IMAGES/96x96_03.jpg" /></td> <td><img style="border-bottom: #ffffff 4px solid; border-left: #ffffff 1px solid; border-top: #ffffff 1px solid; cursor: crosshair; border-right: #ffffff 1px solid" alt="" width="96" height="96" onMouseOver="bigtitle.src='IMAGES/384x384_04.jpg'" src="IMAGES/96x96_04.jpg" /></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> Вот что у меня получилось http://www.pxpress.ru/servise/kubariki/kubariki-kont

Ответить

Dima12345 Dima12345 03.12.2014 16:57:34

Только не забудьте пихнуть фотки в папку IMAGES

Ответить

igorfelix igorfelix 22.03.2015 11:58:20

помещаю html в обертку <div class="modal-left g-hidden">код галереи </div> где g-hidden - скрывает контент. тоесть делаю галерею в окошке типа fancybox, и вот она не работает, убираю класс g-hidden, галерея работает но уже не в окошке

Ответить

york york 05.10.2015 11:24:02

Уважаемый Михаил мои танцы с бубном не увеньчались успехом а очень нужно, если Вам не будет трудно, могли-бы подсказать, нужно сделать подсвечивание миниатюры как здесь: Выделить цветной рамкой можно с помощью CSS, добавив свойство "border: 1px solid #ffff00;". И это свойство добавлять через JavaScript примерно так: this.style.border = "1px solid #ffff00";, только у меня ну ничего не получаеться (в коде сразу можно?)заранее спасибо.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.