Posted by justsayno on January 23, 2013 at 12:35am
Hi,
I am trying to implement the Jquery cycle plugin in the front page of my website. I have been using the documentation on their site (tutorial) and can get their example to work in a simple html document like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
</style>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script src="jquery.cycle.all.js"></script>
<div id="s1" class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>
<script>
$('#s1').cycle('fade');
</script>
</body>
</html>But when I put the exact same code into the template file, then I add the js files like this:
if(drupal_is_front_page()) {
drupal_add_js('sites/all/themes/melodicpassenger/js/customSlider.js');
drupal_add_js('sites/all/themes/melodicpassenger/js/jquery.cycle.all.js');
}And use the same code as above but put the images in page--front.tpl and the css in fresh.css (using a zen sub-theme) and the code in the file customSlider.js. It appears I get nothing happening from it though. The images are just three images on top of each other going down the page.
Any help would be great. Thanks
Comments
SOLVED
Went away, came back, solved it