Flickr image feed example
Jump to: [HTML] [Javascript] [CSS] [Comments]
This uses the Flickr feeds to grab JSON image data. It does not require an API key. Note in the code in this example multiple tags would be separated by commas.
HTML
<div id="scroller"></div>
Javascript
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.simplyscroll.js"></script>
<link rel="stylesheet" href="jquery.simplyscroll.css" media="all"
type="text/css">
<script type="text/javascript">
(function($) {
$(function() { //on DOM ready
$("#scroller").simplyScroll({
className: 'flickr',
flickrFeed:
'http://api.flickr.com/services/feeds/photos_public.gne?tags=valentines',
jsonImgWidth: 240, //same as default vals
jsonImgHeight: 180,
frameRate: 20,
speed: 10
});
});
})(jQuery);
</script>
CSS
The styles are included in the CSS supplied
/* Container DIV - automatically generated */
.simply-scroll-container {
position: relative;
}
/* Clip DIV - automatically generated */
.simply-scroll-clip {
position: relative;
overflow: hidden;
z-index: 2;
}
/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list {
position: absolute;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.simply-scroll-list li {
padding: 0;
margin: 0;
list-style: none;
}
.simply-scroll-list li img {
border: none;
display: block;
}
/* Master button styles */
.simply-scroll-btn {
position: absolute;
background-image: url(buttons.png);
width: 42px;
height: 44px;
z-index:3;
cursor: pointer;
}
.simply-scroll-btn-left {
left: 6px;
bottom: 6px;
background-position: 0 -44px;
}
.simply-scroll-btn-left.disabled {
background-position: 0 0 !important;
}
.simply-scroll-btn-left:hover {
background-position: 0 -88px;
}
.simply-scroll-btn-right {
right: 6px;
bottom: 6px;
background-position: 84px -44px;
}
.simply-scroll-btn-right.disabled {
background-position: 84px 0 !important;
}
.simply-scroll-btn-right:hover {
background-position: 84px -88px;
}
.simply-scroll-btn-up {
right: 6px;
top: 6px;
background-position: -126px -44px;
}
.simply-scroll-btn-up.disabled {
background-position: -126px 0 !important;
}
.simply-scroll-btn-up:hover {
background-position: -126px -88px;
}
.simply-scroll-btn-down {
right: 6px;
bottom: 6px;
background-position: -42px -44px;
}
.simply-scroll-btn-down.disabled {
background-position: -42px 0 !important;
}
.simply-scroll-btn-down:hover {
background-position: -42px -88px;
}
/* Custom class modifications - adds to / overrides above
Flickr example
Images created from a data source uses a simpler format i.e.
<div>
<img/>
<img/>
...
</div>
*/
/* Container DIV */
.flickr {
width: 576px;
height: 180px;
margin-bottom: 1.5em;
}
/* Clip DIV */
.flickr .simply-scroll-clip {
width: 576px;
height: 180px;
}
/* height/width does not need to be explicitly set */
.flickr .simply-scroll-list img {
float: left;
border: none;
display: block;
}
« Previous Example | Custom HTML example »
Comments / Feedback
Any feedback or bugs should be directed to @logicbox or will@logicbox.net. Enjoy!