Pat & Alex Blogging

Idee:

• Easy2Use
• Simple Coding
• Runs on Client

Umsetzung: in JavaScript mit JQuery

Zu sehen unter: http://www.birgit-kaletsch.de/persoenliches-hobbies.html

HTML-Code:

 
<p id="gallerytab">&nbsp;
<ul>
<li><a href="http://www.patworx.de/blog/wp-admin/#Blumen"><span>Blumen</span></a>
 
		...</li>
</ul>
<p id="Blumen">&nbsp;
<p class="show">&nbsp;
<p class="text">
		                  Ob Veilchen oder Rosen - ich erfreue mich an allen Blumen!
<ul class="bilder">
<li style="cursor: pointer"><img src="http://www.patworx.de/blog/wp-admin/thumb-Blumen-Blume_1.jpg" alt="Blume 1" /></li>
</ul>
 

JS-Code:

 
 
/* Hobbies & Bilder */
if($("#gallerytab").length != 0){
	$('#gallerytab ul:first').tabs({ fxFade: true, fxSpeed: 500 });  
 
	var hobbies = $('#gallerytab ul ~ div');  
 
	for (var i=0;i<hobbies.length;i++){></hobbies.length;i++){>    		$("#"+ hobbies[i].id + " .bilder li").click( function(){
	  		hobbie = $(this.parentNode.parentNode).attr("id");  
 
			$("#"+ hobbie + " .show .text").css("display", "none");
			$("#"+ hobbie + " .show .image").css("display", "none");
			$("#"+ hobbie + " .show .loading").css("display", "block");
			$("#"+ hobbie + " .show").css("height", "352px");  
 
			var src="big-" + this.firstChild.src.match(/.+\/(.+)$/i).pop().replace(/thumb-/, "");  
 
			$("#"+ hobbie + " .show .image").html('<img src="http://www.patworx.de/blog/wp-admin/%27+src+%27" alt="'+this.firstChild.alt+'" id="' + src + '" />');  
 
			var image = new Image();
			image.onload = function(){
				$("#"+ hobbie + " .show .image").css("display", "block");
				$("#"+ hobbie + " .show .loading").css("display", "none");
				jQuery.scrollTo( 0, {speed:1000} );
			}
			image.src = src;  
 
			$(src).attr("src", image.src);
		});
	}
};