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"> </p>
<li><a href="http://www.patworx.de/blog/wp-admin/#Blumen"><span>Blumen
</span></a>
...</li>
</ul>
<p id="Blumen"> </p> <p class="show"> </p>
Ob Veilchen oder Rosen - ich erfreue mich an allen Blumen!
<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);
});
}
};