| | ||||||||
| |||||||||
 |
03-08-2013, 07:53 PM
| #1 |
| Warrior Member War Room Member Join Date: Jan 2013
Posts: 16
Thanks: 4
Thanked 1 Time in 1 Post
|  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> Code: <script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#carouselcontainer').cycle({
fx: 'fade',
speed: 'slow',
timeout: 6000,
pause:2
});
})
</script> Please help me figure this out! |
|  |
|
03-08-2013, 07:56 PM
| #2 |
| Digital Carpenter War Room Member  Join Date: Aug 2012 Location: Pennsylvania
Posts: 855
Thanks: 170
Thanked 209 Times in 174 Posts
| 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> |
| | |
| |
|
03-08-2013, 08:06 PM
| #3 | |
| Warrior Member War Room Member Join Date: Jan 2013
Posts: 16
Thanks: 4
Thanked 1 Time in 1 Post
| Re: Please Help! Quote:
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? | |
|
| |
|
03-08-2013, 08:07 PM
| #4 |
| Warrior Member War Room Member Join Date: Jan 2013
Posts: 16
Thanks: 4
Thanked 1 Time in 1 Post
| 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.
|
|
| |
|
03-08-2013, 08:20 PM
| #5 |
| Warrior Member War Room Member Join Date: Jan 2013
Posts: 16
Thanks: 4
Thanked 1 Time in 1 Post
| 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?
|
|
| |
|
03-08-2013, 09:09 PM
| #6 |
| Digital Carpenter War Room Member Join Date: Aug 2012 Location: Pennsylvania
Posts: 855
Thanks: 170
Thanked 209 Times in 174 Posts
| 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> |
| | |
|
| |
|
03-08-2013, 09:47 PM
| #7 | |
| Warrior Member War Room Member Join Date: Jan 2013
Posts: 16
Thanks: 4
Thanked 1 Time in 1 Post
| Re: Please Help! Quote:
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> | |
|
| |
 |
|
| Bookmarks |
| Tags |
| jquery, wordpress |
| Thread Tools | |
| |
 |
