Super simple gallery/slider thing. Could easily be turned in to a jQuery plugin.
[html]
<div id="gallery">
<img src="images/1.jpg" alt="" class="main" />
<ul class="thumbs">
<li><img class="selected" src="images/thumb1.jpg" data-full="images/1.jpg" alt="" /></li>
<li><img src="images/thumb2.jpg" data-full="images/2.jpg" alt="" /></li>
<li><img src="images/thumb3.jpg" data-full="images/3.jpg" alt="" /></li>
<li><img src="images/thumb4.jpg" data-full="images/4.jpg" alt="" /></li>
<li><img src="images/thumb5.jpg" data-full="images/5.jpg" alt="" /></li>
<li><img src="images/thumb6.jpg" data-full="images/6.jpg" alt="" /></li>
</ul>
</div>
[/html]
[code]
// preload jquery extention
(function($){$.fn.preload=function(){for(var i = this.length-1; i >= 0; --i){$("<img/>")[0].src=this[i]}}})(jQuery);
$(function()
{
// Gallery Code
(function()
{
var autoRun = true,
pauseOnHover = true,
stopOnClick = false,
intervalSpeed = 3500,
fadeSpeed = 200,
thumbsList = $('#gallery').find('.thumbs img'),
fullList = [],
mainImage = $('#gallery').find('img.main'),
galleryInterval = null,
curThumb = 0;
// get all full images
for(var i = thumbsList.length - 1; i >= 0; i--)
{
fullList.push($(thumbsList[i]).data('full'));
}
$(fullList).preload();
// autoplay
if (autoRun)
{
var galleryStart = function()
{
// clear previous
clearInterval(galleryInterval);
galleryInterval = setInterval(function()
{
// reset curThumb at the end
curThumb = (curThumb < fullList.length-1) ? curThumb + 1 : 0;
$('#gallery .thumbs li').eq(curThumb).find('img').click();
}, intervalSpeed);
}
var galleryStop = function()
{
clearInterval(galleryInterval);
galleryInterval = null;
}
// start autplay
galleryStart();
if (pauseOnHover)
{
mainImage.hover(
function()
{
galleryStop();
},
function()
{
galleryStart();
}
);
}
}
$('#gallery .thumbs img').click(function(eventOb)
{
var thumb = $(this),
thumbSrc = thumb.data('full');
// user click
if (typeof eventOb.originalEvent !== 'undefined')
{
curThumb = thumb.parent().index();
if (autoRun)
{
if (stopOnClick)
{
// clear timer
clearInterval(galleryInterval);
}
else
{
// reset timer
galleryStart();
}
}
}
if (!thumb.hasClass('selected'))
{
thumbsList.removeClass('selected');
thumb.addClass('selected');
mainImage.fadeOut(fadeSpeed, function()
{
mainImage.attr('src', thumbSrc).fadeIn(fadeSpeed);
});
}
});
})()
});
[/code]
[QUOTE=Kopimi;33273652]More padding in the box to the right of the photo, separate the photo and the comments section with more space and make it obvious that you're looking at a comment section and not just random text, and add padding to the navigation bar on the bottom where you select which page of the album you want to see. Also put that navigation bar right under the image, else it'll get pushed way down the page by comments (Unless it's just there for sifting through comments, in which case nevermind)
I like it a lot[/QUOTE]
Yeah, sorry i posted an unfinished website.
Right under the photo i was gonna add more stuff and im gonna add breadcrumbs too above the photos.
My computer decided to end its life and now i somehow have to share it with a little brother that doesnt want to share until i have the money to get a new computer
[img]http://i.imgur.com/3zt2x.png[/img]
oh god how did i get here im not good with websites
(Dad does not trust anything but GoDaddy.com for some reason)
[editline]15th November 2011[/editline]
Im only going to use the site to dick around and gain views either way
Godaddy is nothing but a sneaky money drilling company, order a domain for $1, get a auto renewal charge of $10 few months later without authentication.
godaddy is total shit
namecheap
<---
Not too well made, I Know. But I'm terrible at this. :v:
I just added support for IE5.5 and IE6 in my latest project. Easy as fuck. I don't see what all the bitching over IE is about. Even got CSS gradients to work, ohhhh yeah.
[editline]15th November 2011[/editline]
[css]
.vertical-gradient(@start, @stop) {
background-color: darken(@start, 5%);
background-image: linear-gradient(top, @start 0%, @stop 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@stop));
background-image: -webkit-linear-gradient(@start, @stop);
background-image: -moz-linear-gradient(center top, @start 0%, @stop 100%);
background-image: -moz-gradient(center top, @start 0%, @stop 100%);
background-image: -ms-linear-gradient(top, @start 0%, @stop 100%);
background-image: -khtml-gradient(linear, left top, left bottom, from(@start), to(@stop));
background-image: ~"-o-linear-gradient(top, @start 0%, #stop 100%)";
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{stop}', GradientType=0)";
}
[/css]
Might be of use to someone other then me who uses LESS.
[editline]15th November 2011[/editline]
Along the way I've also learnt that IE5.5 renders things better then IE6.
[QUOTE=Jelly;33283493]I just added support for IE5.5 and IE6 in my latest project. Easy as fuck. I don't see what all the bitching over IE is about. Even got CSS gradients to work, ohhhh yeah.
[editline]15th November 2011[/editline]
[css]
.vertical-gradient(@start, @stop) {
background-color: darken(@start, 5%);
background-image: linear-gradient(top, @start 0%, @stop 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@stop));
background-image: -webkit-linear-gradient(@start, @stop);
background-image: -moz-linear-gradient(center top, @start 0%, @stop 100%);
background-image: -moz-gradient(center top, @start 0%, @stop 100%);
background-image: -ms-linear-gradient(top, @start 0%, @stop 100%);
background-image: -khtml-gradient(linear, left top, left bottom, from(@start), to(@stop));
background-image: ~"-o-linear-gradient(top, @start 0%, #stop 100%)";
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{stop}', GradientType=0)";
}
[/css]
Might be of use to someone other then me who uses LESS.
[editline]15th November 2011[/editline]
Along the way I've also learnt that IE5.5 renders things better then IE6.[/QUOTE]
Seems like overkill considering so few people use those versions of IE now.
[QUOTE=iamacyborg;33283772]Seems like overkill considering so few people use those versions of IE now.[/QUOTE]
IE 5.5 may seem like overkill, but I only had to add one line of CSS to make it look exactly the same as in the current version of Firefox. It's meant for an education environment, so it's possible that they may still be using Windows XP and IE6. By now I've learnt how to write CSS correctly, 90% of the time things don't work on older browsers is because of horribly written CSS. Hence it being the developers fault.
[QUOTE=Jelly;33283898]IE 5.5 may seem like overkill, but I only had to add one line of CSS to make it look exactly the same as in the current version of Firefox. It's meant for an education environment, so it's possible that they may still be using Windows XP and IE6. By now I've learnt how to write CSS correctly, 90% of the time things don't work on older browsers is because of horribly written CSS. Hence it being the developers fault.[/QUOTE]
You're right, but if no one visits your site using that browser, it's a waste of time, however easy it may be.
I've been sitting on winterhold.com for a while now, I really should do something with it now that Skyrim's been released. Any ideas?
[QUOTE=iamacyborg;33285210]You're right, but if no one visits your site using that browser, it's a waste of time, however easy it may be.
I've been sitting on winterhold.com for a while now, I really should do something with it now that Skyrim's been released. Any ideas?[/QUOTE]
I might buy it from you if you set a nice price.
$20 ?
/edit
Come to think of it, I don't really want to sell, but it's definitely a domain that's asking for some sort of site. Even if it's just stupid pictures of dragons.
[QUOTE=iamacyborg;33285329]$20 ?
/edit
Come to think of it, I don't really want to sell, but it's definitely a domain that's asking for some sort of site. Even if it's just stupid pictures of dragons.[/QUOTE]
If you change your mind, I'll take it off your hands for those 20$
[QUOTE=StinkyJoe;33285406]If you change your mind, I'll take it off your hands for those 20$[/QUOTE]
Gimme a few days to think it over and I'll get back to you :)
[url=https://github.com/icebreaker/girlfriend]I found this for all the ruby devs on here[/url]
Come to think of it, I also own vvardenfell.com, hlaalu.com and redoran.com. I have too many Elder Scrolls based domains :/
Got all the authentication working for Coquelicot / fpconnect, you can either login statically or via Steam OID, Google OID, or Facebook OAUTH (with the ability to expand if it needs it). All I've got to do now is get around to finishing the API, then hook the user dashboard into it, and do some last trimmings to the admin backend panel and it should be ready for a beta
[QUOTE=iamacyborg;33286383]Come to think of it, I also own vvardenfell.com, hlaalu.com and redoran.com. I have too many Elder Scrolls based domains :/[/QUOTE]
A bit silly buying them if you're not going to do anything with them. At least others might if you didn't take them all.
[QUOTE=H4Z3Y;33286009][url=https://github.com/icebreaker/girlfriend]I found this for all the ruby devs on here[/url][/QUOTE]
[quote]Be sure to finger her afterwards to see the results via girlfriend --ability finger .[/quote]
[QUOTE=jaybuz;33286562]A bit silly buying them if you're not going to do anything with them. At least others might if you didn't take them all.[/QUOTE]
When I bought them I was doing something with them.
Either way, the .nets and .orgs should be available, so I'm hardly hurting anyone.
[QUOTE=Kopimi;33273652]More padding in the box to the right of the photo, separate the photo and the comments section with more space and make it obvious that you're looking at a comment section and not just random text, and add padding to the navigation bar on the bottom where you select which page of the album you want to see. Also put that navigation bar right under the image, else it'll get pushed way down the page by comments (Unless it's just there for sifting through comments, in which case nevermind)
I like it a lot[/QUOTE]
[url]http://dl.dropbox.com/u/6380033/theme/photos.html[/url]
update!
I'm not sure what you are talking about the padding in the right.
[QUOTE=Jelly;33283493]I just added support for IE5.5 and IE6 in my latest project. Easy as fuck. I don't see what all the bitching over IE is about. Even got CSS gradients to work, ohhhh yeah.
[editline]15th November 2011[/editline]
[css]
.vertical-gradient(@start, @stop) {
background-color: darken(@start, 5%);
background-image: linear-gradient(top, @start 0%, @stop 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@stop));
background-image: -webkit-linear-gradient(@start, @stop);
background-image: -moz-linear-gradient(center top, @start 0%, @stop 100%);
background-image: -moz-gradient(center top, @start 0%, @stop 100%);
background-image: -ms-linear-gradient(top, @start 0%, @stop 100%);
background-image: -khtml-gradient(linear, left top, left bottom, from(@start), to(@stop));
background-image: ~"-o-linear-gradient(top, @start 0%, #stop 100%)";
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{stop}', GradientType=0)";
}
[/css]
Might be of use to someone other then me who uses LESS.
[editline]15th November 2011[/editline]
Along the way I've also learnt that IE5.5 renders things better then IE6.[/QUOTE]
[url]http://css3pie.com/[/url]
[img]http://i.imgur.com/LLQs9.png[/img]
I start on many designs but never finish any but I've promised myself to finish this one. After all, I'll never improve if I just start on something and then scrap it five minutes later. Next up: navigation, but I have no idea where to place it :(
Don't start with a header and details. Start with the bigger picture. Don't even open photoshop until you've done some sketches or wireframes and actually know what you are going to do. Good planning leads to good design.
[url]www.lucaselzinga.com[/url]
What you all think? need some Comments/Criticism on it.
Still working...
[IMG]http://i.imgur.com/DmMQY.jpg[/IMG]
[QUOTE=TH3_L33T;33289068][url]www.lucaselzinga.com[/url]
What you all think? need some Comments/Criticism on it.[/QUOTE]
Good:
- Good content
- Simplistic/Minimal
- Nice image zoom thing on 'Portfolio'
Suggestions:
- Can't really see the text 'Resume' on the Resume page. (This thing - [url]http://www.lucaselzinga.com/images/Contact/resume.png[/url]). Consider changing the text.
- Add a 'mailto:elzinga.lucas@gmail.com' link on the 'Contact' page.
- Consider making one of those 'image zoom' things for a Youtube player and then make your video links open with that instead of hyperlinking to the youtube video page.
Overall, good work!
[QUOTE=theJohn;33288244][img]http://i.imgur.com/LLQs9.png[/img][/QUOTE]
Nice colour you got there but I hate marketing. Just cut to the chase.
[editline]15th November 2011[/editline]
[QUOTE=adamjon858;33289234]Still working...
[IMG]http://i.imgur.com/DmMQY.jpg[/IMG][/QUOTE]
Very bland, but you don't do the design do you?
[QUOTE=iamacyborg;33285210]You're right, but if no one visits your site using that browser, it's a waste of time, however easy it may be.
I've been sitting on winterhold.com for a while now, I really should do something with it now that Skyrim's been released. Any ideas?[/QUOTE]
I can't anticipate what browser someone will be using.
[editline]16th November 2011[/editline]
I like it to be honest, making things work the same across different browsers is fun to me.
Sorry, you need to Log In to post a reply to this thread.