Forums

cre8tive1

Hi all,

I've been watching the video podcasts here to learn CSS/WordPress. I've decided to try to create a WordPress site while following the podcasts. Episode #56 "Intregrating FoxyCart and WordPress" features the website http://www.JeffCampana.com.

I really like the sliding image gallery featured in the sidebar and feel that it's something I would like to use on client websites.

I've tried to recreate this on my testing site: http://rmss.fabianross.com.

As you can see, it's not working. I'm not super proficient with JS or JQuery. I'm wondering if someone can help me troubleshoot the problem. Essentially, I can't find out the JQuery script is called or activated. I'm guessing that's the part I'm missing.

This is what I've done thus far.

In header.php I added:

<script type='text/javascript' src='http://rmss.fabianross.com/wp-includes/js/jquery/jquery.js'></script>
		<script type='text/javascript'>
		/* <![CDATA[ */
		var shutterSettings = {
		msgLoading: \"L O A D I N G\",
		msgClose: \"Click to Close\",
		imageCount: \"1\"
		};
		/* ]]> */
		</script>

		<script type=\"text/javascript\" src=\"http://rmss.fabianross.com/wp-content/themes/rmss/js/teaser.js\"></script>

In sidebar.php I added:

<div id=\"sidebar\">
	 <div id=\"teaser\">
    
        <div id=\"slider\">
            <img src=\"/sidebarslides/1.jpg\" alt=\"\" />
            <img src=\"/sidebarslides/2.jpg\" alt=\"\" />
            <img src=\"/sidebarslides/3.jpg\" alt=\"\" />
            <img src=\"/sidebarslides/4.jpg\" alt=\"\" />
            <img src=\"/sidebarslides/5.jpg\" alt=\"\" />
        </div>
       <div class=\"clear\"></div>
        
        <div id=\"slider-nav\">
            <a href=\"#\" class=\"dot dot1 active\"> </a>
            <a href=\"#\" class=\"dot dot2\"> </a>
            <a href=\"#\" class=\"dot dot3\"> </a>
            <a href=\"#\" class=\"dot dot4\"> </a>
            <a href=\"#\" class=\"dot dot5\"> </a>
           <a class=\"gallery-link\" href=\"/photo-archive\">View Photo Archive</a>
        </div>
    
    </div>
</div>

I added the JQuery files as can be seen here: http://rmss.fabianross.com/wp-includes/jquery/jquery.js

I added the custom JS file here: http://rmss.fabianross.com/wp-content/themes/rmss/js/teaser.js

My style.css file is here: http://rmss.fabianross.com/wp-content/themes/rmss/js/teaser.js

Any input is greatly appreciated.

apostrophe

Add this to your stylesheet:

#teaser {
overflow:hidden;
}

cre8tive1

Thanks Apostrophe. I had just figured that out and was coming to update my post.

Ciao,

jr

treehouse : what would you like to learn today?

Forums

Need help with JQuery sliding image gallery