PDA

View Full Version : Easy(?) jQuery puzzle.



goosefishplayer
08-01-2011, 10:45 PM
Hey there I could use help! I know nothing about jQuery but Im sure this is simple because I've seen it done. Basically I am creating a wordpress website for my family to view pics of my son (we are out of the country a lot). Currently the posts appear fully until going to the next post (using arrow keys or the navigation) and then they disappear by toggle.

Here is the site: www.liamsonheim.com

I am having trouble figuring out a way to always display the first images of posts and only sometimes display additional images (on the active post). That way it would look like a timeline of single images and hide the scrollbar most of the time.

Thanks so much in advance to you smart people. I am just floundering in the dark here.


<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(1)").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>