Javascript图像替换

Question

I have a news (blog) page where there are only ever three posts shown at a time (this is the page, how far I have now: http://thewhiteoak.fluroltd.com/our-news/ ). When a user clicks on a post the main header image at the top of the page will reflect the post thumbnail but a larger version (at the top of the page).

I don't want the post to go through to their own page ie single.php as there is no need for it. Can this be done from the generic blog page that displays the three posts? The code below is what I have already which links to a larger image but not in place of the news page.

Can anyone shed some light on this situation please. As I'm getting an Uncaught ReferenceError: img_paths is not defined... But I can't seem to get past this.

This is the import for the mooTools scripts:

<?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 } ?>

The Javascript which will find the link and make it replace the current header image for the post thumbnail.

<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>

The code that displays the posts:

<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

If I had to guess, this seems like a problem with the interaction between jQuery (which your site appears to be using already) and mooTools (which you added, if I understand correctly). You can start here: Google: mootools noconflict