Freelancer.com

Go Back   Warrior Forum - The #1 Internet Marketing Forum & Marketplace > Warrior Support Forums > Programming
Register Blogs Social Groups CalendarHelp Desk

Reply
LinkBack Thread Tools
Unread 8th March 2013, 08:53 PM   #1
Warrior Member
War Room Member
 
Join Date: 2013
Posts: 17
Thanks: 4
Thanked 2 Times in 2 Posts
Default Please Help!

Hi,

I have a problem regarding jQuery and Wordpress. I had originally posted this in the Web Design section, but I think it might be better suited here.

I'm running the Thesis theme on Wordpress and I'm trying to add a carousel/slideshow to my homepage like the one here: Kenny Hyder Marketing Consultant
I saw in their sourcecode that they use a plugin from here: JQuery Cycle Plugin - Download. I saved it to my comp and uploaded it to my root directory and I have no idea what to do next (or even if I've already messed up). The code used on that homepage for the carousel is

Code:
<div id="carouselcontainer">
        	<div class="carousel">
            	<img class="maincarousel" src="IMAGE1A" alt="ALTTEXT" />
                <div class="carouselright">
                	<div class="carouselrighttop">
                    	<img class="textcarousel" src="IMAGE1B" alt="ALTTEXT"/>
                    </div>
                    <div class="carouselrightbottom">
                    <p class="arrow"><a class="carouselcenter" href="LINK1">LINK1TEXT</a></p>
                    <p class="description">TEXT1</p>
                    </div>
                </div>
            </div>
			<div class="carousel">
            	<img class="maincarousel" src="IMAGE2A" alt="ALTTEXT" />
                <div class="carouselright">
                	<div class="carouselrighttop">
                    	<img class="textcarousel" src="IMAGE2B" alt="ALTTEXT"/>
                    </div>
                    <div class="carouselrightbottom">
                    <p class="arrow"><a class="carouselcenter" href="LINK2">LINK2TEXT</a></p>
                    <p class="description">TEXT2</p>
                    </div>
                </div>
            </div>
        	<div class="carousel">
            	<img class="maincarousel" src="IMAGE3A" alt="ALTTEXT" />
                <div class="carouselright">
                	<div class="carouselrighttop">
                    	<img class="textcarousel" src="IMAGE3B" alt="ALTTEXT"/>
                    </div>
                    <div class="carouselrightbottom">
                    <p class="arrow"><a class="carouselcenter" href="LINK3">LINK3TEXT</a></p>
                    <p class="description">TEXT3</p>
                    </div>
                </div>
            </div>
			<div class="carousel">
            	<img class="maincarousel" src=IMAGE4A" alt="ALTTEXT" />
                <div class="carouselright">
                	<div class="carouselrighttop">
                    	<img class="textcarousel" src="IMAGE4B" alt="ALTTEXT"/>
                    </div>
                    <div class="carouselrightbottom">
                    <p class="arrow"><a class="carouselcenter" href="LINK4">LINK4TEXT</a></p>
                    <p class="description">TEXT4</p>
                    </div>
                </div>
            </div>
        </div>
I know I need to add
Code:
<script type="text/javascript">
			jQuery(document).ready(function() {
				jQuery('#carouselcontainer').cycle({
				fx:     'fade',
				speed:  'slow',
				timeout: 6000,
				pause:2
				});
			})
		</script>
somewhere as well. I don't know where this stuff goes. I tried adding the long code to the custom.css file and the script under the Javascript section in the Thesis Design Options.

Please help me figure this out!
AtikM is offline   Reply With Quote
Unread 8th March 2013, 08:56 PM   #2
Social Apps Made Easy
War Room Member
 
FirstSocialApps's Avatar
 
Join Date: 2012
Location: Mooresville, NC
Posts: 914
Thanks: 231
Thanked 254 Times in 211 Posts
Default Re: Please Help!

You can actually put that anywhere in the templates HTML and it will work, header, footer, it doesn't matter.
However you will need to load JQUERY in your header first:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

FirstSocialApps is offline   Reply With Quote
Unread 8th March 2013, 09:06 PM   #3
Warrior Member
War Room Member
 
Join Date: 2013
Posts: 17
Thanks: 4
Thanked 2 Times in 2 Posts
Default Re: Please Help!

Quote:
Originally Posted by FirstSocialApps View Post
You can actually put that anywhere in the templates HTML and it will work, header, footer, it doesn't matter.
However you will need to load JQUERY in your header first:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
Wow, thanks a lot for your help!

So I'm having a hard time understanding Thesis in terms of where I can edit the header section, etc.. I'm thinking this has something to do with hooks, which is what I'm trying to look up at the moment. Do you happen to know where I can add HTML codes in Thesis? The only editables files I see in the theme are the custom.css and the custom_functions.php.

In the Appearance Editor, there's custom_template.php, but it says "DO NOT EDIT THIS FILE. Instead, use the thesis_hook_custom_template() hook to specify the contents of div#content_box. Be sure specify which page should receive which code by dividing your action using the is_page() conditional tag." in there, which is why I'm now trying to figure out hooks.

Any ideas?
AtikM is offline   Reply With Quote
Unread 8th March 2013, 09:07 PM   #4
Warrior Member
War Room Member
 
Join Date: 2013
Posts: 17
Thanks: 4
Thanked 2 Times in 2 Posts
Default Re: Please Help!

P.S. - I think I have the scripts in the right sections, so no problem with those. Just need to figure out where I can add the long HTML code from the OP.
AtikM is offline   Reply With Quote
Unread 8th March 2013, 09:20 PM   #5
Warrior Member
War Room Member
 
Join Date: 2013
Posts: 17
Thanks: 4
Thanked 2 Times in 2 Posts
Default Re: Please Help!

Ok, I got the HTML code in but the carousel isn't running now. Do I need to install some sort of plugin or add a separate code to allow jquery to run?
AtikM is offline   Reply With Quote
Unread 8th March 2013, 10:09 PM   #6
Social Apps Made Easy
War Room Member
 
FirstSocialApps's Avatar
 
Join Date: 2012
Location: Mooresville, NC
Posts: 914
Thanks: 231
Thanked 254 Times in 211 Posts
Default Re: Please Help!

are you loading JQUERY in your header?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

FirstSocialApps is offline   Reply With Quote
Unread 8th March 2013, 10:47 PM   #7
Warrior Member
War Room Member
 
Join Date: 2013
Posts: 17
Thanks: 4
Thanked 2 Times in 2 Posts
Default Re: Please Help!

Quote:
Originally Posted by FirstSocialApps View Post
are you loading JQUERY in your header?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
Yeah, I pasted that code in the header.

I uploaded the JS file to my root directory, and the code I have in my header is
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type='text/javascript' src='http://mydomain.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type="text/javascript">
			jQuery(document).ready(function() {
				jQuery('#carouselcontainer').cycle({
				fx:     'fade',
				speed:  'slow',
				timeout: 6000,
				pause:2
				});
			})
		</script>
Any idea what I'm doing wrong? The first image of the carousel is there; it's just not doing anything (fading onto the next image).
AtikM is offline   Reply With Quote
Reply

  Warrior Forum - The #1 Internet Marketing Forum & Marketplace > Warrior Support Forums > Programming

Bookmarks

Tags
jquery, wordpress

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




All times are GMT -6. The time now is 09:06 PM.