0
한 번에 3 개의 게시물 만 표시되는 뉴스 (블로그) 페이지가 있습니다 (이 페이지는 현재까지 얼마나 멀리 있습니까 : http://thewhiteoak.fluroltd.com/our-news/). 사용자가 게시물을 클릭하면 페이지 상단의 기본 헤더 이미지가 게시 미리보기 이미지를 반영하지만 더 큰 버전 (페이지 상단)을 반영합니다.자바 스크립트 이미지 바꾸기
게시물이 필요 없기 때문에 해당 페이지가 single.php로 이동하는 것을 원하지 않습니다. 3 개의 게시물을 표시하는 일반 블로그 페이지에서이를 수행 할 수 있습니까? 아래의 코드는 이미 큰 이미지로 연결되었지만 뉴스 페이지 대신에 링크 된 것입니다.
누구든지이 상황에 대해 약간의 빛을 비추 수 있습니까? Uncaught ReferenceError가 생기면서 : img_paths가 정의되지 않았습니다 ... 그러나 나는 이것을 지나갈 수 없습니다.
<?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 } ?>
자바 스크립트 링크를 발견하고는 게시물 섬네일에 대한 현재 헤더 이미지를 대체 할 것입니다 :
이
은 Mootools의 스크립트에 대한 가져 오기입니다.<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; ?>