Как устроен и работает интернет?

Это бонусный видеоурок из курса «Как разместить сайт в интернете» и в этом видеоуроке мы с вами узнаем:

  • Что такое интернет?
  • Как устроен интернет?
  • Как работает интернет?
  • Что такое порт?
  • Где располагается список портов?
  • Как посмотреть установленные соединения?
  • Как посмотреть путь прохождения пакетов?

Скачать материалы:
Прежде чем разбираться, как устроен интернет, нам нужно узнать, что это такое.

Что такое Интернет?

Интернет – это всемирная система объединенных компьютерных сетей, построенная на базе IP и маршрутизации IP-пакетов.

Как устроен интернет?

На изображении справа показано вовсе не звездное небо, а сеть интернет на момент 2005 года. Как можно догадаться, интернет – это сеть сетей.

Маленькие сети объединяют в себя n-ое число компьютеров. Большие сети включают в себя маленькие сети, тем самым создавая связь между ними. Ну а самые большие сети – сети континентов соединяются между собой подводным трансатлантическим оптоволоконным кабелем. Вес такого кабеля, протянутого между континентами, измеряется тысячами тонн.

Из всех континентов в этой большой игре не участвует разве что Антарктида.

На изображении слева показана упрощенная схема интернета. Существуют также большие сети, которые не объединены с общим миром интернета. Примером такой большой сети может служить сеть Северной Кореи – Кванмён. Так как у Северной Кореи интернета в принципе нету, Кванмён является его заменителем, большой местной сетью с одним провайдером. Провайдер – это организация, предоставляющая услуги. Следовательно, интернет-провайдер – компания, предоставляющая услуги интернет. В целом, можно сказать, что у Северной Кореи свой отдельный интернет. Однако, устроен интернет везде одинаково 🙂

Архитектура Клиент-Сервер

В сетях принято разделение компьютеров на клиенты и серверы. Также существуют программы-клиенты (например, браузеры) и программы-серверы (например, веб-сервер Apache).
На изображении вы видите пример двухуровневой архитектуры Клиент-Сервер. Устройства-клиенты подключаются к устройству-серверу и получают обратную связь.

Как работает интернет?

Ну а теперь давайте рассмотрим самое интересное, как работает интернет.

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

Итак, у нас есть человек, кто угодно – я, вы, или ваш дальний родственник. У этого человека есть доступ к компьютеру, который он с радостью включает. Человек хочет зайти в интернет и для этого запускает браузер, т.е. программу-клиент, установленную на его компьютере. В адресной строке браузера он вводит доменное имя сайта, допустим, info-line.net.

Это мы все знали. А что же происходит в те милисекунды, которые мы не замечаем? Что же скрыто от наших глаз?

После ввода доменного имени в браузер, программа-клиент связывается с провайдером  и сообщает ему о том, что она хочет запросить сайт info-line.net

На провайдере установлен DNS сервер, который преобразует доменное имя интернет-ресурса info-line.net в IP-адрес (IP – это межсетевой протокол) вида 178.162.144.134.

IP-адрес  выдается провайдером каждому компьютеру при подключении к интернету, естественно веб-сайты тоже имеют свои ip-адреса. На данный момент существует две версии IP – 4-ая (IPv4) и 6-ая (IPv6). Была еще и 5-ая версия, но она не была принята для публичного пользования. В настоящее время наиболее широко используется 4-ая версия IP.

IP-адреса нужны для нахождения компьютеров в сети. Ведь нужно знать, куда отправлять пакет. На почте, вам нужно указать адрес получателя. В сети вместо адреса выступает IP.

После этого, IP переводится из десятичной системы исчисления в двоичную и принимает привычный машинный вид в виде цифр 0 и 1.

Далее,  провайдер пересылает ваш запрос сайта на маршрутизатор (или по-другому — Роутер).
Маршрутизатор – это устройство, которое согласно таблицам маршрутов направляет передаваемые пакеты информации по указанному адресу. Маршрутизатор – это что-то вроде аналога GPS-навигатора в реальной жизни, он знает маршрут и указывает рабочий путь передаваемому пакету информации.

Пакеты передаются от одного маршрутизатора к другому, пока не достигают сервера, т.е. того IP-адреса, который был указан клиентом в виде получателя.

На web-сервере обрабатывается вся полученная информация и выдается результат в виде html-страницы, то есть обычной веб-страницы, которые мы так часто видим на экране.

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

Для этого предназначены порты.

Что такое порт?

Порт – это системный ресурс, выделяемый приложению для связи с другими приложениями в сети. Все программы для связи между собою посредством сети, используют порты.

Если провести аналогию с домом, то дом – это IP, а квартира – это порт. Список портов можно посмотреть, открыв файл services по адресу: C:\Windows\System32\drivers\etc (ваш адрес может отличаться)

Как мы видим, портов здесь достаточно много. Например, порт 25 служит для отправки почты, порт 110 для ее получения. Веб-сайты работают на порту номер 80, а система DNS, о которой мы уже говорили – на порту 53.

Мы можем проверить работу портов в браузере. Если мы введем веб-сайт и после него, укажем :80, то у нас откроется веб-сайт, а если укажем :53, то получим сообщение об ошибке следующего содержания: «Данный адрес использует порт, который, как правило, не используется для работы с веб-сайтами. В целях вашей безопасности Firefox отменил данный запрос».

Порт номер 21 используется для FTP, как мы уже знаем из прошлых уроков. Порты 135-139 используются системой Windows для доступа к общим ресурсам компьютера – папкам, принтерам. Эти порты должны быть закрыты фаерволлом для Интернета в целях безопасности. Порты 3128, 8080 используются в качестве прокси-серверов. Прокси – это компьютер-посредник, например, между моим компьютером и веб-ресурсом, на который я хочу зайти. Прокси используются для самых разных целей. Бывают бесплатные и платные прокси. Настроить их можно в настройках браузера. В браузере Firefox это делается следующим образом:

  1. Заходим в настройки
  2. Переходим в «Дополнительные»
  3. Открываем вкладку «сеть»
  4. В блоке «соединение» жмем кнопку «настроить»
  5. Переходим на ручную настройку прокси-сервера
  6. Указываем данные прокси

Как посмотреть установленные соединения?

Чтобы посмотреть текущие соединения, нужно войти в командную строку:

  1. Нажимаем сочетание клавиш «Windows» + «R»
  2. Вводим в поле значение «cmd»
  3. Нажимаем «Ок»

Мы попали в командную строку и теперь можем увидеть текущие соединения с помощью команды netstat –an
Нам выдается список результатов установленных соединений нашего компьютера с удаленными узлами.
Узлами называются любые устройства, участвующие в соединении компьютерной сети. Например: компьютеры, телефоны, маршрутизаторы и коммутаторы.

Кстати говоря, отличие маршрутизаторов от коммутаторов заключается в том, что первые используются для соединения разнородных сетей, например: локальной сети и сети интернет. А вторые – только для однородных, например, только для локальной сети. Сами устройства – очень похожи.

Вернемся к командной строке. Текущие соединения, мы уже видим.
Итак, в первой колонке, мы замечаем, что соединения могут делиться на 2 протокола: TCP и UDP.
Протокол – это набор правил и действий, по которым должно осуществляться соединение и обмен данными между устройствами, включенными в сеть.
Оба протокола — TCP и UDP, отвечают за транспортировку данных. Отличие первого протокола (TCP) от второго (UDP) в том, что первый гарантирует доставку пакетов, а второй нет. Дальше углубляться в работу протоколов, мы не будем.

Локальный адрес – это адреса на нашем компьютере. Внешний адрес – адреса из сети. Состояние – это состояние соединения. Опять же, углубляться не будем, а просто возьмем любой внешний IP и с портом 80 и проверим, действительно ли этот веб-сайт у нас запущен. Почему я сказал веб-сайт? — Потому что на 80 порте, как нам известно, у нас располагаются веб-ресурсы.

Итак, берем IP — 212.73.221.199:80

Переходим в браузер и пишем этот IP-адрес в адресную строку. Порт писать не обязательно, потому что 80-ый порт стоит в браузерах по умолчанию.

Мы видим сайт Лаборатории Касперского. Данный сайт, у меня не был запущен в браузере. Возникает вопрос: почему нам было показано тогда данное соединение?
Ответ очевиден: потому что оно было установлено. В нашем случае, не браузером, а антивирусом, который стоит у меня на компьютере.

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

Как посмотреть путь прохождения пакетов?

Данные от клиента к серверу и наоборот посылаются пакетами, небольшими объемами информации. Чтобы посмотреть этот путь, можно воспользоваться одной из двух похожих команд: tracert и pathping. Единственное условие, после указания команды, через пробел нужно ввести адрес, с которым будет установлена связь (т.е. проведена трассировка). Все это мы вводим в командной строке. Таким способом, мы увидим весь путь прохождения пакетов от нашего компьютера-клиента к внешнему компьютеру-серверу. То есть то, о чем, я пытался рассказать вам на картинке с маршрутизаторами и провайдерами.

Для примера, я воспользуюсь первой командой: tracert info-line.net
На примере прокладывается трассировка маршрута к сайту info-line.net или к IP – 178.162.144.134
Трассировка была проведена в 11 прыжков. Мы видим, что до самого сервера она дошла всего за 3 прыжка. Кстати говоря, таким образом, мы еще и узнали, на каких серверах располагаются сайты хостинга imhoster.net – на серверах голландского хостинга www.leaseweb.com. Давайте откроем этот сайт в браузере.

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

Вот так просто и одновременно непостижимо работает интернет

Подпишись на info-line:

Получать новые уроки на e-mail:

26 комментариев на “Как устроен и работает интернет?”

  1. yura 21 января 2013 в 20:17 #

    Не знаю как у других но у меня что то долго твой сайт грузит близко 2 мин.

    • Олег Зубцов 21 января 2013 в 23:03 #

      У меня интернет не такой быстрый, но за 6-7 секунд загружается любая страница. Но, я тебя услышал. Спасибо. Буду оптимизировать.

  2. yura 26 января 2013 в 16:51 #

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

    • Олег Зубцов 30 января 2013 в 0:59 #

      Вконтакте плеер реализован на Ajax. Именно это позволяет ему продолжать работать при переключении страниц.

      Если хотите создать подобный плеер самостоятельно — изучайте JavaScript.

      На начальном этапе, я рекомендую воспользоваться онлайн-плеерами, так как они предоставят вам не только код плеера, но еще и место под музыку на своих серверах.

  3. yura 30 января 2013 в 20:40 #

    я пробовал делать плеер нашел на одном из сайтов но многое не понимаю а там нет где обратиться можете посмотреть здесь leandrovieira.com/projects/jquery/lightbox/ и мне объяснить что где ставить

    • Олег Зубцов 31 января 2013 в 8:21 #

      Начнем с того, что это не плеер 🙂 Точно ту ссылку скинули?

      Там находится плагин lightbox (плагин для увеличения изображений, а также переключения между ними в виде галереи).

      Чтобы подключить данный плагин, нужно:

      1. Скачать его к себе.

      2. Добавить в теги <head></head> вашего сайта следующий код:

      <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
      

      Он отвечает за подключение библиотеки jQuery и скрипта самого плагина.

      3. Далее нужно подключить вот этот код:

      <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
      

      Он отвечает за подключение таблицы стилей. Также прописывается в тегах <head></head>.

      4. Для вставки изображений нужно будет использовать подобный код:

      <a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

      image1.jpg — это ваше изображение в большом размере.

      thumb_image1.jpg — оно же, но в маленьком размере.

      То есть, вы вставляете маленькое изображение, делая его ссылкой на большое.

      5. Последнее, что нужно сделать, так это назначить, к каким данным следует применять наш плагин. Он ведь не знает, какие изображения нужно красиво увеличивать.

      Это мы делаем с помощью javascript кода, который можно вставить в тегах <head></head> вашей страницы.

      Ниже, приведено 4 способа в качестве примера. Одного способа, Вам скорее всего будет вполне достаточно.

      <script type="text/javascript">
      $(function() {
      	// 1 способ
      	$('a[@rel*=lightbox]').lightBox();
      	// 2 способ
      	$('#gallery a').lightBox();
      	// 3 способ
      	$('a.lightbox').lightBox();
      	// 4 способ
      	$('a').lightBox();
      });
      </script>
      

      Как работают данные способы?

      1. Если ссылка имеет атрибут rel=lightbox, то применяем скрипт lightBox.

      2. Если ссылки располагаются внутри блока с идентификатором #gallery, то применяем скрипт lightBox.

      3. Применяем скрипт lightBox ко всем ссылкам, имеющим класс .lightbox.

      4. Применяем скрипт ко всем ссылкам на странице.

  4. yura 31 января 2013 в 20:45 #

    спасибо за ответ

    я все сделал ка здесь написано но эти коды ставил сразу же после тега и один за другим то есть пошел первый скрипт потом пошел второй сразу после него может это неправильно. Потом там где мне нужно вставить изображения вставил код и у меня получилось что большое изображение открывается не в галерее а отдельно можете посмотреть на сайте suzirja.ucoz.com/foto.html а потом также после

    я поставил

    $(function() {
    	// 1 способ
    	$('a[@rel*=lightbox]').lightBox();
    	// 2 способ
    	$('#gallery a').lightBox();
    	// 3 способ
    	$('a.lightbox').lightBox();
    	// 4 способ
    	$('a').lightBox();
    });
    

    и оставил только 1 способ все остальное стер но в дужках я нечего не писал так как не знал нужно ли ?

    И получилось что у меня не открывается изображения в галереи посмотрите на сайт как это выглядит: suzirja.ucoz.com/foto.html и код этой страницы:

    
    <!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
    <script type="text/javascript">
    $(function() {
    	$('a[@rel*=lightbox]').lightBox();
    });
    </script>
    
    <meta http-equiv= "Content-Type" content = "text/html; charset=utf-8">
    <meta name="keywords" content="Музичний гурт Сузіря, весілля, день народження, корпоратив, випускний вечір, бенкет">
    <meta name="description" content="Музичний гурт Сузіря">
    <title>"Музичний гурт "Сузір'я"</title>
    
    <link type="text/css" rel="StyleSheet" href="/_st/my.css" />
    <script type = "text/javascript" src="/jquery-1.6.2.min.js"></script>
    <script type = "text/javascript" src="/height_col.js"></script>
    <!--[if lt IE 7]>
    <script type = "text/javascript" src="/IE7.js"></script>
    <script type = "text/javascript" src="/ie7-squish.js"></script>
    <script type = "text/javascript" src = "js/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>
    DD_belatedPNG.fix('.img1,.img2');
    </script>
    <![endif]-->
    <body>
     <div id="wrapper">
     <div id="header">
     <h1><a href = "/">"Музичний гурт "Сузір'я"</a></h1>
     <div align="center"><p>Офіційний сайт Музичного гурту "Сузір'я" </p></div>
     </div>
     <div id="left_menu">
     <div align="center">
     <p>Ліве меню</p>
     <form name="search" action="http://google.com/search" target="_blank">
     <input type="hidden" name="q" value="site:suzirja.ucoz.com/">
    <p>
    <input type="text" name="q" maxlength="128"><br>
    <input type="submit" value="Знайти">
    </p>
    </form>
     </div>
     </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <a href="images/large.jpg" rel="lightbox"><img src="images/small.jpg" width="200" height="150" alt="" /></a>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
     <div id="share42" style="top: 180px; ">
    <a rel="nofollow" style="display:block;width:32px;height:32px;margin:0 0 6px;background:url(info-line.net/share42/icons.png) -0px 0" href="#" onclick="window.open('http://vkontakte.ru/share.php?url=http%3A%2F%2Finfo-line.net%2Fvideouroki%2Fkak-ustanovit-yandeks-poisk-na-svoj-sajt.html', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=554, height=421, toolbar=0, status=0');return false" title="Поделиться В Контакте" target="_blank"></a>
    <a rel="nofollow" style="display:block;width:32px;height:32px;margin:0 0 6px;background:url(info-line.net/share42/icons.png) -32px 0" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&amp;st._surl=http%3A%2F%2Finfo-line.net%2Fvideouroki%2Fkak-ustanovit-yandeks-poisk-na-svoj-sajt.html&amp;title=%D0%9A%D0%B0%D0%BA%20%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D1%8C%20%D0%AF%D0%BD%D0%B4%D0%B5%D0%BA%D1%81.%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%20%D0%BD%D0%B0%20%D1%81%D0%B2%D0%BE%D0%B9%20%D1%81%D0%B0%D0%B9%D1%82" title="Добавить в Одноклассники" target="_blank"></a>
    <a rel="nofollow" style="display:block;width:32px;height:32px;margin:0 0 6px;background:url(info-line.net/share42/icons.png) -128px 0" href="http://twitter.com/share?text=%D0%9A%D0%B0%D0%BA%20%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D1%8C%20%D0%AF%D0%BD%D0%B4%D0%B5%D0%BA%D1%81.%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%20%D0%BD%D0%B0%20%D1%81%D0%B2%D0%BE%D0%B9%20%D1%81%D0%B0%D0%B9%D1%82&amp;url=http%3A%2F%2Finfo-line.net%2Fvideouroki%2Fkak-ustanovit-yandeks-poisk-na-svoj-sajt.html" title="Добавить в Twitter" target="_blank"></a>
    <a rel="nofollow" style="display:block;width:32px;height:32px;margin:0 0 6px;background:url(info-line.net/share42/icons.png) -160px 0" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Finfo-line.net%2Fvideouroki%2Fkak-ustanovit-yandeks-poisk-na-svoj-sajt.html&amp;t=%D0%9A%D0%B0%D0%BA%20%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D1%8C%20%D0%AF%D0%BD%D0%B4%D0%B5%D0%BA%D1%81.%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%20%D0%BD%D0%B0%20%D1%81%D0%B2%D0%BE%D0%B9%20%D1%81%D0%B0%D0%B9%D1%82" title="Поделиться в Facebook" target="_blank"></a>
    <a rel="nofollow" style="display:block;width:32px;height:32px;margin:0 0 6px;background:url(info-line.net/share42/icons.png) -320px 0" href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http%3A%2F%2Finfo-line.net%2Fvideouroki%2Fkak-ustanovit-yandeks-poisk-na-svoj-sajt.html&amp;title=%D0%9A%D0%B0%D0%BA%20%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D1%8C%20%D0%AF%D0%BD%D0%B4%D0%B5%D0%BA%D1%81.%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%20%D0%BD%D0%B0%20%D1%81%D0%B2%D0%BE%D0%B9%20%D1%81%D0%B0%D0%B9%D1%82" title="Сохранить закладку в Google" target="_blank"></a>
    </div>
     <!-- MyCounter v.2.0 -->
    <div id="mycounter" style="bottom: 0px;">
    <script type="text/javascript"><!--
    my_id = 115765;
    my_width = 88;
    my_height = 51;
    my_alt = "MyCounter - счётчик и статистика";
    //--></script>
    <script type="text/javascript"
     src="http://scripts.mycounter.ua/counter2.0.js">
    </script><noscript>
    <a target="_blank" href="http://mycounter.ua/"><img
    src="http://get.mycounter.ua/counter.php?id=115765"
    title="MyCounter - счётчик и статистика"
    alt="MyCounter - счётчик и статистика"
    width="88" height="51" border="0" /></a></noscript>
    <!--/ MyCounter -->
     </div>
     <ul id="menu">
     <li id="home">
     <a href="http://suzirja.ucoz.com/" title="Головна">Головна</a>
     </li>
     <li id="foto">
     <a href="http://suzirja.ucoz.com/foto.html" title="Фотографії">Фотографії</a>
     </li>
     <li id="video">
     <a href="http://suzirja.ucoz.com/video.html" title="Відеозаписи">Відеозаписи</a>
     </li>
     <li id="music">
     <a href="http://suzirja.ucoz.com/music.html" title="Музика">Музика</a>
     </li>
     <li id="forum">
     <a href="http://suzirja.ucoz.com/forum.html" title="Форум">Форум</a>
     </li>
     <li id="contact">
     <a href="http://suzirja.ucoz.com/contakt.html" title="Контакти">Контакти</a>
     </li>
     </ul>
     <div class="clear"></div>
     <div id="footer">
     <p>&#169; Все права защищены 2012</p>
     </div>
     </div>
    </body>
    </html>
     

  5. yura 31 января 2013 в 21:14 #

    что то я не так код написал как его написать?

    • Олег Зубцов 31 января 2013 в 22:26 #

      Не указан атрибут к изображению, а точнее к ссылке на изображение, так как именно ссылка взаимодействует со скриптом.

      То есть получается так: Вы написали к каким изображениям применять скрипт, но сами изображения не пометили.

      Выбрав первый способ, скрипт применяется к ссылкам с атрибутом rel="lightbox". Добавьте в вашу ссылку данный атрибут. Должно сработать. Также поступайте со всеми остальными изображениями.

  6. yura 1 февраля 2013 в 18:13 #

    Что то не работает я вот этот скрипт:

    $(function() {
    	$('a[@rel*=lightbox]').lightBox();
    });
    

    изменил на вот этот просто дописал:

    $(function() {
    	$('a[@rel*=nofollow]').lightBox(suzirja.ucoz.com/images/large.jpg);
    });
    

    И не работает скорее всего я не так сделал как мне сделать если можно напишите готовый код вместо ссылки на большое изображение укажите images/big.jpg спасибо)

    • Олег Зубцов 4 февраля 2013 в 8:31 #

      Ой. Я совершил опечатку по привычке 🙂 Не rel="nofollow", а rel="lightbox".

      И как я уже сказал, Вам его нужно применить к ссылке. Вот так:

      <a href="images/large.jpg" rel="lightbox"><img src="images/small.jpg" width="200" height="150" alt="" /></a>

  7. yura 4 февраля 2013 в 19:18 #

    поставил но все равно открывает не в галерее а на полный экран можете посмотреть на сайте suzirja.ucoz.com/foto.html

    • Олег Зубцов 6 февраля 2013 в 1:11 #

      Замените Ваш код скрипта:

      <script type="text/javascript">
      $(function() {
      	$('a[@rel*=nofollow]').lightBox(suzirja.ucoz.com/images/large.jpg);
      });
      </script>
      

      на следующий:

      <script type="text/javascript">
      $(function() {
      	$('a[@rel*=lightbox]').lightBox();
      });
      </script>
      

  8. yura 6 февраля 2013 в 18:27 #

    А как в $('a[@rel*=lightbox]').lightBox (); вписать ссылку на изображения ?

    • Олег Зубцов 6 февраля 2013 в 20:27 #

      Не надо ее вписывать) Она у вас сама должна определяться скриптом.

      Удалите одно из подключений библиотеки jquery на вашем сайте и загрузите скрипт lightbox, у меня выдается 404 ошибка при переходе по заявленной ссылке в коде.

  9. yura 6 февраля 2013 в 20:43 #

    Я уже совсем запутался))) То есть если у меня сайт на Укозе то мне нужно удалить из файлового менеджера файл jquery.js а откуда загрузить скрипт lightbox и куда в файловом менеджер или вписать в строку. Извините что так много вопросов 🙂

    • Олег Зубцов 15 февраля 2013 в 5:02 #

      У тебя просто дважды подключена библиотека. Посмотри код 🙂

      Оставить нужно одну.

      Скрипт lightbox загружаешь отсюда. Он есть в архиве, да и к тому же по ссылке в статье его можно скачать.

      Ничего страшного, задавай 😉

  10. yura 1 марта 2013 в 19:29 #

    У меня стоит этот код в теге

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen">
    
    <script type="text/javascript">
        $(function() {
            $('#gallery a').lightBox();
        });
        </script>

    Я даже открывал архив который я скачивал в нем есть .html файл то есть пример я открыл его в гугле нажал F12 просмотрел код тоже поставил себе все равно нечего не получилось.

    Этот код я вписал уже где то в середине тега там где должны быть фото:

    <a href="images/large.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
                    <img src="images/small.jpg" width="72" height="72" alt="">

    В таблицу CSS я нечего не добавлял разве что загрузил файл .css в файловой менеджер Укоза. Вы написали нужно установить скрипт lightbox я все скрипты которые есть в архиве залил в файловой менеджер и коды у меня только эти которые я вам скинул посмотрите может что не так?

    • Олег Зубцов 3 марта 2013 в 14:25 #

      пропишите блок галереи с id="gallery":

      <div id=gallery>
      <a href="images/large.jpg" title="">
      <img src="images/small.jpg" width="72" height="72" alt="">
      </a>
      </div>
      

  11. yura 3 марта 2013 в 20:04 #

    прописал но нечего не происходит я так понимаю его надо прописывать в css но я там нечего не прописывал ведь я файл css залил в файловой менеджер и нужно написать в css что должен значить но в архиве нет нечего что относиться к

    • Олег Зубцов 4 марта 2013 в 16:11 #

      Я запишу видеоурок на эту тему чуть позже. Записал себе 🙂

      • yura 4 марта 2013 в 18:46 #

        Спасибо большое! Буду ждать! А когда будет какой то видео урок уже что то долго нету ?

  12. yura 6 марта 2013 в 14:37 #

    ОГО! А что еще если не секрет ?

    • Олег Зубцов 7 марта 2013 в 12:59 #

      Постоянная рубрика статей. Я не могу часто выпускать видеоуроки, поэтому простые материалы будет писать еще один человек.

Оставить ответ