jQuery basics: Basic Image Gallery

[Mave]

Got my first jQuery lesson this week, already like it a lot.

Here's what I made:

http://themavesite.com/Mave/School/2013-2014/jQuery/BasicGallery/

The code is extremely easy:

<script language="Javascript">
	$(document).ready(function(){
		$("div.slide div").hide(); 
		$("div.menu a").hover(function(){ 
		$(this).stop().fadeTo("fast",0.5); 
		},function(){
			$(this).stop().fadeTo("fast",1); 
		});

		$("div.menu a").click(function(e){
			e.preventDefault(); 
			var sId = $(this).attr("id");
			console.log(sId)
			$("div.slide div:not(." sId ")").slideUp(); 
			$("div.slide div."   sId).slideDown();

		})
	
	});

</script>

jQuery comes with all these neat little functions like .slideUp, .slideDown, .hover, .hide, .fadeTo,..

 

[Stybar]

Nice!
Small detail though, the thumbnails are zoomed in, it's impossible to see how it looks in full like that.
Maybe a width=100%? (no idea, never had jQuery before)

 

[Mave]

Nice!
Small detail though, the thumbnails are zoomed in, it's impossible to see how it looks in full like that.
Maybe a width=100%? (no idea, never had jQuery before)

Fixed thanks to CSS3 and background-size

 

[Mave]

Update: The complete "gallery" is now resizeable.
So it looks good no matter how low/high your screen resolution is