jQuery: Shuffling Photo Gallery Tutorial

Demo
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.

Click here to continue reading....

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()
})

Click here to continue reading....

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

Click here to continue reading....

Lioness And Car

Ok this is my first Photomanipulation photoshop lesson at Mix&Mash. Let me forewarn u guys before you all proceed. Some of the "levels" adjustment and shadows-filling are intuitive and i cant really tell u what the specific measurements are because even if i do, 80% of the chance it wun appear the same on your computer screen. So let your designer instinct take over~~

Final Result:

1. Download this image package.

2. Open Old Car.jpg and crop away the top and bottom black bar.

3. Open up the Lioness.jpg and use Pen Tool to trace the Lioness. Make sure you feather your selection with 2px before cropping it out.

4. Copy and paste the cropped lioness onto the Old Car file document. Place the lioness on the front of the car.

5. The most important thing now is to see where your light is coming from. From the photo you see the light are coming from the front right, judging from the shadow on the left of the car.


6. So we are going to deal with the lighting direction of the lioness. Let's duplicate two more copies of the lioness and name it accordingly.


7. Hide the Dark Layer. Select your Light layer. Press Ctrl- L to bring out the "Level". Shift the right controls towards the left to lighten the whole lioness.
P.S. The numbers on the picture are not the one to follow.


8. Switch on the visibility of the Dark layer and press Ctrl -L. Now we shift the left control towards the right to darkern the Lioness.
9. Both layers we apply layer mask and hide all. Layer > Layer Mask > Hide All.

10. Click on the layer mask of the Light Layer. Use a white brush and start brushing at the part of the lioness circled in red. This is because the shadow on the lioness is wrong. We need to get rid of the shadow by brightening that spot.


This is what u will get:

11) Now we select the layer mask of the Dark Layer. Use a white brush and paint on the spot you think will need shadows. These are my suggestions circled in red. If you think some of the parts are too dark, use a black brush erase it away. Use a white brush with lower opacity and brush it again.


This is what you will get:

12) Open up the Stone.jpg and crop out the largest stone in it. Remember the feather of 2px radius. Paste it in the Old Car document file. Position the Stone around the part where the lioness's hand is hanging in air. Transform the stone to your liking.


13) Group the lioness layers together and duplicate it. Merge the duplicated layer together and named it "Lion Top". As the name implies, place it on top of the "Stone" layers. Duplicate two Stone copies and place it above "Stone" Layer but below Lion Top. Apply Layer Mask > Hide All for the "Lion Top" layer.Name them accordingly.


14) Make the "Stone Dark" layer invisible. Use a white brush and brush out the lion hand paw and the chest covering the stone. But take note that the stone should be covering the armpit.



15) For the "stone copy" layer, press Ctrl-L to brighten the stone. Apply layer mask > Reveal All.


16) Select the layer mask of stone copy. Use a black brush and brush at the underneath of the lioness to create shadow. Make sure you do not go overboard with the brushing. Just brush it close to then Lioness if not it would make the stone look like it is floating.


17) Make the "Stone Dark" layer visible and change the blending option to multiply and opacity to 32%.


18) Open up the Drinking_Lioness.jpg. This time we wun crop the picture. Ctrl-A to select the whole picture and copy and paste it in the Old Car document file. Name it "drinking"

19) Position the smaller lioness onto the door ledge.To make this easier, change the opacity of the "Drinking" to around 40% to 50%. Now apply layer> Reveal All. Use a pen tool and trace out the smaller lioness. Right click and select "Make Selection". Feather radius = 2px. Press Ctrl - Alt - I to inverse the the selection. Fill it up with black.


20) We can see that the lioness's back is over-exposed. We need to even out this part. Duplicate this layer. Image > Adjustment > Brightness and Contrast. Adjust the brightness to the left. Make it dark.


21) Apply layer mask > Hide All. Now use a white brush with a brush opacity of 50% and brush the back of the Lioness.


22) Ok we are pretty much done here. If you want to add in the water surface, you can visit this excellent Water Surface tutorial here.

23) Optional.
+ Merge every layer together. Duplicate the layer. Add a gaussian blur of 1 px to the duplicated layer and put the blending option to "Soft Light".

This might not be the best Photo Manipulation tutorial out there but hopefully you picked up some technique and kickstart your creativity. :)

Click here to continue reading....