jQuery basics: Basic Image Gallery

Mave

TMS Founder
Administrator
Messages
146,672
Location
Belgium
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:

Code:
<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

Yeah, groupsex seems to be the way to go
Messages
12,233
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

TMS Founder
Administrator
Messages
146,672
Location
Belgium
Stybar said:
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 :biggrin:
 

Mave

TMS Founder
Administrator
Messages
146,672
Location
Belgium
Update: The complete "gallery" is now resizeable.
So it looks good no matter how low/high your screen resolution is :holmes:
 
Top Bottom