index.js

const images = {
  landscape: [
    {
      id: 1,
      section: 'Landscape',
      pic: 'img/lge/landscape/DJI_0006.jpg',
      alt: 'Redhook, Brooklyn',
      caption: 'The abandonded silo. Red Hook, Brooklyn',
    },
    {
      id: 2,
      section: 'Landscape',
      pic: 'img/lge/landscape/DJI_0059.jpg',
      alt: 'Bruno Trucking sign. Gowanus, Brooklyn',
      caption: 'Bruno Trucking Sales sign. Gowanus, Brooklyn',
    },
    {
      id: 3,
      section: 'Landscape',
      pic: 'img/lge/landscape/vanpac02.jpg',
      alt: 'Vanderbilt and Pacific Brooklyn, NY',
      caption:
        'This no longer exists, a story of gentrification. Prospect Heights, Brooklyn',
    },
    {
      id: 4,
      section: 'Landscape',
      pic: 'img/lge/landscape/TOTR_Sunset.jpg',
      alt: 'Southern view from Top of the Rock, NYC',
      caption: 'View from the Top of the Rock. Rockefeller Center, NYC',
    },
    {
      id: 5,
      section: 'Landscape',
      pic: 'img/lge/landscape/5points.jpg',
      alt: '5points Queens, NY',
      caption:
        'This no longer exists, a story of gentrification. 5Pointz, Long Island City Queens, NY for: Vice Magazine',
    },
    {
      id: 6,
      section: 'Landscape',
      pic: 'img/lge/landscape/DJI_0075.jpg',
      alt: 'Brooklyn Navy Yard solar project from above',
      caption: 'Brooklyn Navy Yard Solar system built by: Solar Energy Systems',
    },
    {
      id: 7,
      section: 'Landscape',
      pic: 'img/lge/landscape/AviatorColor.jpg',
      alt: 'Aviator rink Brooklyn, NY',
      caption: 'Aviator Sports Center. Floyd Bennett Field, Brooklyn',
    },
    {
      id: 8,
      section: 'Landscape',
      pic: 'img/lge/landscape/Charlie.jpg',
      alt: 'Hiking in the White Mountain range',
      caption: 'Foggy Morning, White Mountain National Forest',
    },
    {
      id: 9,
      section: 'Landscape',
      pic: 'img/lge/landscape/larahotrock.jpg',
      alt: 'Sunbather, Antigua, W.I.',
      caption: 'Sunbathing on the hot rock. Antigua W.I.',
    },
    {
      id: 10,
      section: 'Landscape',
      pic: 'img/lge/landscape/oia2.jpg',
      alt: 'Oia SanTorini, Greece',
      caption: 'Sunset in Oia. San Torini, Greece',
    },
    {
      id: 11,
      section: 'Landscape',
      pic: 'img/lge/landscape/hfscrowd.jpg',
      alt: 'HFStival front row',
      caption:
        'All access pass, a view from the stage. WHFStival, RFK Stadium Washington D.C.',
    },
  ],
  stills: [
    {
      id: 1,
      section: 'Still Life',
      pic: 'img/lge/still/Interview_Handbags.jpg',
      alt: 'Handbags, Interview Magazine',
      caption: 'Interview Magazine: Handbags',
    },
    {
      id: 2,
      section: 'Still Life',
      pic: 'img/lge/still/SnakeBag.jpg',
      alt: 'gucci bag',
      caption: 'Interview Magazine: Gucci Snakeskin bag',
    },
    {
      id: 3,
      section: 'Still Life',
      pic: 'img/lge/still/Interview_Watch.jpg',
      alt: 'Watch mantage',
      caption: 'Interview Magazine: Fendi Watch montage',
    },
    {
      id: 4,
      section: 'Still Life',
      pic: 'img/lge/still/Technomarine.jpg',
      alt: 'Technomarine watch',
      caption: 'Interview Magazine: Technomarine watch',
    },
    {
      id: 5,
      section: 'Still Life',
      pic: 'img/lge/still/TechnomarineRGO.jpg',
      alt: 'Technomarine watches',
      caption: 'Interview Magazine: Technomarine watches',
    },
    {
      id: 6,
      section: 'Still Life',
      pic: 'img/lge/still/Magaschoni_Bag.jpg',
      alt: 'Magaschoni_Bag',
      caption: 'Magaschoni Bags Summer ad',
    },
    {
      id: 7,
      section: 'Still Life',
      pic: 'img/lge/still/Interview_Perfume.jpg',
      alt: 'M/Mink Parfum bottle',
      caption: 'Interview Magazine: M/Mink Parfum',
    },
    {
      id: 8,
      section: 'Still Life',
      pic: 'img/lge/still/Dior.jpg',
      alt: 'Dior Handbag',
      caption: 'Baron & Baron, Miss Dior B-Roll',
    },
    {
      id: 9,
      section: 'Still Life',
      pic: 'img/lge/still/cotica02.jpg',
      alt: 'Cotica Jewelry',
      caption: 'Cotica Jewelry LookBook',
    },
    {
      id: 10,
      section: 'Still Life',
      pic: 'img/lge/still/Burberry_18.jpg',
      alt: 'Burberry perfume bottle',
      caption: 'Interview Magazine: Burberry perfume',
    },
    {
      id: 11,
      section: 'Still Life',
      pic: 'img/lge/still/Lexuschassis.jpg',
      alt: 'Lexus chassis',
      caption: 'Lexus Magazine: Making a race car',
    },
  ],
  portraits: [
    {
      id: 1,
      section: 'Portraits',
      pic: 'img/lge/portrait/Mariaface.jpg',
      alt: 'Maria',
      caption: 'Maria Prospect Park, Brooklyn',
    },
    {
      id: 2,
      section: 'Portraits',
      pic: 'img/lge/portrait/SummerROakes.jpg',
      alt: 'Summer Raine Oakes',
      caption: 'ECO-LA Magazine: cover',
    },
    {
      id: 3,
      section: 'Portraits',
      pic: 'img/lge/portrait/Stephanie_Chambers.jpg',
      alt: 'Stephanie Chambers, NYC',
      caption:
        'Artists portrait series: Stephanie Chambers, portrait of an actor.',
    },
    {
      id: 4,
      section: 'Portraits',
      pic: 'img/lge/portrait_artist/Elizabeth_Forest02.jpg',
      alt: 'Elizabeth Forrest, Queens NY',
      caption: 'Artists portrait series: Elizabeth Forest, portrait of a poet.',
    },
    {
      id: 5,
      section: 'Portraits',
      pic: 'img/lge/portrait_artist/BennettAtWindow.jpg',
      alt: 'Bennet Webster, Brooklyn NY',
      caption: 'Artists portrait series: Bennet Webster, portrait of a writer.',
    },
    {
      id: 6,
      section: 'Portraits',
      pic: 'img/lge/portrait/ChrisBW.jpg',
      alt: 'Chris the actor',
      caption: 'Artist Portrait series: Chris, Portrait of an actor.',
    },
    {
      id: 7,
      section: 'Portraits',
      pic: 'img/lge/portrait_artist/PaulSeftel01.jpg',
      alt: 'Paul Seftel, Williamsburg BK',
      caption: 'Artists portrait series: Paul Seftel, portrait of a painter.',
    },
    {
      id: 8,
      section: 'Portraits',
      pic: 'img/lge/portrait/melshawn.jpg',
      alt: 'Melshawn',
      caption: 'Street athletes series: Melshawn',
    },
    {
      id: 9,
      section: 'Portraits',
      pic: 'img/lge/portrait/SMarbury_BW.jpg',
      alt: 'Stephon Marbury',
      caption: 'Fashion Editorial with Stephon Marbury: Set Magazine',
    },
    {
      id: 10,
      section: 'Portraits',
      pic: 'img/lge/portrait/BallroomR.jpg',
      alt: 'Ballroom Rockstar editorial',
      caption: 'Fashion Editorial: Ballroom Rockstar Magazine',
    },
    {
      id: 11,
      section: 'Portraits',
      pic: 'img/lge/portrait/cmwcblkport_0046.jpg',
      alt: 'Cycle Messenger World Championships Edmonton, Canada',
      caption: 'Cycle Messenger World Championships 2004, Edmonton Canada',
    },
    {
      id: 12,
      section: 'Portraits',
      pic: 'img/lge/portrait/Scan_0066.jpg',
      alt: 'Cycle Messenger World Championships Edmonton, Canada',
      caption: 'Cycle Messenger World Championships 2004, Edmonton Canada',
    },
    {
      id: 13,
      section: 'Portraits',
      pic: 'img/lge/portrait/cmwcblkport_0064.jpg',
      alt: 'Cycle Messenger World Championships Edmonton, Canada',
      caption: 'Cycle Messenger World Championships 2004, Edmonton Canada',
    },
    {
      id: 14,
      section: 'Portraits',
      pic: 'img/lge/portrait/damian.jpg',
      alt: 'Portrait of Damian',
      caption: 'Portrait of a colleague: Damian',
    },
    {
      id: 15,
      section: 'Portraits',
      pic: 'img/lge/portrait_artist/In_Studio_Silver_129.jpg',
      alt: 'Shelly Silver',
      caption: 'Art in America Magazine: Shelly Silver',
    },
    {
      id: 16,
      section: 'Portraits',
      pic: 'img/lge/portrait/Joseph_Harrington_tear.jpg',
      alt: 'Joseph Harrington portrait for Cincinnati Magazine',
      caption: 'Cincinnati Magazine: Joseph Harrington',
    },
    {
      id: 17,
      section: 'Portraits',
      pic: 'img/lge/portrait/Bill_Hemmer_tear.jpg',
      alt: 'Bill Hemmer portrait for Cincinnati Magazine',
      caption: 'Cincinnati Magazine: Bill Hemmer',
    },
  ],
  bts: [
    {
      id: 1,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/IMG_0675.jpg',
      alt: 'Swarovski BTS',
      caption:
        'Behind the Scenes: Swarovski print and video campaign. Baron & Baron ad agency',
    },
    {
      id: 2,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/IMG_2253.jpg',
      alt: 'Swarovski BTS',
      caption:
        'Behind the Scenes: Swarovski print and video campaign. Baron & Baron ad agency',
    },

    {
      id: 3,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/DSC_1941.jpg',
      alt: 'Versace BTS',
      caption:
        'Behind the Scenes: Versace print and video campaign. Baron & Baron ad agency',
    },
    {
      id: 4,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/DSC_2576.jpg',
      alt: 'Dior campaign BTS',
      caption:
        'Behind the Scenes: Dior Handbags print campaign. Baron & Baron ad agency',
    },
    {
      id: 5,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/DSC_2649.jpg',
      alt: 'Dior campaign BTS',
      caption:
        'Behind the Scenes: Dior Handbags print campaign. Baron & Baron ad agency',
    },
    {
      id: 6,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/DSC_7761.jpg',
      alt: 'Georgio Armani BTS',
      caption:
        'Behind the Scenes: Georgio Armani Cosmetics print campaign. Baron & Baron ad agency',
    },
    {
      id: 7,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/DSC_7856.jpg',
      alt: 'Georgio Armani BTS',
      caption:
        'Behind the Scenes: Georgio Armani Cosmetics print campaign. Baron & Baron ad agency',
    },
    {
      id: 8,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/DSC_4364.jpg',
      alt: 'Fashion Editorial BTS',
      caption: 'Behind the Scenes: Fashion editorial',
    },
    {
      id: 9,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/IMG_2983.jpg',
      alt: 'Fashion Editorial BTS',
      caption: 'Behind the Scenes: Fashion editorial',
    },
    {
      id: 10,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/DSC_4511.jpg',
      alt: 'Fashion Editorial BTS',
      caption: 'Behind the Scenes: Fashion editorial',
    },
    {
      id: 11,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/IMG_2812.jpg',
      alt: 'Fashion Editorial BTS',
      caption: 'Behind the Scenes: Fashion editorial',
    },
    {
      id: 12,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/DSC_3564.jpg',
      alt: 'Harry Winston BTS',
      caption: 'Behind the Scenes: Harry Winston, Inc. Baron & Baron ad agency',
    },
    {
      id: 13,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/DSC_1964.jpg',
      alt: 'Harry Winston BTS',
      caption: 'Behind the Scenes: Harry Winston, Inc. Baron & Baron ad agency',
    },
    {
      id: 14,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/DSC_8172.jpg',
      alt: 'Harry Winston BTS',
      caption: 'Behind the Scenes: Harry Winston, Inc. Baron & Baron ad agency',
    },
    {
      id: 15,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/DSC_8523.jpg',
      alt: 'Harry Winston BTS',
      caption: 'Behind the Scenes: Harry Winston, Inc. Baron & Baron ad agency',
    },
    {
      id: 16,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/DSC_9559.jpg',
      alt: 'Harry Winston BTS',
      caption: 'Behind the Scenes: Harry Winston, Inc. Baron & Baron ad agency',
    },
    {
      id: 17,
      section: 'Behind the Scenes',
      pic: 'img/lge/bts/DSC_4107.jpg',
      alt: 'Harry Winston BTS',
      caption: 'Behind the Scenes: Harry Winston, Inc. Baron & Baron ad agency',
    },
  ],
  architecture: [
    {
      id: 1,
      section: 'Architecture',
      pic: 'img/lge/architecture/Crescent.jpg',
      alt: 'Crescent Queens, NY',
      caption: 'Lobby Crescent St. Long Island City Queens, NY: Morgan Stanley',
    },
    {
      id: 2,
      section: 'Architecture',
      pic: 'img/lge/architecture/mag04.jpg',
      alt: 'Magizan refurb',
      caption: 'Completed construction. Designed by Magizan S.A',
    },
    {
      id: 3,
      section: 'Architecture',
      pic: 'img/lge/architecture/mag02.jpg',
      alt: 'Magizan refurb',
      caption: 'Completed construction. Designed by Magizan S.A',
    },
    {
      id: 4,
      section: 'Architecture',
      pic: 'img/lge/architecture/mag03.jpg',
      alt: 'Magizan refurb',
      caption: 'Completed construction. Designed by Magizan S.A',
    },
  ],
  motion: [
    {
      id: 1,
      section: 'Motion',
      pic: 'img/lge/motion/phil_story_pan-in.webm',
      alt: 'Video pan in on A Philadelphia story mansion',
      type: 'video/webm',
      caption: "Arial Footage for Criterion Collection's: A Philadelphia Story",
    },
    {
      id: 2,
      section: 'Motion',
      pic: 'img/lge/motion/phil_story_decent.webm',
      alt: 'Video decend to reveal A Philadelphia story mansion',
      type: 'video/webm',
      caption: "Arial Footage for Criterion Collection's: A Philadelphia Story",
    },
    {
      id: 3,
      section: 'Motion',
      pic: 'img/lge/motion/bruno_gowanus.mp4',
      alt: 'Video ascent to reveal Gowanus BK and NYC near Bruno Sign',
      type: 'video/mp4',
      caption: 'Bruno Truck Sales',
    },
    {
      id: 4,
      section: 'Motion',
      pic: 'img/lge/motion/1205_man.mp4',
      alt: 'Arial pan to reveal solar photovoltaic array',
      type: 'video/mp4',
      caption: 'Arial footage for Solar Energy Systems',
    },
    {
      id: 5,
      section: 'Motion',
      pic: 'img/lge/motion/bny_time.webm',
      alt: 'Timelapse footage Brooklyn Navy Yard Photovoltaic Solar Array',
      type: 'video/webm',
      caption: 'Timelapse footage for Solar Energy Systems',
    },
    {
      id: 6,
      section: 'Motion',
      pic: 'img/lge/motion/redhook.mp4',
      alt: 'Video ascent to reveal RedHook Park, Brooklyn',
      type: 'video/mp4',
      caption: 'Red Hook, Brooklyn',
    },
    {
      id: 7,
      section: 'Motion',
      pic: 'img/lge/motion/LaLinleuTL.mp4',
      alt: '1hr time lapse at the summit of La Linleu',
      type: 'video/mp4',
      caption: 'An hour on La Linleu Timelapse',
    },
    {
      id: 8,
      section: 'Motion',
      pic: 'img/lge/motion/YLB_Meteo.mp4',
      alt: 'Timelapse of weather on Le Suchet',
      type: 'video/mp4',
      caption: 'Timelapse of weather on Le Suchet',
    },
  ],
}

function imgCarLandscape(image) {
  // Create HTML elements needed for each carousel image
  const figure = document.createElement('figure')
  const picture = document.createElement('picture')
  const img = document.createElement('img')
  const figcaption = document.createElement('figcaption')
  // Append newly created elements to the DOM
  const landscapePort = document.querySelector('#landscapePort')
  landscapePort.append(figure)
  figure.append(picture)
  picture.append(img)
  figure.append(figcaption)
  //Set content and attributes
  img.setAttribute('class', 'portfolio__img')
  img.setAttribute('src', image.pic)
  img.setAttribute('alt', image.alt)
  // add the caption to figcaption
  figcaption.innerHTML = image.caption
}
images.landscape.forEach((image) => imgCarLandscape(image))

function imgCarStillLife(image) {
  // Create HTML elements needed for each carousel image
  const figure = document.createElement('figure')
  const picture = document.createElement('picture')
  const img = document.createElement('img')
  const figcaption = document.createElement('figcaption')
  // Append newly created elements to the DOM
  const stillLifePort = document.querySelector('#stillLifePort')
  stillLifePort.append(figure)
  figure.append(picture)
  picture.append(img)
  figure.append(figcaption)
  //Set content and attributes
  img.setAttribute('class', 'portfolio__img')
  img.setAttribute('src', image.pic)
  img.setAttribute('alt', image.alt)
  // add the caption to figcaption
  figcaption.innerHTML = image.caption
}
images.stills.forEach((image) => imgCarStillLife(image))

function imgCarPortraits(image) {
  // Create HTML elements needed for each carousel image
  const figure = document.createElement('figure')
  const picture = document.createElement('picture')
  const img = document.createElement('img')
  const figcaption = document.createElement('figcaption')
  // Append newly created elements to the DOM
  const portraitsPort = document.querySelector('#portraitsPort')
  portraitsPort.append(figure)
  figure.append(picture)
  picture.append(img)
  figure.append(figcaption)
  //Set content and attributes
  img.setAttribute('class', 'portfolio__img')
  img.setAttribute('src', image.pic)
  img.setAttribute('alt', image.alt)
  // add the caption to figcaption
  figcaption.innerHTML = image.caption
}
images.portraits.forEach((image) => imgCarPortraits(image))

function imgCarBts(image) {
  // Create HTML elements needed for each carousel image
  const figure = document.createElement('figure')
  const picture = document.createElement('picture')
  const img = document.createElement('img')
  const figcaption = document.createElement('figcaption')
  // Append newly created elements to the DOM
  const btsPort = document.querySelector('#btsPort')
  btsPort.append(figure)
  figure.append(picture)
  picture.append(img)
  figure.append(figcaption)
  //Set content and attributes
  img.setAttribute('class', 'portfolio__img')
  img.setAttribute('src', image.pic)
  img.setAttribute('alt', image.alt)
  // add the caption to figcaption
  figcaption.innerHTML = image.caption
}
images.bts.forEach((image) => imgCarBts(image))

function imgCarArchitecture(image) {
  // Create HTML elements needed for each carousel image
  const figure = document.createElement('figure')
  const picture = document.createElement('picture')
  const img = document.createElement('img')
  const figcaption = document.createElement('figcaption')
  // Append newly created elements to the DOM
  const architecturePort = document.querySelector('#architecturePort')
  architecturePort.append(figure)
  figure.append(picture)
  picture.append(img)
  figure.append(figcaption)
  //Set content and attributes
  img.setAttribute('class', 'portfolio__img')
  img.setAttribute('src', image.pic)
  img.setAttribute('alt', image.alt)
  // add the caption to figcaption
  figcaption.innerHTML = image.caption
}
images.architecture.forEach((image) => imgCarArchitecture(image))

function imgCarMotion(image) {
  // Create HTML elements needed for each carousel image
  const figure = document.createElement('figure')
  const video = document.createElement('video')
  const source = document.createElement('source')
  const figcaption = document.createElement('figcaption')
  // Append newly created elements to the DOM
  const motionPort = document.querySelector('#motionPort')
  motionPort.append(figure)
  figure.append(video)
  video.append(source)
  video.append('Your browser is not supported!,')
  figure.append(figcaption)
  //Set content and attributes
  video.setAttribute('class', 'portfolio__video')
  video.setAttribute('controls', true)
  video.setAttribute('muted', true)
  video.setAttribute('loop', true)
  source.setAttribute('src', image.pic)
  source.setAttribute('type', image.type)
  // add the caption to figcaption
  figcaption.innerHTML = image.caption
}
images.motion.forEach((image) => imgCarMotion(image))