7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Please Help!

by AtikM
6 replies
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!
#jquery #wordpress
  • Profile picture of the author FirstSocialApps
    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>
    Signature
    Create Facebook deals, sweepstakes, contests, polls, custom pages and more without a monthly fee!

    Generate thousands of leads in any niche in under 60 seconds!
    {{ DiscussionBoard.errors[7832613].message }}
    • Profile picture of the author AtikM
      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?
      {{ DiscussionBoard.errors[7832655].message }}
  • Profile picture of the author AtikM
    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.
    {{ DiscussionBoard.errors[7832657].message }}
  • Profile picture of the author AtikM
    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?
    {{ DiscussionBoard.errors[7832708].message }}
  • Profile picture of the author FirstSocialApps
    are you loading JQUERY in your header?

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    Signature
    Create Facebook deals, sweepstakes, contests, polls, custom pages and more without a monthly fee!

    Generate thousands of leads in any niche in under 60 seconds!
    {{ DiscussionBoard.errors[7832850].message }}
    • Profile picture of the author AtikM
      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).
      {{ DiscussionBoard.errors[7832944].message }}

Trending Topics