Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.
$15
Posts with changing headers depending on what post is cliked
I don't want the post to go through to their own page i.e. 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. Or a more efficient way to do 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; ?>
This question has been answered.
gerardweiz | 12/20/11 at 11:41am
Edit
Previous versions of this question:
12/20/11 at 11:48am
(5) Possible Answers Submitted...
See a chronological view of answers?
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
-
Last edited:
12/20/11
11:53amGabriel Reguly says:Hi gerardweiz,
Your bit.ly URL seems broken, both this question's http://bit.ly/sFcp4D and the other question's http://bit.ly/uHrh3E lead to the same page.
At least for me, they looke like as not working properly.
--Edit: Francisco Javier Carazo Gil posted an answer, so the error must be on my end. :P
Regards,
GabrielPrevious versions of this answer: 12/20/11 at 11:53am
-
Last edited:
12/20/11
11:51amFrancisco Javier Carazo Gil says:Hi Gerard,
The first one, do not use <script> in your page, use better: wp_enqueue_script().
I'm going to look at the rest. -
Last edited:
12/20/11
12:40pmdesignchemical says:If you are just swapping out the image for a larger version and the image URL can be taken from the thumbnail then it can be done in a couple of lines of jquery
see following tutorial for the code and demo:
jQuery Image Swap Gallery with Just 3 Lines of Code! -
Last edited:
12/20/11
11:41pmArnav Joy says:you can change image using jquery when click on thumbnails similar like this
Thumbnails
<a href="image1.jpg" class="thumbnail"><img src="image1-thumb.jpg"
alt="Image 1"/></a>
<a href="image2.jpg" class="thumbnail"><img src="image2-thumb.jpg"
alt="Thumbnail 2"/></a>
header image
<div id="imageWrap">
<img src="image1.jpg" alt="Main Image" id="mainImage"/>
</div>
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
try this link
http://workshop.rs/demo/gallery-in-4-lines/Previous versions of this answer: 12/20/11 at 11:41pm
-
Last edited:
12/21/11
2:52amChristianto says:Hi,
for img_paths error, it happen because you are using
get_post_meta($post->ID, "news-image-thumb", $single = true);
to retrieved data to be process as img_paths but not put it on wordpress loop or passing post ID to the functions. So no data is return/defined for img_paths.
If larger images for each element that will be used as image header is same as define on 'rel' attribute inside id='sidenav-content'
<ul class="cs-screenshots">
<li>
<a href="/img/news-hdr-alfresco.gif" rel="/img/news-hdr-alfresco.gif" title=""><img src="/img/news-thmb-alfresco.jpg" alt="Dine Alfresco"></a>
</li>
</ul>
you can use this script
<script>
window.addEvent('domready', function() {
var images = [];
var img_paths = [];
jQuery('.cs-screenshots a').each(function(i){
img_paths[i] = jQuery(this).attr('rel');
});;
var loadingimages = [];
var loadingimg_path = ['/wp-content/assets/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'
}
});
});
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
$$('.cs-screenshots 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>
I attach a working demo on zip file below, you can check it by your self.
Also please change moo_12.js and moo_12_more.js with file on demo, both from your website return error.
Let me know if it turn error on your site..
please vote me if it works, thanks- 12/21/11 3:00am
gerardweiz says:OK i've looked at the demo but nothing seems to be connected, no styles no js. Is there anyway that you can connect this up. The reason why the other site can't be seen is due to DNS, so you can view it on the sister website. Which will have the same functionality: http://bit.ly/ssUsVp - its the news page.
Thank you for your response. - 12/21/11 3:15am
Christianto says:Did you extract all in the zip file or just .html file, please extract all files on zip.
- 12/22/11 8:13am
gerardweiz says:Hi Christianto,
Ok I can see this works in your demo, I'm just trying to implement it on the website. However I would like the header images to be displayed over the newsletter image (the first image). But I would like the first header image to fadeout and then the next header image fade in. if you understand me. - 12/22/11 9:14am
Christianto says:Hi,
Try this,
move the first header image that show in your site..
<img src="http://thewhiteoak.fluroltd.com/wp-content/themes/clearspace/assets/images/ournews-header.png" alt="" width="961" height="382"/>
inside #frame (div id="frame")
<div id="frame">
<img src="http://thewhiteoak.fluroltd.com/wp-content/themes/clearspace/assets/images/ournews-header.png" alt="" width="961" height="382"/>
</div>
and then try to commented few line of code of script, so become
<script type="text/javascript">
window.addEvent('domready', function() {
var images = [];
var img_paths = [];
jQuery('.cs-screenshots a').each(function(i){
img_paths[i] = jQuery(this).attr('rel');
});;
var loadingimages = [];
var loadingimg_path = ['/wp-content/assets/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'
}
});
});
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
$$('.cs-screenshots 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> - 12/23/11 8:02am
gerardweiz says:Hi Christianto,
I can't get this work, I've attached the php file I'm working on can you implement it on this page please.
Cheers,
Gerard - 12/23/11 8:45am
Christianto says:Hi,
Did you put this html:
<ul class="cs-screenshots">
<li>
<a href="/img/news-hdr-alfresco.gif" rel="/img/news-hdr-alfresco.gif" title=""><img src="/img/news-thmb-alfresco.jpg" alt="Dine Alfresco"></a>
</li>
</ul>
as value inside post meta (custom value), with named "case-study-image-list", I didn't found any <ul> class "cs-screenshots" that contain image/rel data required. - 12/23/11 8:50am
Christianto says:Ok, please try attach file..
let me know if you already change it so I can check it on your site.. - 12/23/11 8:55am
gerardweiz says:Just changed it it has a Parse error: syntax error, unexpected $end in /srv/thethreeoaks.fluroltd.com/public/htdocs/wp-content/themes/clearspace/framework/templates/page_ournews.php on line 249
Any ideas? - 12/23/11 8:59am
Christianto says:Could you PM me your temp FTP account, so I can edit it directly..
Thanks - 12/23/11 10:54am
gerardweiz says:Were you able to login?
- 12/23/11 10:58am
Christianto says:No, I could not login..
I send you my email address, did you get it..
- 12/21/11 3:00am
This question has expired.
gerardweiz had additional discourse to offer.
Julio Potier, gerardweiz voted on this question.
Current status of this question: Completed
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.