adding javascript into an individual page
-
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.
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…
anyone has any idea???
I really need this…
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”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
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 imagestop1.gif top2.gifare in the directory just under the wp-content/themes/mytheme/ folder with other php files. Is that so?yes!
you forgot to close the image tag
<img src="" alt="" title="" />it is closed
FirstPart = '<img src="top'; LastPart = '.gif">';that’s the way it’s scripted
It should be
LastPart = '.gif" />';yea, i did try that…
nothing happened 🙁
try this
FirstPart = '<img src="<?php get_bloginfo('template_url'); ?>/top'; LastPart = '.gif" />';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 */ }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
share the URL
The topic ‘adding javascript into an individual page’ is closed to new replies.