Hi,

I am trying to convert my webiste to wordpress theme. I'v followed some tutorial on the web. They are good but basic.

The header of my website is dynamic slideshow of some images. The slideshow is made able using javascript and jQuery(found it here "http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm"). It works perfectly on my website. I tryed to add this dynamic slideshow to my wordpress theme but there seems to be a problem by finding the images, well I think this is the problem. l think I've tried everything to solve this issue but with no luck.

this is how I include thejquery file:

<?php wp_enqueue_script('jquery'); ?>

and after wp_head() I include the follwoing javascript files

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fadeslideshow.js"></script>

in the slideShow.js the images are referenced as follows:

imagearray: [
    ["/img/banner_2.jpg"],
    ["/img/banner_animation1.jpg"],
    ["/img/banner_animation2.jpg"],     
    ["/img/banner_animation3.jpg"]
]

Please help.

Thank you

3 answers

danwellman 5600
2
points
This was chosen as the best answer

This is a common problem when building WP themes for the first time, because the root of the theme folder (where the CSS and WP files live) is not the same as the root of the site.

When FTPing to your site yo uprobably have a bunch of folders at the top level and one of them should be www or publichtml - this folder is the root of your site so directly inside this should be your img folder, with the banner images in it.

What may have happened is that you have put your img folder in www/wpcontent/themes/nameofyourtheme or some similar WP directory?

You can either move the img folder to the correct location, or correct the links in your JS file to point to the correct location. The first slash in your path says 'start at the root of the site' so if you don't move the img folder the ref may need to be something like:

"/wpcontent/themes/*themenamehere*/img/banner_2.jpg"
Answered over 6 years ago by danwellman
  • thank you very much. The ref to the images were wrong so I changed it to what you suggested..I learned a new thing from you...many thanks again mnish over 6 years ago
2
points

Try making the call to the extra script with wp_enqueue_script and make sure that wp_head is after the wp_enqueue calls to the script...

e.g.

    <?php wp_enqueue_script('jquery');  wp_enqueue_script( 'fadeslideshow', get_bloginfo( 'template_url' ) . '/js/fadeslideshow.js' , array( 'jquery' ) );  ?>

    <?php wp_head(); ?>
</head>
Answered over 6 years ago by Tony Crockford
  • Thank you for your answer. But this was not the problem, The problem was the references to the images. But your suggestion to write things like this is the right way. Thank you mnish over 6 years ago
0
points

Try adding a relative path to your images with ../:

imagearray: [
    ["../img/banner_2.jpg"],
    ["../img/banner_animation1.jpg"],
    ["../img/banner_animation2.jpg"],     
    ["../img/banner_animation3.jpg"]
]

This tells your script it needs to step up one directory and then go back down to the beginning directory.

Answered over 6 years ago by VagrantRadio
  • thank you. danwellman gave me the right answer. mnish over 6 years ago