justlukeyou Posted August 13, 2013 Share Posted August 13, 2013 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? Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/ Share on other sites More sharing options...
Irate Posted August 13, 2013 Share Posted August 13, 2013 Do you have jQuery installed on your machine? Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444847 Share on other sites More sharing options...
justlukeyou Posted August 13, 2013 Author Share Posted August 13, 2013 Do you have jQuery installed on your machine? No. Is this something I put on my server so anyone in the world can view the product display? Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444849 Share on other sites More sharing options...
kicken Posted August 13, 2013 Share Posted August 13, 2013 If you want help, it might be wise to actually post the code, or a URL to the code which you are wondering about. As it stands, I have no f*ing idea what you are talking about, nor do I have any desire to try and find out on my own. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444850 Share on other sites More sharing options...
justlukeyou Posted August 13, 2013 Author Share Posted August 13, 2013 Yes sorry, would help... http://tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider/ Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444854 Share on other sites More sharing options...
.josh Posted August 13, 2013 Share Posted August 13, 2013 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.. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444855 Share on other sites More sharing options...
justlukeyou Posted August 13, 2013 Author Share Posted August 13, 2013 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. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444858 Share on other sites More sharing options...
kicken Posted August 13, 2013 Share Posted August 13, 2013 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. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444859 Share on other sites More sharing options...
justlukeyou Posted August 13, 2013 Author Share Posted August 13, 2013 Hi, I got the HTML and CSS working no problem. But I dont know how to get the Javascript working. I haven't used Javascipt before. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444862 Share on other sites More sharing options...
.josh Posted August 13, 2013 Share Posted August 13, 2013 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. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444866 Share on other sites More sharing options...
justlukeyou Posted August 13, 2013 Author Share Posted August 13, 2013 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. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444869 Share on other sites More sharing options...
justlukeyou Posted August 13, 2013 Author Share Posted August 13, 2013 Hi, I removed the code for the ads but result has none of the functionality that the demo has. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444874 Share on other sites More sharing options...
.josh Posted August 13, 2013 Share Posted August 13, 2013 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? Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444876 Share on other sites More sharing options...
justlukeyou Posted August 13, 2013 Author Share Posted August 13, 2013 (edited) 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 August 13, 2013 by justlukeyou Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444878 Share on other sites More sharing options...
.josh Posted August 13, 2013 Share Posted August 13, 2013 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.. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444879 Share on other sites More sharing options...
justlukeyou Posted August 13, 2013 Author Share Posted August 13, 2013 Hi, I set the path first to my homepage directory / and then to my products directory /js/jquery.catslider.js and stil no impact. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444883 Share on other sites More sharing options...
.josh Posted August 13, 2013 Share Posted August 13, 2013 view the source on your own page. rightclick on your script include and copy the url. paste it into your browser. Does the code show up, or do you get a 404 (file not found) error? Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444885 Share on other sites More sharing options...
justlukeyou Posted August 13, 2013 Author Share Posted August 13, 2013 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 ** Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444888 Share on other sites More sharing options...
.josh Posted August 13, 2013 Share Posted August 13, 2013 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. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444891 Share on other sites More sharing options...
justlukeyou Posted August 13, 2013 Author Share Posted August 13, 2013 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. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444895 Share on other sites More sharing options...
.josh Posted August 13, 2013 Share Posted August 13, 2013 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. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444897 Share on other sites More sharing options...
justlukeyou Posted August 13, 2013 Author Share Posted August 13, 2013 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> Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444898 Share on other sites More sharing options...
.josh Posted August 13, 2013 Share Posted August 13, 2013 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? Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444899 Share on other sites More sharing options...
justlukeyou Posted August 13, 2013 Author Share Posted August 13, 2013 Bloody hell, I previously copied any posted the CSS but uploaded the original CSS and still no impact. Do you have the code working I could look at? I cant see what Im doing wrong. Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444900 Share on other sites More sharing options...
justlukeyou Posted August 13, 2013 Author Share Posted August 13, 2013 (edited) There is one thing I dont understand. These two divs aren't in the CSS code but are in the HTML source code for the demo. <div class="container"> <div class="main"> Edited August 13, 2013 by justlukeyou Quote Link to comment https://forums.phpfreaks.com/topic/281139-let%E2%80%99s-create-a-simple-jquery-plugin/#findComment-1444901 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.