Anyone willing to help a newbie with jQuery?

[goosefishplayer]

Hey I'm going out on a limb here but I'm desperate. I'm working on a website for my family which uses Wordpress and the HV1 theme from www.horizontalwp.com. I know html and css pretty well but almost nothing about jquery.

Go ahead and visit the website, www.liamsonheim.com, to see what I'm talking about (I have temporarily disabled the password).

I want the content of the posts to appear when I slide to them (as the first post does) but instead they disappear. I have tried everything I can think of, including emailing the theme creator (no luck). How can I get all of the posts to function as the first one does?

Sorry Im sure this is simple. Also, what do you need to see (and what can I provide, since this is not my jquery?) Thanks for any help.

[JShor]

It wasn't so much a jQuery problem as it was a mathematical/logical issue. The count that was incremented that kept track of which thumbnail you were viewing was incremented before the toggle was triggered.

Also, the slideToggle was making images disappear before being toggled up, so it was a logical failure there too.

I changed it to slideDown if it is going to a previous thumbnail and I incremented the counter before the animation was triggered, and then decreased it again after the event was complete.

Here is the revised JavaScript code:

	<script type="text/javascript">
	
		//initialize
		s = 0;
		$("#pagination a").each(function(){
			if($(this).text() == "Prev"){
				previousl = $(this).attr("href");
			}
			if($(this).text() == "Next"){
				nextl = $(this).attr("href");
			}
		});
		
	$(document).ready(function(){
			//setup posts
			$(".postContent").each(function(){
				$(this).find(".image").appendTo($(this).parents(".post").find(".image"));				
			});
		});
		


	
		$(window).load(function(){
		
        	$("#cover").fadeOut(function(){
				$(".post:eq(0)").find(".postContent").slideToggle();
			});
			
		
		});
		
		//slide functions
		$("#nr").click(function(){
			if(s+1 < $(".post").length){
				next();
			}else{
				s = 0;
				next();
			}
		});
		$("#nl").click(function(){
			if(s > 0){
				prev();
			}else{
			}
		});
		function next(){
			$(".post:eq("+s+")").find(".postContent").slideToggle(function(){
				s++;
				$("#infinity").animate({
					"margin-left":"-"+s*700+"px"
				},function(){
					s--;
					$(".post:eq("+s+")").find(".postContent").slideToggle();
					s++;
				});
			});
		}
		function prev(){
			$(".post:eq("+s+")").find(".postContent").slideDown(function(){
				s--;
				$("#infinity").animate({
					"margin-left":"-"+s*700+"px"
				},function(){
					$(".post:eq("+s+")").find(".postContent").slideDown();
				});
			});
		}
		// Key Functions
		$(document).keydown(function(event) {
			//Left
			if(event.keyCode == 37){
				if(s > 0){
					prev();
				}else{
					window.location.href = previousl;
				}
			}
			//Right
			if(event.keyCode == 39){
if(s+1 < $(".post").length){
					next();
				}				
else{
					window.location.href = nextl;
				}
			}
		});
		
	</script>

I tested it and it works on Firefox/Chrome/Safari/IE/Opera.

[goosefishplayer]

You are amazing, thank you!

You have fixed 90% of my problems!! Now I just need to figure out how to always show the first image, and then toggle additional content. For example, if the a post has three images, you only see the first until you slide to it, and then the other two appear (along with the scroll bar).

Is there a way I can pay you for your trouble?