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>
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: