Блог

К сожалению, я новичок в программировании, и поэтому, чтобы помочь мне, я следил за некоторыми простыми руководствами на YouTube (в дополнение к следующим урокам Treehouse). То, с чем я боролся и, похоже, не могу найти решение, — это создание простого лайтбокса, а также получение события click для вызова лайтбокса. Я проверил все строки, синтаксис, пропустил ли я; или {} , подумал, что, возможно, у меня неверный src javascript, попытался загрузить, создать папку js и связать с ней, сославшись на размещенный в Google javascript, проверил firebug, попробовал разные браузеры, проверил правильность CSS (что этопохоже, что при настройке отображения на блокировку оно отображается нормально), подумал, может быть, есть обновленные правила синтаксиса (пробовал jQuery вместо $, но просто не вижу, где я делаю ошибку. Вероятно, я пропустил что-то действительно простое, поэтому, пожалуйста, простите меня заранее. Ссылка на YouTube, по которой я следую: https://www.youtube.com/watch?v=k-uonF7Gdgw Также проверили комментарии к видео, чтобы узнать, есть ли у кого-нибудь еще такая же проблема, у некоторых есть, но в основном все остальные кажутся нормальными, и никаких решений для тех, у кого это не работает!

Пожалуйста, смотрите приведенный ниже код:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function(){

    jQuery('.lightbox').click(function(){
        jQuery('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); //fades in the backdrop and the lightbox - speed of 300, and displayed in a linear fashion. Only want the backdrop displayed with 50% opacity, and the box at 100% (see below line)
        jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
        jQuery('.backdrop, .box').css('dispaly', 'block'); //sets the appearance of the box
    }); 

});


</script>
 

Заранее большое спасибо и спасибо за отличный ресурс!
Сетевой адаптер

Лайтбокс — это метод JavaScript, используемый для отображения изображений и другого веб-контента с использованием модальных диалоговых окон, где изображение отображается по центру, заполняя большую часть экрана, а остальная часть окна затемняется. Изначально Лайтбокс был названием определенного плагина JavaScript. Однако общее использование термина эволюционировало, чтобы охватить плагины JavaScript в стиле лайтбокса и эффекты в целом.

Сначала мы берем несколько изображений (когда мы нажимаем на изображения, будет показан ЛайтбОкс). Мы поместим это изображение в

HTML-код:

        <section id="examples" class="examples-section">
          <div class="container">

                 <h3 style="clear: both;">Four image set</h3>

                 <div class="image-row">
                       <div class="image-set">
                              <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
                              <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
                              <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
                              <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
                       </div>
                 </div>
          </div>
   </section>
 

Теперь добавьте файлы кода css для экрана и лайтбокса. Также скачать lightbox.js и файлы java-скриптов библиотеки jquery.