0

写真グリッドを作成していますが、うまくいきません。ここでこのチュートリアルを見つけ、その効果を再現しようとしています。現在、写真が表示されており、いくつかのCSSスタイルがあるようです。ただし、写真にカーソルを合わせたりクリックしたりしても何も起こりません。

CSS

#pg { 
    position: relative;
    height: 585px; 
    background: #000; 
}

#pg li { 
    position: relative; 
    list-style: none; 
    width: 175px; 
    height: 117px; 
    overflow: hidden; 
    float: left; 
    z-index: 2; 
    opacity: .3; 
}

#pg li.active { 
    opacity: 1; 
}

#pg li.selected { 
    opacity: 1; 
    z-index: 99999; 
    -moz-box-shadow: 0px 0px 10px #fff; 
    -webkit-box-shadow: 0px 0px 10px #fff; 
}

#pg li img { 
    display: block;
    width: 100%; 
}

#pg li p { 
    color: white;
    margin: 10px 0; 
    font-size: 12px; 
}

Javascript ファイル #1

(function($) {
    $.fn.jphotogrid = function(settings, callback) {
        settings = $.extend(true, {
            activeClass: 'active',
            selectedClass: 'selected',
            baseCSS: {},
            selectedCSS: {}
        }, settings);

        var url = settings.flickrbase + settings.feedapi + '?';
        var first = true;

        //Convert floats to absolute
        function toAbsolute(el){
            $(el).children().each(function(){
                var pos = $(this).position();
                $(this).data('ptop',Math.floor(Number(pos.top)) + 'px');
                $(this).data('pleft',Math.floor(Number(pos.left)) + 'px');
            }).each(function(){
                placeOriginal(this);
            });
        }

        function placeOriginal(el, animate, callback){
            var dtop = $(el).data('ptop');
            var dleft = $(el).data('pleft');
            var props = $.extend({
                top: dtop,
                left: dleft
            }, settings.baseCSS);
            if(animate){
                $(el).animate(props, 'slow', function(){
                    if($.isFunction(callback)) callback();
                });
            }
            else{
                $(el).css($.extend(props, {position: 'absolute'}));
            }
        }

        function hideSelected(callback){
            $container.find('.' + settings.selectedClass).each(function(){
                $(this).removeClass(settings.selectedClass);
                placeOriginal(this, true);
            });
            if($.isFunction(callback)) callback();
        }

        function select(el){
            hideSelected(function(){
                $(el).addClass('selected').removeClass('active');
                $(el).animate(settings.selectedCSS, 'slow');
            });
        }

        for(var key in settings.qstrings){
            if(!first)
                url += '&';
            url += key + '=' + settings.qstrings[key];
            first = false;
        }

        return $(this).each(function(){
            $container = $(this);
            $(this).css('position','relative');
            toAbsolute(this);

            $(this).children()
                .css('cursor', 'pointer')
                .hover(function(){
                    if(!$(this).hasClass(settings.selectedClass))
                        $(this).addClass(settings.activeClass);
                },function(){
                    $(this).removeClass(settings.activeClass);
                });
            $('.' + settings.activeClass).live('click', function(){             
                select(this);
            });
            $('.' + settings.selectedClass).live('click', function(){
                hideSelected();
            });

            $(this).find('div')
                .hover(function(){
                    $(this).css('opacity', 0);
                },function(){
                    $(this).css('opacity', .5);
                })
                .click(function(){
                    $(this).css('opacity', 0);
                    $li = $(this).parent();
                    $li.css("z-index", 99);
                    $li.animate({
                        top: 0,
                        left: 0,
                        width: '100%',
                        height: '400px'
                    }, 'slow');
                });
            });
    }
})(jQuery);

Javascript ファイル #2

$('#pg').jphotogrid({
    baseCSS: {
        width: '175px',
        height: '117px',
        padding: '0px'
    },
    selectedCSS: {
        top: '50px',
        left: '100px',
        width: '500px',
        height: '360px',
        padding: '10px'
    }
});

PHP

if(isset($_POST['answer_id'])) {
    $answer_id = $_POST['answer_id'];

    $get_pics = $db->prepare('
        SELECT location
        FROM pictures
        WHERE answer_id = ?
    '); 

    $get_pics->bindValue(1, $answer_id, PDO::PARAM_STR);
    $get_pics->execute();

    echo "<ul id='pg'>";

    while ($row = $get_pics->fetch(PDO::FETCH_ASSOC)) {     
        echo "<li>" . "<img src='".$row['location']."'/>" . "</td>";
    }
    echo "</ul>";
    echo "<input value='Done' id='cancel_task_pics' type='button' class='form_button' /> ";
}

コードは動作するはずです。エラーが見つからないので、.js ファイルをインクルードする場所を数回入れ替えました。それもうまくいきませんでした。ファイルの上部または下部にそれらを含めることができますが、まだ機能していないようです。

サイトからzipファイルをダウンロードしたところ、追加のcssが含まれています。私はそれとの関連性を見つけることができないようです。ここにあなたの誰かができる場合があります

余分なCSS

.thumbs li { 
    list-style: none; 
    float: left; 
    margin: 5px; 
    padding: 3px; 
    background: #eee; 
    -moz-box-shadow: 0 0 4px #444; 
    -webkit-box-shadow: 0 0 2px #000; 
}

.thumbs li a { }
.thumbs li img { display: block; }
.thumbs li a img { border: none;}

#cycle { 
    margin: 0; 
    padding: 0; 
    width: 500px; 
    height: 333px; 
    padding: 3px; 
    background: #eee; 
    -moz-box-shadow: 0 0 2px #000; 
    -webkit-box-shadow: 0 0 2px #000;
}

#cycle li { 
    position: relative; 
    list-style: none; 
    margin: 0; 
    padding: 3px; 
    width: 500px; 
    height: 333px; 
    overflow: hidden; 
}

#cycle li div { 
    position: absolute; 
    bottom: 3px; 
    left: 3px; 
    padding: 3px; 
    width: 494px; 
    background: black; 
    color: white; 
    font-size: 12px; 
    opacity: .8; 
}

この「余分なCSS」は使用する必要があるようですが、チュートリアルや実装のどこにも言及されていません。とにかくstyle.cssファイルに含めましたが、IDやクラスを呼び出していないため、明らかにあまり機能していません。とにかく、これは私がこの問題について収集できる最も完全な量の情報です。それはちょっと私を夢中にさせています。要約すると、そのコードの壁の後、グリッドは内部の写真とともに表示されますが、写真にカーソルを合わせたりクリックしたりしても、ホバー、アクティブ、またはアニメーション効果は発生しません。どんな助けでも大歓迎です。

4

1 に答える 1

1

私はデモページ (写真のビット) を取り、コードの jsfiddleを作成しました。

ご想像のとおり、問題は にありましたが.live、 on を使用するだけでは十分ではありませんでした。このコードは、イベント処理を、なくなることのない祖先に委任する必要があります。包含要素 (既に参照がある) は十分に機能します。

変更点は次のとおりです。

        $container.on('click', '.' + settings.activeClass, function(){  
            select(this);
        });
        $container.on('click', '.' + settings.selectedClass, function(){
            hideSelected();
        });
于 2013-08-30T21:03:20.070 に答える