Photo Gallery Web Layout

4 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Photo Gallery Web Layout
mikethedj4
photogalleryweblayout.png
All the divs should all fade in only if you're using -webkit meaning if you're a safari, or chrome user. (I could of easily done it in JQuery, however I wanted to make this entirely in CSS3, except you can't click and drag divs in CSS3 yet, so that was the only thing I used JQuery for)

The background was made in Gimp. Everything else was done in code, besides the images in the divs, and thoughs you can change yourself.

Also feel free to adjust the CSS however you want, like positioning adding more than 10 images, etc:
photogallery-weblayout.zip
NOTE: If you want to takeout the fade in animation you need to takout these codes inside the style.css file.

The code below is located in div.
Code: Select all
	-webkit-animation-name:fade-in;
	-webkit-animation-duration:2s;
	-webkit-animation-timing-function:ease-in;
	-webkit-animation-iteration-count:1;
The code below is located in galleryline.
Code: Select all
	-webkit-animation-name:fade-in;
	-webkit-animation-duration:1s;
	-webkit-animation-timing-function:ease-in;
	-webkit-animation-iteration-count:1;
Also on the very top of the CSS document you'll need to remove this code,
Code: Select all
@-webkit-keyframes fade-in {
	0% {
		opacity: 0;}
	50% {
		opacity: 5;}
	100% {
		opacity: 1;}}
Now if you want all the divs to fade in, but your browser doesn't support it, just put down the following code inside <script type="text/javascript"> (which is located in index.html) which is where the JQuery code below will go.
Code: Select all
	$(document).ready(function() {
		$( "div" ).hide();
		$("div").fadeIn(1000);
	});
You do not have the required permissions to view the files attached to this post.
Last edited by mikethedj4 on Mon Apr 25, 2011 6:32 am, edited 3 times in total.
User avatar
Agust1337
Coding God
Coding God
Posts: 2456
Joined: Fri Feb 19, 2010 8:18 pm

Re: Photo Gallery Web Layout
Agust1337
Do you think this will work with a program made in .NET with webkit?
You're crazy!
I'm not crazy, my mother had me tested. ~Sheldon Cooper
User avatar
Axel
Coding God
Coding God
Posts: 1928
Joined: Sun Jun 27, 2010 9:15 pm

Re: Photo Gallery Web Layout
Axel
Agust1337 wrote:
Do you think this will work with a program made in .NET with webkit?
I think the newest webkit supports CSS3
http://vagex.com/?ref=25000
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Photo Gallery Web Layout
mikethedj4
Agust1337 wrote:
Do you think this will work with a program made in .NET with webkit?
I have no idea, cause I don't develop desktop software, except on Linux, and I rarely ever do that.

Desktop applications and web applications are totally different, and haft to be coded different.
For example, an app made in VB.NET can't use the same code for an Android phone, nor for web based apps.
4 posts Page 1 of 1
Return to “Tutorials”