1

好的，我有一个简单的列表，其中填充了来自 flickr 的集合标题，并且 onchange 调用了一个函数 changeGallery() 来更改所显示的图像集。我遇到的问题是我无法让 slimbox 处理来自文档就绪调用的图库图像。我不断收到“Uncaught TypeError: 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>
4

0 回答 0