Photo Gallery (Horizontal Scrolling)

b601e5110f074ce69ce9d65039bbeb01

This is a horizontal photo gallery. All images and their captions are retrieved from Flickr. Each image gets pasted on an Image Board, and each caption gets rendered on a Text Slot.

Parts List

• 7 × Emitter

  1. image1 (see snippet below)
  2. image2 (see snippet below)
  3. image3 (see snippet below)
  4. image4 (see snippet below)
  5. image5 (see snippet below)
  6. image6 (see snippet below)
  7. image7 (see snippet below)

• 7 × Flickr Photo Detail Retriever

  1. flickr_photo_info_api1 (see snippet below)
  2. flickr_photo_info_api2 (see snippet below)
  3. flickr_photo_info_api3 (see snippet below)
  4. flickr_photo_info_api4 (see snippet below)
  5. flickr_photo_info_api5 (see snippet below)
  6. flickr_photo_info_api6 (see snippet below)
  7. flickr_photo_info_api7 (see snippet below)

• 7 × Flickr Photo Retriever

  1. flickr_photo_api1 (see snippet below)
  2. flickr_photo_api2 (see snippet below)
  3. flickr_photo_api3 (see snippet below)
  4. flickr_photo_api4 (see snippet below)
  5. flickr_photo_api5 (see snippet below)
  6. flickr_photo_api6 (see snippet below)
  7. flickr_photo_api7 (see snippet below)

• 7 × Image Board

  1. imageboard1 (see snippet below)
  2. imageboard2 (see snippet below)
  3. imageboard3 (see snippet below)
  4. imageboard4 (see snippet below)
  5. imageboard5 (see snippet below)
  6. imageboard6 (see snippet below)
  7. imageboard7 (see snippet below)

• 1 × Pasteboard

  1. pasteboard1 (see snippet below)

• 7 × Text Slots

  1. imagecaption1 (see snippet below)
  2. imagecaption2 (see snippet below)
  3. imagecaption3 (see snippet below)
  4. imagecaption4 (see snippet below)
  5. imagecaption5 (see snippet below)
  6. imagecaption6 (see snippet below)
  7. imagecaption7 (see snippet below)

Parts Configuration

To try these parts as used, simply copy and paste the following snippet of HTML into a Constructible HTML file.

• flickr_photo_api1

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoServer2.js"
       id="flickr_photo_api1"
       spec="0B841C28C1844C8781B8E5DD083DFD08">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getSizes"
      rel="rpc">
   </a>
  
  </div>

• flickr_photo_api2

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoServer2.js"
       id="flickr_photo_api2"
       spec="0B841C28C1844C8781B8E5DD083DFD08">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getSizes"
      rel="rpc">
   </a>
  
  </div>

• flickr_photo_api3

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoServer2.js"
       id="flickr_photo_api3"
       spec="0B841C28C1844C8781B8E5DD083DFD08">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getSizes"
      rel="rpc">
   </a>
  
  </div>

• flickr_photo_api4

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoServer2.js"
       id="flickr_photo_api4"
       spec="0B841C28C1844C8781B8E5DD083DFD08">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getSizes"
      rel="rpc">
   </a>
  
  </div>

• flickr_photo_api5

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoServer2.js"
       id="flickr_photo_api5"
       spec="0B841C28C1844C8781B8E5DD083DFD08">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getSizes"
      rel="rpc">
   </a>
  
  </div>

• flickr_photo_api6

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoServer2.js"
       id="flickr_photo_api6"
       spec="0B841C28C1844C8781B8E5DD083DFD08">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getSizes"
      rel="rpc">
   </a>
  
  </div>

• flickr_photo_api7

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoServer2.js"
       id="flickr_photo_api7"
       spec="0B841C28C1844C8781B8E5DD083DFD08">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getSizes"
      rel="rpc">
   </a>
  
  </div>

• flickr_photo_info_api1

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoInfoServer2.js"
       id="flickr_photo_info_api1"
       spec="E485D6687EFD4E5F89C033303CD2617A">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getInfo"
      rel="rpc">
   </a>
  
  </div>

• flickr_photo_info_api2

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoInfoServer2.js"
       id="flickr_photo_info_api2"
       spec="E485D6687EFD4E5F89C033303CD2617A">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getInfo"
      rel="rpc">
   </a>
  
  </div>

• flickr_photo_info_api3

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoInfoServer2.js"
       id="flickr_photo_info_api3"
       spec="E485D6687EFD4E5F89C033303CD2617A">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getInfo"
      rel="rpc">
   </a>
  
  </div>

• flickr_photo_info_api4

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoInfoServer2.js"
       id="flickr_photo_info_api4"
       spec="E485D6687EFD4E5F89C033303CD2617A">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getInfo"
      rel="rpc">
   </a>
  
  </div>

• flickr_photo_info_api5

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoInfoServer2.js"
       id="flickr_photo_info_api5"
       spec="E485D6687EFD4E5F89C033303CD2617A">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getInfo"
      rel="rpc">
   </a>
  
  </div>

• flickr_photo_info_api6

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoInfoServer2.js"
       id="flickr_photo_info_api6"
       spec="E485D6687EFD4E5F89C033303CD2617A">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getInfo"
      rel="rpc">
   </a>
  
  </div>

• flickr_photo_info_api7

  <div is_proxy="true"
       properties="uses_api_key:'7649c72ff120a2d7da9c99a04788f964'"
       script="http://js.constructibl.es/specs/FlickrPhotoInfoServer2.js"
       id="flickr_photo_info_api7"
       spec="E485D6687EFD4E5F89C033303CD2617A">
   <a href="http://api.flickr.com/services/rest/?method=flickr.photos.getInfo"
      rel="rpc">
   </a>
  
  </div>

• image1

  <div properties="emits:{ photo_id: 380173157 }"
       script="http://js.constructibl.es/specs/Emitter.js"
       id="image1"
       spec="959226399cc968c42d3e76f28257fc8a"><!-- 
      The flickr photo was found at http://www.flickr.com/photos/tjt195/380173157/
      The last bit of number is what I am emitting as the value of photo_id
     -->
  </div>

• image2

  <div properties="emits:{ photo_id: 3559417932 }"
       script="http://js.constructibl.es/specs/Emitter.js"
       id="image2"
       spec="959226399cc968c42d3e76f28257fc8a"><!-- 
      The flickr photo was found at http://www.flickr.com/photos/tjt195/3559417932/
      The last bit of number is what I am emitting as the value of photo_id
     -->
  </div>

• image3

  <div properties="emits:{ photo_id: 3178864430 }"
       script="http://js.constructibl.es/specs/Emitter.js"
       id="image3"
       spec="959226399cc968c42d3e76f28257fc8a"><!-- 
      The flickr photo was found at http://www.flickr.com/photos/tjt195/3178864430/
      The last bit of number is what I am emitting as the value of photo_id
     -->
  </div>

• image4

  <div properties="emits:{ photo_id: 2309615328 }"
       script="http://js.constructibl.es/specs/Emitter.js"
       id="image4"
       spec="959226399cc968c42d3e76f28257fc8a"><!-- 
      The flickr photo was found at http://www.flickr.com/photos/tjt195/2309615328/
      The last bit of number is what I am emitting as the value of photo_id
     -->
  </div>

• image5

  <div properties="emits:{ photo_id:2310768963 }"
       script="http://js.constructibl.es/specs/Emitter.js"
       id="image5"
       spec="959226399cc968c42d3e76f28257fc8a"><!-- 
      The flickr photo was found at http://www.flickr.com/photos/tjt195/2310768963/
      The last bit of number is what I am emitting as the value of photo_id
     -->
  </div>

• image6

  <div properties="emits:{ photo_id:2313118943 }"
       script="http://js.constructibl.es/specs/Emitter.js"
       id="image6"
       spec="959226399cc968c42d3e76f28257fc8a"><!-- 
      The flickr photo was found at http://www.flickr.com/photos/tjt195/2313118943/
      The last bit of number is what I am emitting as the value of photo_id
     -->
  </div>

• image7

  <div properties="emits:{ photo_id:2315374581 }"
       script="http://js.constructibl.es/specs/Emitter.js"
       id="image7"
       spec="959226399cc968c42d3e76f28257fc8a"><!-- 
      The flickr photo was found at http://www.flickr.com/photos/tjt195/2315374581/
      The last bit of number is what I am emitting as the value of photo_id
     -->
  </div>

• imageboard1

  <style type="text/css">
  #imageboard1 {
      left:60px;
      height:333px;
      }
  
      .ImageBoard {
      top:60px;
      width:500px;
  
      }
  </style>
  
  <div spec="bd763956f56bffa42119480a99ac1382"
       script="http://js.constructibl.es/specs/ImageBoard.js"
       class="ImageBoard"
       id="imageboard1">
   <img/>
  </div>

• imageboard2

  <style type="text/css">
  #imageboard2 {
      left:620px;
      height:334px;
      }
  
      .ImageBoard {
      top:60px;
      width:500px;
  
      }
  </style>
  
  <div spec="bd763956f56bffa42119480a99ac1382"
       script="http://js.constructibl.es/specs/ImageBoard.js"
       class="ImageBoard"
       id="imageboard2">
   <img/>
  </div>

• imageboard3

  <style type="text/css">
  #imageboard3 {
      left:1180px;
      height:333px;
      }
  
      .ImageBoard {
      top:60px;
      width:500px;
  
      }
  </style>
  
  <div spec="bd763956f56bffa42119480a99ac1382"
       script="http://js.constructibl.es/specs/ImageBoard.js"
       class="ImageBoard"
       id="imageboard3">
   <img/>
  </div>

• imageboard4

  <style type="text/css">
  #imageboard4 {
      left:1740px;
      height:333px;
      }
  
      .ImageBoard {
      top:60px;
      width:500px;
  
      }
  </style>
  
  <div spec="bd763956f56bffa42119480a99ac1382"
       script="http://js.constructibl.es/specs/ImageBoard.js"
       class="ImageBoard"
       id="imageboard4">
   <img/>
  </div>

• imageboard5

  <style type="text/css">
  #imageboard5 {
      left:2300px;
      height:334px;
      }
  
      .ImageBoard {
      top:60px;
      width:500px;
  
      }
  </style>
  
  <div spec="bd763956f56bffa42119480a99ac1382"
       script="http://js.constructibl.es/specs/ImageBoard.js"
       class="ImageBoard"
       id="imageboard5">
   <img/>
  </div>

• imageboard6

  <style type="text/css">
  #imageboard6 {
      left:2860px;
      height:333px;
      }
  
      .ImageBoard {
      top:60px;
      width:500px;
  
      }
  </style>
  
  <div spec="bd763956f56bffa42119480a99ac1382"
       script="http://js.constructibl.es/specs/ImageBoard.js"
       class="ImageBoard"
       id="imageboard6">
   <img/>
  </div>

• imageboard7

  <style type="text/css">
  #imageboard7 {
      left:3370px;
      height:334px;
      }
  
  #imageboard7 img {
      position:absolute;
      left:0px;
      top:0px;
      clip:rect(0px, 380px, 333px, 50px);
      }
  
      .ImageBoard {
      top:60px;
      width:500px;
  
      }
  </style>
  
  <div spec="bd763956f56bffa42119480a99ac1382"
       script="http://js.constructibl.es/specs/ImageBoard.js"
       class="ImageBoard"
       id="imageboard7">
   <img/>
  </div>

• imagecaption1

  <style type="text/css">
  #imagecaption1 {
      left:60px;
      top:410px;
      }
  
      .ImageCaption {
      line-height:12pt;
      }
  </style>
  
  <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
       script="http://js.constructibl.es/specs/TextSlots.js"
       class="ImageCaption"
       id="imagecaption1">
   <var field="name"
        class="ImageTitle">
   </var>
  
   <br/>
   <dfn class="ImageDate">Photo taken on
   </dfn>
  
   <var field="date"
        class="ImageDate">
   </var>
  
   <br/>
  </div>

• imagecaption2

  <style type="text/css">
  #imagecaption2 {
      left:620px;
      top:410px;
      }
  
      .ImageCaption {
      line-height:12pt;
      }
  </style>
  
  <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
       script="http://js.constructibl.es/specs/TextSlots.js"
       class="ImageCaption"
       id="imagecaption2">
   <var field="name"
        class="ImageTitle">
   </var>
  
   <br/>
   <dfn class="ImageDate">Photo taken on
   </dfn>
  
   <var field="date"
        class="ImageDate">
   </var>
  
   <br/>
  </div>

• imagecaption3

  <style type="text/css">
  #imagecaption3 {
      left:1180px;
      top:410px;
      }
  
      .ImageCaption {
      line-height:12pt;
      }
  </style>
  
  <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
       script="http://js.constructibl.es/specs/TextSlots.js"
       class="ImageCaption"
       id="imagecaption3">
   <var field="name"
        class="ImageTitle">
   </var>
  
   <br/>
   <dfn class="ImageDate">Photo taken on
   </dfn>
  
   <var field="date"
        class="ImageDate">
   </var>
  
   <br/>
  </div>

• imagecaption4

  <style type="text/css">
  #imagecaption4 {
      left:1740px;
      top:410px;
      }
  
      .ImageCaption {
      line-height:12pt;
      }
  </style>
  
  <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
       script="http://js.constructibl.es/specs/TextSlots.js"
       class="ImageCaption"
       id="imagecaption4">
   <var field="name"
        class="ImageTitle">
   </var>
  
   <br/>
   <dfn class="ImageDate">Photo taken on
   </dfn>
  
   <var field="date"
        class="ImageDate">
   </var>
  
   <br/>
  </div>

• imagecaption5

  <style type="text/css">
  #imagecaption5 {
      left:2300px;
      top:410px;
      }
  
      .ImageCaption {
      line-height:12pt;
      }
  </style>
  
  <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
       script="http://js.constructibl.es/specs/TextSlots.js"
       class="ImageCaption"
       id="imagecaption5">
   <var field="name"
        class="ImageTitle">
   </var>
  
   <br/>
   <dfn class="ImageDate">Photo taken on
   </dfn>
  
   <var field="date"
        class="ImageDate">
   </var>
  
   <br/>
  </div>

• imagecaption6

  <style type="text/css">
  #imagecaption6 {
      left:2860px;
      top:410px;
      }
  
      .ImageCaption {
      line-height:12pt;
      }
  </style>
  
  <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
       script="http://js.constructibl.es/specs/TextSlots.js"
       class="ImageCaption"
       id="imagecaption6">
   <var field="name"
        class="ImageTitle">
   </var>
  
   <br/>
   <dfn class="ImageDate">Photo taken on
   </dfn>
  
   <var field="date"
        class="ImageDate">
   </var>
  
   <br/>
  </div>

• imagecaption7

  <style type="text/css">
  #imagecaption7 {
      left:3420px;
      top:410px;
      }
  
      .ImageCaption {
      line-height:12pt;
      }
  </style>
  
  <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
       script="http://js.constructibl.es/specs/TextSlots.js"
       class="ImageCaption"
       id="imagecaption7">
   <var field="name"
        class="ImageTitle">
   </var>
  
   <br/>
   <dfn class="ImageDate">Photo taken on
   </dfn>
  
   <var field="date"
        class="ImageDate">
   </var>
  
   <br/>
  </div>

• pasteboard1

  <style type="text/css">
  #pasteboard1 {
      left:1in;
      top:1.5in;
      background-color:black;
      width:3920px;
      height:500px;
      }
  
      .PasteBoard {
      }
  </style>
  
  <div spec="74c94a4a8a1faa94cde43ef1c13f07f4"
       script="http://js.constructibl.es/specs/Pasteboard.js"
       id="pasteboard1"
       class="PasteBoard">
   <div spec="bd763956f56bffa42119480a99ac1382"
        script="http://js.constructibl.es/specs/ImageBoard.js"
        class="ImageBoard"
        id="imageboard1">
    <img/>
   </div>
  
   <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
        script="http://js.constructibl.es/specs/TextSlots.js"
        class="ImageCaption"
        id="imagecaption1">
    <var field="name"
         class="ImageTitle">
    </var>
  
    <br/>
    <dfn class="ImageDate">Photo taken on
    </dfn>
  
    <var field="date"
         class="ImageDate">
    </var>
  
    <br/>
   </div>
  
   <div spec="bd763956f56bffa42119480a99ac1382"
        script="http://js.constructibl.es/specs/ImageBoard.js"
        class="ImageBoard"
        id="imageboard2">
    <img/>
   </div>
  
   <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
        script="http://js.constructibl.es/specs/TextSlots.js"
        class="ImageCaption"
        id="imagecaption2">
    <var field="name"
         class="ImageTitle">
    </var>
  
    <br/>
    <dfn class="ImageDate">Photo taken on
    </dfn>
  
    <var field="date"
         class="ImageDate">
    </var>
  
    <br/>
   </div>
  
   <div spec="bd763956f56bffa42119480a99ac1382"
        script="http://js.constructibl.es/specs/ImageBoard.js"
        class="ImageBoard"
        id="imageboard3">
    <img/>
   </div>
  
   <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
        script="http://js.constructibl.es/specs/TextSlots.js"
        class="ImageCaption"
        id="imagecaption3">
    <var field="name"
         class="ImageTitle">
    </var>
  
    <br/>
    <dfn class="ImageDate">Photo taken on
    </dfn>
  
    <var field="date"
         class="ImageDate">
    </var>
  
    <br/>
   </div>
  
   <div spec="bd763956f56bffa42119480a99ac1382"
        script="http://js.constructibl.es/specs/ImageBoard.js"
        class="ImageBoard"
        id="imageboard4">
    <img/>
   </div>
  
   <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
        script="http://js.constructibl.es/specs/TextSlots.js"
        class="ImageCaption"
        id="imagecaption4">
    <var field="name"
         class="ImageTitle">
    </var>
  
    <br/>
    <dfn class="ImageDate">Photo taken on
    </dfn>
  
    <var field="date"
         class="ImageDate">
    </var>
  
    <br/>
   </div>
  
   <div spec="bd763956f56bffa42119480a99ac1382"
        script="http://js.constructibl.es/specs/ImageBoard.js"
        class="ImageBoard"
        id="imageboard5">
    <img/>
   </div>
  
   <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
        script="http://js.constructibl.es/specs/TextSlots.js"
        class="ImageCaption"
        id="imagecaption5">
    <var field="name"
         class="ImageTitle">
    </var>
  
    <br/>
    <dfn class="ImageDate">Photo taken on
    </dfn>
  
    <var field="date"
         class="ImageDate">
    </var>
  
    <br/>
   </div>
  
   <div spec="bd763956f56bffa42119480a99ac1382"
        script="http://js.constructibl.es/specs/ImageBoard.js"
        class="ImageBoard"
        id="imageboard6">
    <img/>
   </div>
  
   <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
        script="http://js.constructibl.es/specs/TextSlots.js"
        class="ImageCaption"
        id="imagecaption6">
    <var field="name"
         class="ImageTitle">
    </var>
  
    <br/>
    <dfn class="ImageDate">Photo taken on
    </dfn>
  
    <var field="date"
         class="ImageDate">
    </var>
  
    <br/>
   </div>
  
   <div spec="bd763956f56bffa42119480a99ac1382"
        script="http://js.constructibl.es/specs/ImageBoard.js"
        class="ImageBoard"
        id="imageboard7">
    <img/>
   </div>
  
   <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
        script="http://js.constructibl.es/specs/TextSlots.js"
        class="ImageCaption"
        id="imagecaption7">
    <var field="name"
         class="ImageTitle">
    </var>
  
    <br/>
    <dfn class="ImageDate">Photo taken on
    </dfn>
  
    <var field="date"
         class="ImageDate">
    </var>
  
    <br/>
   </div>
  
  </div>

Technical Specifications

Inputs

__power__

Outputs

No outputs are specified.