Dummys guide to using jquery

J / 2008-10-20 14:11:31   

Hi guys,
Just wondering if someone could tell me how I go about using certain jquery plugins.
The mains ones i'm interested in are jquery.cycle.all.js and the one which allows drop down menus.
If someone would kindly break down what I need to do to install the jquery.cycle.all.js it would be most appreciated.
Thanks, and apologies if this has been asked a thousand times, I did have a look but it seems like everyone knows what they're doing :(

arsondpi / 2008-10-20 14:42:24   

This has demos and instructions...
Generally when using jquery plugins there are certain things to follow. Every plugin comes with it's own instructions and things vary...

1 "call" jquery and the plugin within the head of your html file
2 define a script for a html tag (a div or a span for example) that you want the plugin to "work" for.
3 include style sheet values and markup in your css file
4 include your markup in your body of your html file

for example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>...

<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" /> [call your css]
<script type="text/javascript" src="../jquery-1.2.6.js"></script> call jquery
<script type="text/javascript" src="jquery.cycle.all.js?v2.11"></script> call plugin
<script type="text/javascript"> define for which id/class etc the plugin will work for and give it options (if any)
$('#s3').cycle({
fx: 'fade',
speed: 2500
});
</script>
</head>
<body>
<div id="s3" class="pics"> include the needed id/class etc for the plugin to work on the specific markup
    <img src="image1.jpg" width="200" height="200" /> 
    <img src="image2.jpg" width="200" height="200" /> 
    <img src="image3.jpg" width="200" height="200" /> 
</div> 

I know it seems rather complicated but it's really easy once you get the hang of it... The best thing to do is start playing...

As for the accordion menu you're after you better make a search first - there's lots of topics for this in the forum.

J / 2008-10-20 15:28:59   

Thanks arsondi, really appreciate that.
So just to clarify, when I call the css, jquery, and plugin etc. do I have to edit the raw file or can these just be added in the content management part when you edit a section through your login etc.

J / 2008-10-20 15:30:23   

And also which directory should jquery plugins be installed too?

Vaska A / 2008-10-20 16:42:19   

That's a tough one...I think they should go to the global js folder (inside /ndxz-studio/site/js). But, the actual plugin that makes it work for Indexhibit should go into the 'plugin' folder. In between...there could be exceptions for various things.

Sorry, not very clear...you should do what works for you. Feel good that you are tinkering and learning and who really cares how to do it right the first time...just do.

;)

arsondpi / 2008-10-20 17:37:02   

I can only compare it to a closet! It's up to you where to put the socks, the t-shirts and the trousers, but it's best if you can organize them the way it suits you, in sets.

Vaska A / 2008-10-20 17:48:28   

I love Jquery. Resig once answered my email even...about all of y'all. Very cool guy. There are days when I wish I could do something as cool as Jquery...

But, I'll settle for Indexhibit. It's not bad.

Truth be told, we use some of the donations we receive to donate to other projects...including Jquery. We try to do our part as well supporting open source.

;)

unttld / 2008-10-20 19:16:01   

Jquery is fantastic. Resig is a cool guy too. I met him when he was in Toronto for a web conference. Slightly after he did the Processing.js (which is amazing, so is Processing). He's such an easy to talk to guy.

I wish I could do something as cool as Jquery or Indexhibit.

;)

J / 2008-10-20 20:57:13   

I can't disagree, it seems amazing i just wish there were more in-depth tutorials for the folk who don't have a clue when it comes the coding side of things, especially when using it within indexhibit :(
Still don't really have a clue how to implement the cycleall plugin.

J / 2008-10-20 21:07:16   

I am picking it up slightly from looking at source codes but what I need to know is where do i enter the code, do i have to edit the actual file manually or can it just be implented using the edit page feature within the indexhibit cp?

unttld / 2008-10-21 03:12:31   

of edit a copy of the index file. I'm sure you could add it via the built in editor. Don't quote me on that. My recommendation is editing the file.

J / 2008-10-21 03:28:17   

Yeah doesn't work in the built in editor, has to be done via the index.php file.
Wasn't sure which one it was as i'm new to indexhibit but it's the one inside the sample folder right?

J / 2008-10-21 03:33:28   

Oh and also you mentioned calling the .css for the jquery plugin?

There's no .css included with jquery.cycle.all.js

arsondpi / 2008-10-21 08:11:51   
Yeah doesn't work in the built in editor...
steps 1,2 and 3 have to be included in the index.php file but the html markup can be inserted in the build in editor. You just have to switch off Process HTML.
Note: once you include steps 1,2,3 in the index.php file all your pages are going to be downloading and running the scripts (index.php is the template on which every page is created/contructed on), which may mean a tiny slowdown in page speed... Somebody corrected me if I'm mistaken.
There's no .css included with jquery.cycle.all.js
...you may want to style your images. A border perhaps? Check the demo I typed about...

I didn't know what I was doing as well with jquery when I first started but I think that "if you don't break it to see how it it on the inside, you won't learn". In other words, don't put your toys in the plug, if you know what I mean...
:-D

J / 2008-10-21 14:30:19   

Thanks i'm getting there slowly. Thanks for the help guys, appreciate it.

wickermeets / 2009-04-06 06:09:11   

this is all helpful - I'm new to this as well and attempting to add captify to some images-
I've modified my sample theme's index.php and .css dropped the jq plugs into the site/js folder but no go.
I feel like it maybe a rookie mistake including the .js files? or a conflict with my existing rollover markup? donno.

If anyone has the urge to check out my code i would really appreciate it.
captify wip i'll keep tinkering.

Vaska A / 2009-04-06 07:07:21   

Now what's the problem here? Works for me...

wickermeets / 2009-04-06 13:06:01   

sry - messed up that link - heres the my jq page test

wickermeets / 2009-04-06 13:06:01   

sry - messed up that link - heres the my jq page test

wickermeets / 2009-04-07 14:27:57   

ok nvrmind- got it!

vincentp / 2010-08-23 12:15:34   

Hi everyone,

I have red many things about how to insert a slideshow in the main page ok my indexhibit site. But I'm still not able to do it works. Now I'm trying with the jquery.cycle.js and dispite of following your instructions, but only empty boxes appears...

Anyone can help me to fixe it? Here is my page:
patiodepomme
Thanks!

arsondpi / 2010-08-23 13:31:02   

Just check out your source code... I can't tell what you tried to do but the page seems messed up...

vincentp / 2010-08-23 13:54:59   

Well, the truth is that I don't know much about html. and I probably messed it up doing some copy/paste.. I've cleaned it a bit but I don't know how to contain the pictures in a unique container to create an automatic slideshow.

I keep investigate, thanks to advise me if there is a obvious solution!
patiodepomme

This thread has been closed, thank you.