Wordpress and Jquery slide

Question

I am integrating a Jquery slider inside of wordpress here is the demo of the slider.

I can see the div that is their but for some reason it is not showing up. View the working site here

Now my problem is that this code:

<script type="text/javascript">
var _siteRoot='index.php',_root='index.php';</script>
  <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
  <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scripts.js"></script>

represents and index.html, but in wordpress I enabled permalinks. Any clue what would be the _siteRoot is?

here is the complete code

HEADER

<script type="text/javascript">
var _siteRoot='index.php',_root='index.php';</script>
  <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
  <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scripts.js"></script>

Here are the images:

<div id="slide-holder">
<div id="slide-runner">
    <a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>
    <a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>
    <a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>
    <a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>
    <a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>
    <a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>
    <a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a> 
    <div id="slide-controls">
     <p id="slide-client" class="text"><strong>post: </strong><span></span></p>
     <p id="slide-desc" class="text"></p>
     <p id="slide-nav"></p>
    </div>
</div>

    <!--content featured gallery here -->
   </div>

And the footer

<script type="text/javascript">
    if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1"},{"id":"slide-img-2"},{"id":"slide-img-3"},{"id":"slide-img-4"},{"id":"slide-img-5"},{"id":"slide-img-6"},{"id":"slide-img-7"},{"id":"slide-img-8"}];
   </script>

Answer 1

When you're sticking WP vars / constants in javascript, I have the best success adding a javascscript in the top of my theme's header.php with some global vars.

Your particular settings could probably be done with:

var _siteRoot='<?php bloginfo('url'); ?>',
var _root='<?php bloginfo('url'); ?>';