Jump to content

"Let’s create a simple jQuery plugin"


justlukeyou

Recommended Posts

Hi,

 

I found this amazing product slider which was simple to set up. Until it came to the Javascript part "Let’s create a simple jQuery plugin"

 

How to Create a Simple Multi-Item Slider | Codrops

 

I have absolutely no idea what Im supposed to do with this part. I download the source files and uploaded the javascript files to my home folder but that no affect.

 

Can anyone advice what I should do with the javascript code to get that to work?

Link to comment
Share on other sites

jQuery is a javascript library.  You "install" it by adding a javascript script tag on your page(s).  You can grab the latest version off jquery.com and host it yourself, or as an alternative, you can point to the one hosted by google, MaxCDN, etc..

What do you think is the best option?

 

There seems to be many different options to download.

Link to comment
Share on other sites

If you just want to get it working, then just load up the demo page, view the source, and look at what needs to be done. It's about as simple as anyone could make it.

 

If you want to actually know more about what the JS is doing and how the jquery plugins work, seek out some additional tutorials about how to create jquery plugins.

Link to comment
Share on other sites

As kicken said, as a guide, right-click and view the source on the demo page.  You can see all of the html, css and javascript.  You can see that they point to google's hosted jquery library.  Then they put the slider code in a separate js file, which is a good practice. Then there's one line of javascript code after the 2 script includes, which is probably the trigger to load up and start running the slider.  Just look at the source of the demo page. 

Link to comment
Share on other sites

As kicken said, as a guide, right-click and view the source on the demo page.  You can see all of the html, css and javascript.  You can see that they point to google's hosted jquery library.  Then they put the slider code in a separate js file, which is a good practice. Then there's one line of javascript code after the 2 script includes, which is probably the trigger to load up and start running the slider.  Just look at the source of the demo page.

 

Hi,

 

I copied the code from the source page but it brings with it an advert which obviously I dont want.

Link to comment
Share on other sites

come on man, use your brain.  Most of the URLs in the script includes, css links and img src's are relative.  You need to change them to point to your own hosted stuff. Did you upload the scripts and images and stuff to your own server?

I uploaded this script /modernizr.custom.63321.js and /query.catslider.js but they dont appear to have any impact.

Edited by justlukeyou
Link to comment
Share on other sites

okay, the page you linked..had a bunch of javascript on it..that javascript is the plugin, the code for the slider.  If you view the source of the demo, and then view the source of that js/jquery.catslider.js script include, you can see that it's the same code they showed you to add to the page.  They just put it into a file and included the file on the page, for convenience.  You need to save that javascript to a file and upload it to your server, and you need to change that script include to point to wherever you uploaded the file to.  The demo has the file in a js subfolder, so you can create a subfolder on your server and put it there, or you can put the js file in the same directory as your page and then remove that part of the path in the script include.  Do you understand how pathing works? Pathing isn't even javascript specific.  Alternatively, you can just c/p the catslider.js code directly on your page (somewhere underneath the jquery script include - making sure it's wrapped in script tags). But most people put code in a separate js file because it's easier to organize and update stuff.  

 

 Also, if you just blindly copy/pasted their source, then you probably will need to give a shit about the images, seeing as how this script has to do with images and probably won't work, or work funky or something, if the images don't exist.. 

Link to comment
Share on other sites

 

I viewed the code and compared it against the demo and it appears to be the same. I have uploaded the images.

 

However when insert www.website.com/products/query.catslider.js into the address bar on my broweser is says that no file is found but it should be the same as a standard image file location.

 

 

** snipped - not relevant ~ .josh **
Link to comment
Share on other sites

okay first off, i'm not sure why you posted your GA code, as that's not relevant to this in any way.. but anyways, if the browser says the file is not found, then you obviously didn't upload it to that location on your server.  You need to make sure the script include on your page points to the location on your server where you uploaded it. 

Link to comment
Share on other sites

okay first off, i'm not sure why you posted your GA code, as that's not relevant to this in any way.. but anyways, if the browser says the file is not found, then you obviously didn't upload it to that location on your server.  You need to make sure the script include on your page points to the location on your server where you uploaded it.

Hi,

 

I got the javascript file at the located now and removed the GA code - that was from the demo.

 

Still cant get it to work though. Very frustrating.

Link to comment
Share on other sites

Well uh, I don't really know what to tell you at this point.. did you try giving a shit about the images? As mentioned, seeing as how this script revolves around the images, maybe it's not working because you aren't pointing to valid images?  If you are for realsies doing it exactly as they did on the demo, then maybe you have something else on the page that's conflicting with it.  I don't really know how else I can help without seeing your page though.  

Link to comment
Share on other sites

Hi,

 

I have tried to slim it down the bare minimum. The two links to the .js files work and I have uploaded the image but there is no functionality on the page.

 

<head>
	<link rel="stylesheet" href="/stylesheet.css" type="text/css" />
	<script src="/products/modernizr.custom.63321.js"></script>
	</head>
	<body>
		<div class="container">	
			<div class="main">
				<div id="mi-slider" class="mi-slider">
					<ul>
						<li><a href="#"><img src="/images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
						<li><a href="#"><img src="/images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
						<li><a href="#"><img src="/images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
						<li><a href="#"><img src="/images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
					</ul>
					<ul>
						<li><a href="#"><img src="/images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
						<li><a href="#"><img src="/images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
						<li><a href="#"><img src="/images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
						<li><a href="#"><img src="/images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
					</ul>
					<ul>
						<li><a href="#"><img src="/images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
						<li><a href="#"><img src="/images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
						<li><a href="#"><img src="/images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
						<li><a href="#"><img src="/images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
					</ul>
					<ul>
						<li><a href="#"><img src="/images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
						<li><a href="#"><img src="/images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
						<li><a href="#"><img src="/images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
						<li><a href="#"><img src="/images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
					</ul>
					<nav>
						<a href="#">Shoes</a>
						<a href="#">Accessories</a>
						<a href="#">Watches</a>
						<a href="#">Bags</a>
					</nav>
				</div>
			</div>
		</div><!-- /container -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script src="/products/jquery.catslider.js"></script>
		<script>
			$(function() {

				$( '#mi-slider' ).catslider();

			});
		</script>
	</body>
</html>
Link to comment
Share on other sites

Well, I just downloaded the source and put it on my own server, and it works just fine.  So you're doing something wrong on your end. Did you upload modernizr.custom.63321.js to your server? Did you upload the css files to your server?  Open your browser's development tools or firebug tab or whatever it is you use and look at the network/resources...do you see any 404 responses?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.