1
00:00:00,210 --> 00:00:03,920
Welcome to project four, for
this project, you'll get some practice

2
00:00:03,920 --> 00:00:08,040
with JavaScript plugins by implementing
a searchable photo gallery.

3
00:00:08,040 --> 00:00:11,710
The gallery contains
thumbnail images in a grid.

4
00:00:11,710 --> 00:00:15,044
You'll need to find and
implement a jQuery plugin so

5
00:00:15,044 --> 00:00:19,300
that when an image is clicked,
a larger thumbnail image appears.

6
00:00:19,300 --> 00:00:22,187
Captions should display
beneath each image and

7
00:00:22,187 --> 00:00:26,310
the images should be browseable by
clicking left and right arrows.

8
00:00:29,319 --> 00:00:31,598
There should be a way
to close the light box,

9
00:00:31,598 --> 00:00:35,430
whether that means clicking outside of
the image area or clicking on an X.

10
00:00:36,460 --> 00:00:40,100
Image titles and captions
are provided in the starter files.

11
00:00:43,178 --> 00:00:45,441
As the user types into the search box,

12
00:00:45,441 --> 00:00:48,780
only photos that match
the caption text should appear.

13
00:00:54,600 --> 00:00:59,053
The photos should be searchable
by their entire caption text, and

14
00:00:59,053 --> 00:01:01,370
not just the titles of the images.

15
00:01:08,510 --> 00:01:13,134
Also make sure that the search is case
insensitive, meaning the relevant images

16
00:01:13,134 --> 00:01:17,490
can still be found whether the search
term uses upper or lower case letters.

17
00:01:24,487 --> 00:01:27,910
You'll build your interactive
photo gallery based on a mockup.

18
00:01:31,889 --> 00:01:34,970
Your project doesn't need to
match the mockup exactly.

19
00:01:34,970 --> 00:01:37,580
But the general layout should be the same.

20
00:01:37,580 --> 00:01:40,410
Feel free to get a bit creative here,
and use your front end

21
00:01:40,410 --> 00:01:44,430
skills to make sure the photo gallery
looks sleek and professional.

22
00:01:44,430 --> 00:01:49,400
As always, be sure to read the project
instructions carefully before you begin,

23
00:01:49,400 --> 00:01:50,790
and follow them step by step.

24
00:01:52,440 --> 00:01:56,510
Before you submit for grading consult
the How you'll be graded section

25
00:01:56,510 --> 00:01:59,260
to make sure your project
meets all of the requirements.

26
00:02:00,310 --> 00:02:02,740
If you need help,
a push in the right direction, or

27
00:02:02,740 --> 00:02:06,730
advice on which plug-ins to use,
don't forget to go into slack and

28
00:02:06,730 --> 00:02:09,540
chat with your fellow
tech degree students.

29
00:02:09,540 --> 00:02:12,040
Have fun with this project and
happy coding.