Notes 11/15: Media Query + Fancy Box

MEDIA QUERY

  • Go to end of CSS
  • Introduce a breakpoint that essentially says @media (max-width: 490px)…. overrides container aspects
  • Use percentages as another option!

Screen Shot 2016-11-15 at 9.22.33 AM.png

FANCY BOX

JQUERY (must attach)

https://developers.google.com/speed/libraries/

  1. Copy jQueryscreen-shot-2016-11-15-at-9-48-25-am
  2. Paste <script src> into events.html

Screen Shot 2016-11-15 at 9.49.01 AM.png

3. Go to downloads folder….open demo folder…open index.html…copy line 14/15 <script type> and paste into events.html

Screen Shot 2016-11-15 at 9.52.02 AM.png

4. Change ../source to fancybox Screen Shot 2016-11-15 at 9.52.45 AM.pngScreen Shot 2016-11-15 at 9.52.52 AM.png

5. Add

Screen Shot 2016-11-15 at 9.55.37 AM.png

6. Close with });

7. Add <a class= “fancybox”

Screen Shot 2016-11-15 at 10.01.22 AM.png

**MAKE SURE TO ADD SCRIPT SOURCES AND SCRIPT TYPE TO EVERY NEW PAGE!

GALLERY —

Screen Shot 2016-11-15 at 10.40.06 AM.png