Javascript 图像替换

Question

我有一个新闻(博客)页面，一次只显示三个帖子(这是页面，我现在有多远:http://thewhiteoak.fluroltd.com/our-news/)。当用户单击帖子时，页面顶部的主标题图像将反射(reflect)帖子缩略图，但会显示更大的版本(在页面顶部)。

我不希望帖子进入他们自己的页面，即 single.php，因为没有必要。这可以从显示这三个帖子的通用博客页面完成吗？下面的代码是我已经拥有的，它链接到更大的图像但没有代替新闻页面。

任何人都可以阐明这种情况。当我收到 Uncaught ReferenceError: img_paths is not defined 时...但我似乎无法克服这个问题。

这是 mooTools 脚本的导入:

<?php  if (is_page_template('page-ournews.php')) { ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/moo_12.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/moo_12_more.js"></script>
<?php } ?>

Javascript 将找到链接并使其替换帖子缩略图的当前标题图像。

<script>

window.addEvent('domready', function() {

    var images = [];
    var loadingimages = [];
    var loadingimg_path = ['images/loading-bar-black.gif'];
            loadingimg_path.each(function(im) {
                loadingimages[im] = new Element('img', {
                    'src': im,
                    'styles': {
                        'visibility': 'visible',
                        'opacity': '0',
                        'width': '961px',
                        'height': '382px',
                        'border': 'none'

                    }
                });
            });
    <?php $description = get_post_meta($post->ID, "news-image-thumb", $single = true);
        if($description !== '') {
        //echo $description;
        $pattern = '/href=(?<first>[\'|"])(?<href>[^\1]*?)(?P=first)/i';

        preg_match_all($pattern, $description, $matches);
        $descr = "'".implode("','", $matches['href'])."'";

?>
        var img_paths = [<?php echo $descr;  ?>];
        <?php
    }
    ?>

    var loader = new Asset.images(img_paths, {
        onProgress: function(counter,index) {
            loadingimages[ loadingimg_path[0] ].set('opacity','0').inject($('frame')).fade(1);

        },
        onComplete: function() {
            //fill our img array
            img_paths.each(function(im) {
                images[im] = new Element('img', {
                    'src': im,
                    'styles': {
                        'visibility': 'hidden',
                        'width': '961px',
                        'height': '382px',
                        'opacity': '0',
                        'border': 'none'

                    }
                });
            });
            //assign click events
            $$('#sidenav-content a').addEvent('click', function(e) {
                e.stop();
                $('frame').empty();

                images[this.rel].set('opacity','0').inject($('frame')).fade(1);
            });
            //show first img in frame
            $('frame').empty();
            //loadingimages[ loadingimg_path[0] ].set('opacity','0').inject($('frame')).fade(1);
            images[ img_paths[0] ].set('opacity','0').inject($('frame')).fade(1);
        }
    });

});


</script>

显示帖子的代码:

<div id="frame" >
    <?php $description = get_post_meta($post->ID, "news-image-large", $single = true);
        if($description !== '') {
        echo str_replace('<img ','<img width="961" height="382" id="laptopimage" ',$description);

        }?>
        </div>

        <div class="post post-page" id="post-<?php the_ID(); ?>">
            <div class="post-content our-news">
                <?php the_content(); ?>

                    <ul id="news">
                        <?php $page = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("category_name=Our News&showposts=3&paged=$page"); while ( have_posts() ) : the_post(); $loopcounter++; ?>
                            <li id="postNews" class="post-<?php the_ID(); ?>">
                                <div class="box">

                                <?php 

                                        <?php if($feature_image_position == 'above'): ?>
        <?php if($enable_feature_image == 'yes' && has_post_thumbnail()): ?>
                    <!--<a href="<?php echo $large_image_url[0]; ?>" title="<?php the_title_attribute(); ?>" rel="<?php echo $rel; ?>"><?php echo theme_TIM_Thumb(317, $feature_image_height); ?></a>-->

                    <div id="sidecol">
            <div id="sidenav">
                <div id="sidenav-content">
                    <?php  if((get_post_meta($post->ID, "news-image-thumb", true))) { ?>
                            <?php echo get_post_meta($post->ID, "news-image-thumb", true); ?>       
                    <?php } ?>


                        <br/>       

                </div><!--sideanv-content-->
            </div><!--sideanv-->
        </div><!--sidecol-->




        <?php endif; ?>
    <?php endif; ?>

Answer 1

如果我不得不猜测的话，这似乎是 jQuery(您的站点似乎已经在使用它)和 mooTools(如果我理解正确的话，您添加的)之间的交互问题。您可以从这里开始:Google: mootools noconflict