Photo Gallery (Horizontal Scrolling v2)

21e11048afdc4b5faa7d6aa8178adc8f

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. The Image Board sits atop a button, so that when you click on the photograph a hyperlink gets activated, and you get taken to a page on Flickr where the photo is stored.

Click here to see it in action!

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"
     properties="does_link_blank_anchors:true"
     class="ImageBoard"
     id="imageboard1">
 <a>
  <img/>
 </a>

</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"
     properties="does_link_blank_anchors:true"
     class="ImageBoard"
     id="imageboard2">
 <a>
  <img/>
 </a>

</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"
     properties="does_link_blank_anchors:true"
     class="ImageBoard"
     id="imageboard3">
 <a>
  <img/>
 </a>

</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"
     properties="does_link_blank_anchors:true"
     class="ImageBoard"
     id="imageboard4">
 <a>
  <img/>
 </a>

</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"
     properties="does_link_blank_anchors:true"
     class="ImageBoard"
     id="imageboard5">
 <a>
  <img/>
 </a>

</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"
     properties="does_link_blank_anchors:true"
     class="ImageBoard"
     id="imageboard6">
 <a>
  <img/>
 </a>

</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"
     properties="does_link_blank_anchors:true"
     class="ImageBoard"
     id="imageboard7">
 <a>
  <img/>
 </a>

</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"
      properties="does_link_blank_anchors:true"
      class="ImageBoard"
      id="imageboard1">
  <a>
   <img/>
  </a>

 </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"
      properties="does_link_blank_anchors:true"
      class="ImageBoard"
      id="imageboard2">
  <a>
   <img/>
  </a>

 </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"
      properties="does_link_blank_anchors:true"
      class="ImageBoard"
      id="imageboard3">
  <a>
   <img/>
  </a>

 </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"
      properties="does_link_blank_anchors:true"
      class="ImageBoard"
      id="imageboard4">
  <a>
   <img/>
  </a>

 </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"
      properties="does_link_blank_anchors:true"
      class="ImageBoard"
      id="imageboard5">
  <a>
   <img/>
  </a>

 </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"
      properties="does_link_blank_anchors:true"
      class="ImageBoard"
      id="imageboard6">
  <a>
   <img/>
  </a>

 </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"
      properties="does_link_blank_anchors:true"
      class="ImageBoard"
      id="imageboard7">
  <a>
   <img/>
  </a>

 </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

__power__

Outputs

No outputs are specified.

Was this example helpful? Do you have any questions? Tell us about it below!