By bookwalla on

I was able to implement Easy Slider 1.5 in a simple html site, but I'm having trouble implementing it in Drupal 6.

I did the following:

1. I put easySlider1.5.js in sites/all/themes/mysite/js

2. I put the eastslider1.5.css file in sites/all/themes/mysite

I then declared both of these files in my mysite.info file.

After that I pasted the following code into the body section of my front page in Drupal:

<div id="slidercontainer">

	<div id="sliderheader" class="rounded">
		<h1>My Templates</h1>
	</div>

	<div id="slidercontent">
	
		<div id="slider">
			<ul>				
				<li><a href="images/1large.jpg"><img src="images/1.jpg" /></a></li>
				<li><a href="images/02.jpg"><img src="images/02.jpg" /></a></li>
				<li><a href="images/03.jpg"><img src="images/03.jpg" /></a></li>
				<li><a href="images/04.jpg"><img src="images/04.jpg" /></a></li>
				<li><a href="images/05.jpg"><img src="images/05.jpg" /></a></li>			
			</ul>


		</div><!-- END OF SLIDER-->
			
	    </div><!-- END OF SLIDERCONTENT-->

</div><!-- END OF SLIDERCONTAINER-->

Lastly, I hit SAVE in Drupal.

I SEE the slider header <h1>My Templates </h1>. But the images in the slider and Previous and Next buttons are NOT visible. In other words, the slider functionality is not working.

Among other things, I suspect this has something to do with how the images are getting loaded into Drupal. Please help.

Wrapped HTML in code tags & Moved thread per forum guidelines by VM

⋅ Categories: Drupal 6.x

Comments

vm’s picture

vm commented

did you clear the theme registry to have your .info file reread by core so that the changes were picked up?

was the js printing in head?

As a sidenote there are quite a few slider/rotator/slideshow type modules that can be used as they are already drupal modules and can be made to be dynamic by pulling from content in multiple ways with the views.module

also of note: please do not duplicate your threads. The duplicate has been deleted.

bookwalla’s picture

bookwalla commented

yes the js files are all printing in the head when view source in firefox.

How do I clear the theme registry?

I created another post because I had originally posted to Theme Development forum, and I didn't see it there.

Therefore, I created another post. i didn't realize that this subject should be addressed in the Post Installation forum.

bookwalla’s picture

bookwalla commented

Please help any help regarding how to implement EasySlider in Drupal will be appreciated.

nevets’s picture

nevets commented

There is the module easySlider.

Also, in the above post, I see the javascript that looks like

$(document).ready(function(){	
	$("#slider").easySlider();
});
bookwalla’s picture

bookwalla commented

thank you for pointing me to the EasySlider module. However, I noticed that this module is under developement for 6.x-1.x.

So I'm a bit scared to download and use a module that also has a red X next to it. So is it safe to use it while it is under developement for Drupal 6 and up?

Also, is it possible to use any jquery slider plugin and somehow convert it to a Drupal module? How difficult is that?

Thanks,

bookwalla’s picture

bookwalla commented

I have resolved this issue. Thank you, guys :)

divrom’s picture

divrom commented

It would be helpful for other users if you said *how* you resolved the issue.

dalbeyond’s picture

dalbeyond commented

excuse me, but How do you resolve this issue it could very helfull to post it.

thank you

zhongguo999999’s picture

zhongguo999999 commented

I want to know How do you resolve this issue.
I want to know the way you do it.
Thank you.

iopsychguy’s picture

iopsychguy commented

I was able to get easyslider to work with my template. Not sure if this will work for everyone, but this is what I did. I opened "easySlider1.5.js" and copied and pasted the code into the "script.css" in my template folder.

Put this in my style.css/

* Easy Slider */

	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:696px;
		height:241px;
		overflow:hidden; 
		}
	span#prevBtn{}
	span#nextBtn{}					

/* // Easy Slider */

I then pasted this into the body of my page:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easy Slider jQuery Plugin Demo</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	
		$("#slider").easySlider();
	});	
</script>
<meta name="description" content="Simple easy-to-use jQuery plugin for sliding images and content">
</meta>

</head>
<body>
	
	<div id="slider">
		<ul>				
			<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
			<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
			<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>

			<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
			<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>			
		</ul>
	</div>
		
</body>
</html>
zhongguo999999’s picture

zhongguo999999 commented

Yes, it work for me too, but the jquery.js shouldn't be added into the body of the page, because the drupal has added it already. Otherwise the tabs.js will have error.