Question

我正在创建一个照片网格，但效果并不好。我找到了这个教程here，我试图复制这个效果。现在照片出现了，它们似乎有一些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或类，它显然没有做太多。无论如何，这是我可以为这个问题收集的最完整的信息量。这有点让我疯狂。因此，总结在代码墙之后，网格会显示内部的图片，但是当我悬停或点击任何图片时，不会发生悬停，活动或动画效果。任何帮助表示赞赏。

Answer 1

我拿了代码的演示页（照片位）和made a jsfiddle。

问题在于.live，正如您所想，但仅使用on还不够。代码需要委托事件处理到一些不会消失的祖先。包含元素（我们已经为其提供参考）运行良好。

以下是更改：

        $container.on('click', '.' + settings.activeClass, function(){  
            select(this);
        });
        $container.on('click', '.' + settings.selectedClass, function(){
            hideSelected();
        });

jQuery照片网格没有预期的效果

1 个答案: