Posted 2 years ago #
I'm trying to add a script that will randomly rotate a set of images inside a page post.
I already tried this:
<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>and it didn't work.
Hi,
Refer this article:
http://codex.wordpress.org/Using_Javascript#Using_Multiple_Javascript_Files_inside_one_post_or_page
Thanks,
Shane G.
Posted 2 years ago #
Hey Shane, thanks for your reply.
I did read through all of that, and I'm doing exactly what it says or maybe not..
This is my .js file
<!--
//
// Type the number of images you are rotating.
NumberOfImagesToRotate = 2;
// Specify the first and last part of the image tag.
FirstPart = '<img src="top';
LastPart = '.gif">';
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->which I saved in my theme folder as randomtop.js
and this is what I'm putting in the post:
<script type="text/javascript" src="http://localhost/wordpress/wp-content/themes/themeone/randomtop.js"> </script>
<script type="text/javascript" language="JavaScript"><!--
printImage();
//--></script>I'm even using the raw html plugin.
Also, I have wordpress installed offline for testing themes.
I'm not sure what I'm doing wrong...
Posted 2 years ago #
anyone has any idea???
I really need this...
Posted 2 years ago #
Your script spits out a valid img tag so assuming you actually have images of those names they should display. Except... relative paths don't work the way you'd expect within WP templates. What you need to do is use the WordPress function (PHP) get_bloginfo('template_url') to get the path to your theme files and prepend that to the img src so that you have an absolute path-- "http://yoursite/wp-content/yourtheme/top2.gif"
Posted 2 years ago #
you're saying to add get_bloginfo('template_url') to the script?
This is what I did
<!--
//
// Type the number of images you are rotating.
NumberOfImagesToRotate = 2;
// Specify the first and last part of the image tag.
FirstPart = '<img src="get_bloginfo('template_url')/top'; <<<<<<<<<HERE
LastPart = '.gif">';
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->If so, I tried it and it didn't work
Posted 2 years ago #
It can easily be done with php.
Here you need to have your actual path to images.
by the code it looks like all the images top1.gif top2.gif are in the directory just under the wp-content/themes/mytheme/ folder with other php files. Is that so?
Posted 2 years ago #
yes!
Posted 2 years ago #
you forgot to close the image tag <img src="" alt="" title="" />
Posted 2 years ago #
it is closed
FirstPart = '<img src="top';
LastPart = '.gif">';that's the way it's scripted
Posted 2 years ago #
It should be
LastPart = '.gif" />';
Posted 2 years ago #
yea, i did try that...
nothing happened :(
Posted 2 years ago #
try this
FirstPart = '<img src="<?php get_bloginfo('template_url'); ?>/top';
LastPart = '.gif" />';
Posted 2 years ago #
or you can do it in php : http://www.pearsonified.com/2006/10/simple_random_header_images_for_your_blog.php
if you want that on a single page, you can use
if ( is_page(page_id=4) )
{
/*Stuff */
}
Posted 2 years ago #
hmm... when i refresh the page, it looks like it's about to show the image but it doesn't. i don't know if that makes sense. maybe there's some other script that's coming into conflict with it...
i typed something inside the post with this:
<script type="text/javascript" src="<?php get_bloginfo('template_url'); ?>/randomtop.js"> </script>
<script type="text/javascript" language="JavaScript"><!--
printImage();
//--></script>I could see the text but not the image
Posted 2 years ago #
share the URL
Posted 2 years ago #
Yes, share the url.
I'm also curious why you aren't just writing this in PHP? If that is the sum of your javascript, I don't see the need for the javascript.
Posted 2 years ago #
how do i share the url?
I'm going to try ashfame's suggestion...although I'm not sure I understand the php code completely and where to put it. the site doesn't tell you.
Posted 2 years ago #
how do i share the url?
You can't. Sorry. You said you were using an offline server.
The PHP equivalent would be extremely simple.
$numberofimages = 10;
echo '<img src="'.get_bloginfo('template_url').'/top'.rand(1,$numberofimages).'.gif" />';This will display a random image between top1.gif and top10.gif every tiem the page loads, just like your javascript does.
Posted 2 years ago #
where do i put that code?
Posted 2 years ago #
Put the code wherever you want the images to show up. The only catch is that it needs to go inside PHP tags-- <?php // the php image code ?>. With PHP you can drop in and out of html using those tags. Inside the tags code will execute as PHP. Outside the tags code will execute as ordinary html. So if you find a spot inside existing PHP tags you don't need to add them, but if you want to insert the code in a spot that is outside existing php tags, you need to add the tags yourself. It really isn't conceptually much different from wrapping a javascript in a <script> tag. Based on your previous code posting, you'd replace this:
<script type="text/javascript" language="JavaScript"><!--
printImage();
//--></script>with this:
<?php
$numberofimages = 10;
echo '<img src="'.get_bloginfo('template_url').'/top'.rand(1,$numberofimages).'.gif" />';
?>
Posted 2 years ago #
this is what it shows me when i go to view the page:
'; ?>
Posted 2 years ago #
It works when I paste it in. You've a minor syntax error somewhere. Paste image code and about five lines above and below it. I think you probably have mismatched opening/closing PHP tags.
Posted 2 years ago #
above and below what?
Posted 2 years ago #
Above and below the part you added-- the part that is giving the error.
Posted 2 years ago #
nop, nothing.. didn't work
i appreciate your help.
can i see where you're testing it?
Posted 2 years ago #
What didn't work? I asked you to post the code. You didn't. I can't sort out the syntax error if I can't see your code.
You can't really see where I'm testing it because its on a local development server but here is the complete template file I'm using, if it helps.
<?php
/*
Template Name: cat5
*/
get_header(); ?>
<div class="subpanel">hi</div>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
$numberofimages = 10;
echo '<img src="'.get_bloginfo('template_url').'/top'.rand(1,$numberofimages).'.gif" />'; ?>
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
Posted 2 years ago #
ohhh...sorry i didn't understand what you were saying.
you're adding the the code directly into the page file.
i'm adding it inside an actual post, on the wordpress admin, under add new page.
i want it only on one page, not all pages...
Posted 2 years ago #
Okay. I see the problem. I didn't realize you were talking about pasting this into the editor. PHP won't execute if pasted into a post, a page, or a text widget (maybe other places as well), though you can use PHPExec to change that.
i want it only on one page, not all pages...
I understand. You can select which template file that WP uses on a page by page basis. For example:
1) Take the code I gave you and create file named cat5.php in your template directory.
2) Go to wp-admin->Pages->Add New and create a page selecting cat5 from the menu on the right under 'Template'. Let's say you give this page the title 'My New Page'.
Now, the page titled 'My New Page' is the only page that will use the cat5 template, although you could assign the template to other pages later if you want. See how that works? That is what I thought you were trying to do.
Posted 2 years ago #
omg it worked (duh), thanks so much!!
i installed phpexec and then added:
<?php
$numberofimages = 10;
echo '<img src="'.get_bloginfo('template_url').'/top'.rand(1,$numberofimages).'.gif" />';
?>inside the post and it worked! thanks again!
^_^
This topic has been closed to new replies.
