I wouldn't say im using jquery to place content into the page, I basically just have a unordered list of images, the sexycycle.js is just supposed to make them into a slideshow. I tested in an html file, worked fine, added the same thing to my php based site on my apache server and no go.
The html for the images is like this...
HTML Code:
<div class="sexyCycle" id="box4">
<div class="sexyCycle-wrap">
<ul class="sexyCycle-content">
<li><img width="320" height="480" src="http://www.suprb.com/apps/sexyCycle/img/1.png"></li>
<li><img width="320" height="480" src="http://www.suprb.com/apps/sexyCycle/img/2.png"></li>
<li><img width="320" height="480" src="http://www.suprb.com/apps/sexyCycle/img/3.png"></li>
<li><img width="320" height="480" src="http://www.suprb.com/apps/sexyCycle/img/4.png"></li>
</ul>
</div>
</div>
Those obviously are the images. The javascript files are placed in the header, with the core jquery 1.4, jquery.sexycycle, and an jquery.easing, which smooths the transitions.
I also have this code in the header which activates
HTML Code:
<script type="text/javascript">
// Initialize Home Feature Slideshow
$(document).ready(function() {
$("#box4").sexyCycle({
speed: 500,
interval: 4000
});
});
</script>
And this tiny bit of CSS:
HTML Code:
ul.sexyCycle-content { list-style: none; margin: 0; padding: 0; width: 99999999; position: absolute }
li.sexyCycle-content { margin: 0; padding: 0; }
.sexyCycle { position: relative; overflow: hidden; }
.sexyCycle-wrap { position: relative; width: 99999px; }
.sexyCycle-content { width: 99999; position: absolute; overflow: hidden; }
#box4 {
height:480px;
}
Any ideas?