わかりました。flickrから設定されたタイトルが入力される単純なリストがあり、onchangeは、表示される画像のセットを変更する関数changeGallery()を呼び出します。私が遭遇した問題は、slimboxがドキュメントレディコールからのギャラリー画像を処理できないことです。「UncaughtTypeError:Object [object Object] has no method'slimbox'」が表示され続けます$(window).bind('load'、changeGallery);で少しハックしました。しかし、それは私を汚く感じさせるだけです。どんな助けでも素晴らしいでしょう。
私のリスト
<div class="list">
<form action="" method="get" name="choose_gallery" id="choose_gallery">
<select name="Galleries" id="Galleries" onchange="changeGallery();"></select>
</form>
</div>
私のJS
<!--instantiate js plugins-->
<script src="javascripts/whatever.js"></script>
<script type="text/javascript" src="js/jquery.slimbox2.js"></script>
<script type="text/javascript">
var ids = new Array();
var titles = new Array();
var imgSize = "";
var firstSel;
var firstSelectedID;
function changeGallery() {
var sel = document.getElementById("Galleries");
var selectedID = sel.options[sel.selectedIndex].value;
showGallery(selectedID);
}
function showGallery(str) {
console.log("str =" + str);
var url = "http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=926106eebb942f84206ae23e124455fe&photoset_id=" + str + "&format=json&jsoncallback=?"
$.getJSON(url,function (data) {
console.log("data =" + data.photoset.photo);
var photosurl = url;
$("#gallery").empty().append('<ul class="photos"></ul>');
//build urls and pass to plugin
$.getJSON(photosurl, function (data) {
$.each(data.photoset.photo, function (idx, photo) {
var photoid = photo.id;
var secret = photo.secret;
var server = photo.server;
var farm = photo.farm;
var photo_url = 'http://farm' + farm + '.static.flickr.com/' + server + '/' + photoid + '_' + secret + '_q.jpg';
var photo_urlm = 'http://farm' + farm + '.static.flickr.com/' + server + '/' + photoid + '_' + secret +imgSize+'.jpg';
$('.photos').append('<li><a href="' + photo_urlm + '"><img src="' + photo_url + '" /></a></li>');
});
//this next line is undefined from doc ready ...
jQuery("#gallery a").slimbox();
});
});
}
$(document).ready(function () {
$.getJSON("http://api.flickr.com/services/rest/?&method=flickr.photosets.getList&api_key=926106eebb942f84206ae23e124455fe&user_id=92141417@N03&format=json&jsoncallback=?",
function (data) {
var photosetID = "";
var title = "";
$.each(data.photosets.photoset, function (i, set) {
photosetID = set.id;
console.log(photosetID);
title = set.title._content;
ids.push(photosetID);
titles.push(title);
console.log(ids.length);
l = ids.length;
l--;
if( l == 0) {
$(window).bind('load', changeGallery);
//the above line is a bit of a hack
//changeGallery();
}
});
for (i = 0; i < ids.length; i++) {
var option = new Option(titles[i], ids[i]);
var dropDown = document.getElementById("Galleries");
dropDown.options[i] = option;
}
});
});
</script>