Demos
Lightbox Configuration
In this demo we will configure a single gallery with lightbox functionality
/* Javascript */
YAHOO.photoViewer.config = {
viewers: {
"lightbox1" : {
properties: {
id: "lightbox1",
grow: 0.2,
fade: 0.2,
modal: true,
dragable: false,
fixedcenter: true,
xy: [0,0],
loadFrom: "html",
position: "absolute",
easing: YAHOO.util.Easing.easeBothStrong,
buttonText: {
next: " ",
prev: " ",
close: "Close"
}
}
}
}
};
/* HTML */
<div id="[HTML id]">
<a
href="[path to full sized image]"
title="[image title]"
class="photoViewer">
<img
src="[path to thumbnail image]"
alt="[image description]" />
</a>
</div>
lightbox1
Multiple Gallery Configuration
In this demo we will configure multiple galleries, each with different configurations.
/* Javascript */
YAHOO.photoViewer.config = {
viewers: {
"lightbox2" : {
properties: {
id: "lightbox2",
grow: 0.2,
fade: 0.2,
modal: true,
dragable: false,
fixedcenter: true,
xy: [0,0],
loadFrom: "html",
position: "absolute",
easing: YAHOO.util.Easing.easeBothStrong
}
},
"gallery" : {
properties: {
id: "gallery",
grow: 0.5,
fade: 0.5,
modal: false,
dragable: true,
fixedcenter: true,
xy: [0,0],
loadFrom: "html",
position: "absolute",
easing: YAHOO.util.Easing.easeBothStrong
}
},
"gallery-notcentered" : {
properties: {
id: "gallery-notcentered",
grow: 0.5,
fade: 0.5,
modal: false,
dragable: true,
fixedcenter: false,
xy: [200,200],
loadFrom: "html",
position: "absolute",
easing: YAHOO.util.Easing.easeBothStrong
}
}
}
};
/* HTML */
<div id="[HTML id]">
<a
href="[path to full sized image]"
title="[image title]"
class="photoViewer">
<img
src="[path to thumbnail image]"
alt="[image description]" />
</a>
</div>
lightbox2
gallery
gallery-notcentered
Relative Positioning Configuration
In this demo we will configure a single gallery to appear in relative positioning.
/* Javascript */
YAHOO.photoViewer.config = {
viewers: {
"lightbox3" : {
properties: {
id: "lightbox3",
grow: 0.2,
fade: 0.2,
modal: false,
dragable: false,
fixedcenter: false,
xy: [0,0],
loadFrom: "html",
position: "relative",
container: "relshowcase",
easing: YAHOO.util.Easing.easeBothStrong
}
}
}
};
/* HTML */
<div id="[HTML id]">
<a
href="[path to full sized image]"
title="[image title]"
class="photoViewer">
<img
src="[path to thumbnail image]"
alt="[image description]" />
</a>
</div>
lightbox1
Remote XML Configuration
In this demo we will configure a single gallery and import the photos from a remote XML file.
/* Javascript */
YAHOO.photoViewer.config = {
viewers: {
"lightbox4" : {
properties: {
id: "lightbox4",
grow: 0.2,
fade: 0.2,
modal: true,
dragable: false,
fixedcenter: true,
xy: [0,0],
loadFrom: "xml",
url: "../../../projects/photoViewer/yui/examples/photos.xm",
position: "absolute",
easing: YAHOO.util.Easing.easeBothStrong
}
}
}
};
lightbox4
Slide show Configuration
In this demo we will configure a single gallery for slid show functionality
/* Javascript */
YAHOO.photoViewer.config = {
viewers: {
"lightbox5" : {
properties: {
id: "v3",
grow: 0.2,
fade: 0.2,
modal: true,
dragable: false,
fixedcenter: true,
loadFrom: "html",
position: "absolute",
easing: YAHOO.util.Easing.easeBothStrong,
slideShow: {
loop:false,
duration:5000,
autoStart:true,
playMode:"shuffle",
controlsText: {
play: "play",
pause: "pause",
stop: "stop",
display: "({0} of {1})"
}
}
}
}
}
};
/* HTML */
<div id="[HTML id]">
<a
href="[path to full sized image]"
title="[image title]"
class="photoViewer">
<img
src="[path to thumbnail image]"
alt="[image description]" />
</a>
</div>
lightbox1
Click here to start slide show
Flickr RSS Configuration
In this demo we will configure a single gallery for reading a Flickr RSS feed
/* Javascript */
YAHOO.photoViewer.config = {
viewers: {
"lightbox6" : {
properties: {
id: "lightbox6",
grow: 0.3,
fade: 0.3,
modal: true,
dragable: false,
fixedcenter: true,
loadFrom: "flickr",
position: "absolute",
easing: YAHOO.util.Easing.easeBothStrong,
buttonText: {
next: " ",
prev: " ",
close: "X"
},
flickrRss: {
id: "26965636@N00",
thumbSize: "square" // square|thumb
}
}
}
}
};
/* HTML */
<div id="[HTML id]">
<a
href="[path to full sized image]"
title="[image title]"
class="photoViewer">
<img
src="[path to thumbnail image]"
alt="[image description]" />
</a>
</div>
Flickr RSS
Load Flickr RSS Feed
- Change this to your Flickr NSID (you can find it in your RSS feed)
Flickr API Configuration
In this demo we will configure a single gallery for using the Flickr API
/* Javascript */
YAHOO.photoViewer.config = {
viewers: {
"lightbox7" : {
properties: {
id: "lightbox7",
grow: 0.2,
fade: 0.2,
modal: true,
dragable: false,
fixedcenter: true,
position: "absolute",
easing: YAHOO.util.Easing.easeBothStrong,
buttonText:{
next: " ",
prev: " ",
close: "X"
},
slideShow: {
loop:true,
duration:5000,
autoStart:false,
playMode:"ordered",
controlsText: {
play: " ",
pause: " ",
stop: " ",
display: "({0} of {1})"
}
},
flickrApi: {
apikey: "5ae7887a41f1354366a18ab8a03b32ef",
thumbSize: "square",
method: "flickr.photos.search",
params: {text:"kittens AND puppies",per_page:"25",page:"1",sort:"interestingness-desc"}
}
}
}
}
};
/* HTML */
<div id="[HTML id]">
<a
href="[path to full sized image]"
title="[image title]"
class="photoViewer">
<img
src="[path to thumbnail image]"
alt="[image description]" />
</a>
</div>
Flickr API
This API call is configured to get the flickr.photos.search response using the paramters text (search string is "kittens AND puppies"), per_page, sort (interestingness) and page.
