jQuery: Shuffling Photo Gallery Tutorial

Creating a Shuffling Photo Gallery in jQuery is actually very simple. It's just a matter of calling timers("setIntervals()") and tweaking opacity.

Let's get started.

HTML

<div id="slideshow">
<img src="images/demo.png"/ class="active">
<img src="images/digg.png"/>
<img src="images/reddit.png"/>
<img src="images/twitter.png"/>
</div>

These are the images that you want to be shuffling.

CSS

<style type="text/css">
#slideshow{
text-align:center;
postion:relative;
}

#slideshow img{
position:absolute;
z-index:8;
top:0;
left:50%;
}

#slideshow img.active{
z-index:10;
}

</style>

We are gonna declare "position:absolute" for the images to stack up together.Z-index ensures that the "active" image will be on top of the rest.


Javacript

<script type="text/javascript">

$(document).ready(function(){
$('#slideshow img').animate({opacity:0.0},1);
$('#slideshow img.active').animate({opacity:1.0},1);
});

function slideSwitch(){
var $active = $('#slideshow IMG.active');
var $next = $active.next().length ? $active.next():$('#slideshow IMG:first');
$active.animate({left:'40%'},1000).animate({left:'50%'},1000).animate({opacity:0.0},500);
$next.addClass('active');
$next.animate({opacity:1.0},1000);
$active.removeClass('active');
}

$(function(){
setInterval("slideSwitch()",3000);
});
</script>

First, we hide all images except the active image.
$(document).ready(function(){
$('#slideshow img').animate({opacity:0.0},1);
$('#slideshow img.active').animate({opacity:1.0},1);
});

Next, our timer will call the function slideSwitch() every 3000 millisecond.
$(function(){
setInterval("slideSwitch()",3000);
});

In our slideSwitch function, we hook the active image into variable $active and the next awaiting image into $next.

var $next = $active.next().length ? $active.next():$('#slideshow IMG:first');

I found an excellent explanation from net-Tuts regarding the "?" above:

Think of everything before the question mark as being a question, if the answer to that question is true then execute the code to the left of the colon, but after the question mark. If the answer is false then execute the code after the colon.

The rest are just simple animation to mimic the shuffling action and also to reattach the active class to the images.

Jquery: Show and hide a partially-extended list

Demo
"Show and Hide" effects are the most commonly used effects used in the Javascript library. They are easy to learn and implement but yet visually impressive enough to catch some attention.

To show or hide contents completely is easy. But what about showing a partially-extended list?

I found a excellent tutorial from Chris Pollack which details how to do it: Sliding content from a partial height with jQuery.

So what i'm gonna do today is to simplify his code and to explain in details how it work.

Let's create a simple list. Preferably make the list long so that you can see the sliding effect better.

HTML

<div id="slide">
<ul>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
</ul>
</div>

This should be what you will get:

CSS

<style type="text/css">
#slide{
overflow:hidden;
width:300px;
margin:0 auto;
text-align:center;
}

#slide ul{
list-style:none;
border:3px #444 solid;
border-bottom:none;
margin:0px;
padding:0px;
}

#slide ul li a {
color:#3274d0;
display:block;
border-bottom:2px #444 solid;
text-decoration:none;
}

#slide ul li a:hover{
color:#fff;
background:#3274d0;
}

.bottom{
width:300px;
margin:0 auto;
border-top:3px #444 solid;
text-align:center;
}

.tabs {
width:100px;
margin:0 auto;
}

.tabs a{
background:#3274d0;
color:#fff;
padding:3px;
text-decoration:none;
border:3px #444 solid;
border-top:none;
display:block;
}
</style>

You will get this:


Honestly 99% of my CSS is just to beautify the list.

The most important line in the style-sheet would be the "overflow" property. "hidden" would allow it the list to be cut to it's required length.

Ok! enough with mundane stuff. Let's get sliding!

Javascript

<script type="text/javascript">

var sliderHeight = "100px";
var cHeight;

$(document).ready(function(){
cHeight = $('#slide').height();
$("#slide").css("height",sliderHeight);
$(".tabs").html('<a href="#">Pull</a>');
$('.tabs a').click(function(){
openSlider()
})
});<!-- end document ready -->

function openSlider(){
$('#slide').animate({height:cHeight+"px"},"slow");
$(".tabs").html('<a href="#">Up we go!</a>');
$('.tabs a').click(function(){
closeSlider()
})
}<!-- end open slider -->

function closeSlider(){
$('#slide').animate({height:sliderHeight},"slow");
$(".tabs").html('<a href="#">Pull!</a>');
$('.tabs a').click(function(){
openSlider();
});
}<!-- end closeSlider -->
</script>

Javascript explained - Variable sliderHeight is to state your list's height when it is partially hidden. cHeight is to record the list's true height.

Basically, JS will record your list height first.
var sliderHeight = "100px";
var cHeight;

Then when "a" inside of class ".tabs" is been clicked, function openSlider() will be called.
$('.tabs a').click(function(){
openSlider()
})

Inside openSlider() function, animation method is used to reveal the true height,cHeight.
$('#slide').animate({height:cHeight+"px"},"slow")

If ".tabs a" is been clicked again, closeSlider() function will be called instead. The list will then slide back to it's hidden height.
$('.tabs a').click(function(){
closeSlider()
})

Watch this space!

I'm back... My new template is still not done...Still need to sprinkle some graphics and JS... Change the sidebar content...

Anyway it's 3am.. time to get some rest...yawnzz