[Assassins]

Lynda.com | Create a Sortable Photo Gallery with jQuery [2013] PCRec

Автор (режиссер): Lynda.com
Название: Create a Sortable Photo Gallery with jQuery
Год выпуска: 2013
Офсайт: Страница курса
Жанр: Веб-дизайн
Язык: Английский
Качество видео: PCRec
Продолжительность: 01:50:00
Видеокодек: AVC
Битрейт видео: ~72-1204 kb/s, 30 FPS
Размер кадра: 960 x 600
Аудиокодек: AAC
Битрейт аудио: ~96-128 kb/s (LC), 2 Ch, 48000 Hz
Субтитры: английские

Описание:
Предоставьте вашим посетителям удобный и динамичный способ просмотра ваших фотографий. В этом курсе вам покажут, как создать фотогалерею, которая сортирует организовывает ваши фото, основываясь на ключевых словах, которые вы добавляете в HTML. Кроме того автор Chris Converse покажет как использовать лайтбокс для показа больших фотографий и даже предоставить вашим посетителям возможность альтернативной навигации прямо из лайтбокса.
Этот курс был создан Chris Converse. Мы гордимся, что этот тренинг есть в нашей библиотеке.

Темы курса

Создание и экспорт веб-графики
Подготовка HTML-контейнеров
Оформление разметки при помощи CSS
Тэгируем галерею
Добавление выпадающего меню
Подготовка ваших фото и миниатюр
Добавление jQuery в проект
Добавление просмотра фотографий при помощи лайтбокса
Делаем шаблон «резиновым»

Introduction
Previewing the final project 1m 46s
About the exercise files 1m 8s
The software you'll need to complete this course 38s
For those using Dreamweaver 2m 23s
Starting your project 1m 20s
1. Creating the Graphics
Slicing and exporting web graphics 2m 35s
Creating multiple images for a responsive design 1m 55s
Creating custom thumbnails 2m 36s
2. Hooking Up the CSS and JavaScript
Setting the viewport scale settings 1m 51s
Linking the CSS files 1m 3s
Linking the JavaScript files 1m 22s
Enabling earlier versions of Internet Explorer 2m 47s
3. Creating HTML for the Web Layout
Creating the HTML containers 2m 55s
Creating the sorting links 3m 3s
Creating a thumbnail link 2m 39s
Adding more thumbnail links 2m 7s
Adding the background image 56s
4. Styling the Design with CSS
Styling the text and the background image 2m 43s
Adding the title with CSS 1m 28s
Adding positioning to the gallery 57s
Styling the sorting container 2m 27s
Styling the sorting links 2m 41s
Styling the thumbnails 2m 20s
5. Positioning the Thumbnails with jQuery
Creating a custom function to position thumbnails 1m 52s
Preparing the initial settings 2m 16s
Measuring the thumbnails and the container 4m 23s
Calculating the remainders 3m 27s
Calculating the rows and columns 2m 16s
Positioning and animating the thumbnails 2m 37s
Resetting the size of the photo container 2m 41s
6. Sorting the Thumbnails
Activating the sorting links 2m 35s
The custom sorting function 2m 22s
Determining the keywords for each thumbnail 2m 36s
Searching for keywords in the thumbnails 2m 44s
Setting up the animation to hide thumbnails 2m 25s
Animating the sorted thumbnails 1m 15s
7. Making the Layout Responsive with CSS
Adding CSS3 media queries 2m 10s
Making the title graphic responsive 2m 10s
Making the sorting box and the links 4m 19s
8. Making the Layout Responsive with JavaScript
Creating a custom function to check the viewport 2m 17s
Calculating the sizes 1m 41s
Using a set interval to continually run the viewport function 4m 27s
Setting the sorting box to match the thumbnail width 2m 43s
9. Applying the Lightbox to the Links
Adding a custom class to the lightbox links 1m 43s
Creating a custom function to detect lightbox links 3m 12s
Removing the lightbox for small screens 4m 37s
Removing debug code 1m 2s
Conclusion
Where to go from here 39s

Скриншоты:

Время раздачи: С 9:00 до 22:00