This is a vertical 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. Hover sensors are placed on the top and bottom ends to facilitate navigation.
To try these parts as used, simply copy and paste the following snippet of HTML into a Constructible HTML file.
<style type="text/css">
#down {
position:fixed;
left:660px;
top:500px;
z-index:2;
}
.Slider a {
color:#ccc;
font-weight:bold;
font-size:60pt;
opacity:.5;
}
.Slider a:hover {
color:#fff;
cursor:pointer;
}
</style>
<div spec="8bb98c0ec3f25a54ddc1f31e2b499f20"
script="http://js.constructibl.es/specs/HoverSensor.js"
properties="does_indicate_continuously:true,
emits_when_active:-60"
id="down"
class="Slider">
<a>darr
</a>
</div>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<style type="text/css">
#imageboard2 {
left:60px;
top:520px;
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>
<style type="text/css">
#imageboard3 {
left:60px;
top:970px;
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>
<style type="text/css">
#imageboard4 {
left:60px;
top:1420px;
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>
<style type="text/css">
#imageboard5 {
left:60px;
height:334px;
top:1870px;
}
.ImageBoard {
top:60px;
width:500px;
}
</style>
<div spec="bd763956f56bffa42119480a99ac1382"
script="http://js.constructibl.es/specs/ImageBoard.js"
class="ImageBoard"
id="imageboard5">
<img/>
</div>
<style type="text/css">
#imageboard6 {
left:60px;
height:333px;
top:2320px;
}
.ImageBoard {
top:60px;
width:500px;
}
</style>
<div spec="bd763956f56bffa42119480a99ac1382"
script="http://js.constructibl.es/specs/ImageBoard.js"
class="ImageBoard"
id="imageboard6">
<img/>
</div>
<style type="text/css">
#imageboard7 {
left:10px;
height:334px;
top:2770px;
}
#imageboard7 img {
position:absolute;
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>
<style type="text/css">
#panel {
width:800px;
height:3400px;
overflow:hidden;
}
</style>
<div script="http://js.constructibl.es/specs/SlidingPanel.js"
properties="stops_top_edge_from_passing:-2700,
stops_bottom_edge_from_passing:3400"
ascript="http://js.constructibl.es/specs.debug/SlidingPanel.js"
id="panel"
spec="2d3f4ec9ae8ef83495cea1a89ae7d630">
<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>
<style type="text/css">
#up {
position:fixed;
left:660px;
top:190px;
z-index:2;
}
.Slider a {
color:#ccc;
font-weight:bold;
font-size:60pt;
opacity:.5;
}
.Slider a:hover {
color:#fff;
cursor:pointer;
}
</style>
<div spec="8bb98c0ec3f25a54ddc1f31e2b499f20"
script="http://js.constructibl.es/specs/HoverSensor.js"
properties="does_indicate_continuously:true,
emits_when_active:60"
id="up"
class="Slider">
<a>uarr
</a>
</div>
Was this example helpful? Do you have any questions? Tell us about it below!