3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

Please help - JQuery and Wordpress

by AtikM
2 replies
  • WEB DESIGN
    • |
Hi,
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 KingRoyal
    Do you have two instances of JQ or Javascript running on your homepage?
    {{ DiscussionBoard.errors[7832010].message }}
    • Profile picture of the author AtikM
      Originally Posted by KingMighty View Post

      Do you have two instances of JQ or Javascript running on your homepage?
      Hi,

      I don't think that I do. I've disabled any similar plugins.
      {{ DiscussionBoard.errors[7832556].message }}

Trending Topics