Articulo java web

7

GALERIA DE IMÁGENES EN JAVA WEB – NETBEANS

Crear un proyecto java web

Agregar un archivo Inicio.jsp.Estructura del proyecto:

R.M. 420-94-ED

7

Código del formulario Inicio.jsp<%@page contentType="text/html" pageEncoding="UTF-8"%><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>malihu jQuery Image Gallery</title><style type="text/css"></style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script type="text/javascript" src="jquery.easing.1.3.js"></script></head><body><div id="bg"><a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><img src="images/1.jpg" width="1680" height="1050" alt="Denebola" title="Denebola" id="bgimg" /></div><div id="preloader"><img src="ajax-loader_dark.gif" width="32" height="32" /></div><div id="img_title"></div><div id="toolbar"><a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="toolbar_fs_icon.png" width="50" height="50" /></a></div><div id="thumbnails_wrapper"><div id="outer_container"><div class="thumbScroller">

<div class="container"> <div class="content"> <div><a href="Imagenes/1.jpg"><img src="Imagenes/1peque.jpg" title="SOCIOSCREATIVOS" alt="Denebola" class="thumb" /></a></div> </div> <div class="content"> <div><a href="Imagenes/2.jpg"><img src="Imagenes/2peque.jpg" title="Lux Aeterna" alt="Lux Aeterna" class="thumb" /></a></div> </div> <div class="content"> <div><a href="Imagenes/3.jpg"><img src="Imagenes/3peque.jpg" title="X-Wing on patrol" alt="X-Wing on patrol" class="thumb" /></a></div> </div>

7

<div class="content"> <div><a href="Imagenes/4.jpg"><img src="Imagenes/4peque.jpg" title="Albireo Outpost" alt="Albireo Outpost" class="thumb" /></a></div> </div> <div class="content"> <div><a href="Imagenes/5.jpg"><img src="Imagenes/5peque.jpg" title="Church of Heaven" alt="Church of Heaven" class="thumb" /></a></div> </div> <div class="content"> <div><a href="Imagenes/6.jpg"><img src="Imagenes/6peque.jpg" title="Decampment" alt="Decampment" class="thumb" /></a></div> </div> <div class="content"> <div><a href="Imagenes/7.jpg"><img src="Imagenes/7peque.jpg" title="Hibernaculum" alt="Hibernaculum" class="thumb" /></a></div> </div> <div class="content"> <div><a href="Imagenes/8.jpg"><img src="Imagenes/8peque.jpg" title="Supremus Lucernarium" alt="Supremus Lucernarium" class="thumb" /></a></div> </div> <div class="content"> <div><a href="Imagenes/8.jpg"><img src="Imagenes/8peque.jpg" title="Aurea Mediocritas" alt="Aurea Mediocritas" class="thumb" /></a></div> </div> <div class="content"> <div><a href="Imagenes/10.jpg"><img src="Imagenes/10peque.jpg" title="Praedestinatio" alt="Praedestinatio" class="thumb" /></a></div> </div> <div class="content"> <div><a href="Imagenes/11.jpg"><img src="Imagenes/11peque.jpg" title="Transitorius" alt="Transitorius" class="thumb" /></a></div> </div> <div class="content"> <div><a href="Imagenes/12.jpg"><img src="Imagenes/12peque.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" /></a></div> </div> <div class="content"> <div><a href="Imagenes/13.jpg"><img src="Imagenes/13peque.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" /></a></div> </div> </div></div></div></div><script>//config//set default images view mode$defaultViewMode="full"; //full, normal, original$tsMargin=30; //first and last thumbnail margin (for better cursor interaction) $scrollEasing=600; //scroll easing amount (0 for no easing) $scrollEasingType="easeOutCirc"; //scroll easing type $thumbnailsContainerOpacity=0.8; //thumbnails area default opacity$thumbnailsContainerMouseOutOpacity=0; //thumbnails area opacity on mouse out$thumbnailsOpacity=0.6; //thumbnails default opacity$nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show")$keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off")

//cache vars$thumbnails_wrapper=$("#thumbnails_wrapper");$outer_container=$("#outer_container");$thumbScroller=$(".thumbScroller");$thumbScroller_container=$(".thumbScroller .container");$thumbScroller_content=$(".thumbScroller .content");$thumbScroller_thumb=$(".thumbScroller .thumb");$preloader=$("#preloader");$toolbar=$("#toolbar");$toolbar_a=$("#toolbar a");

7

$bgimg=$("#bgimg");$img_title=$("#img_title");$nextImageBtn=$(".nextImageBtn");$prevImageBtn=$(".prevImageBtn");

$(window).load(function() {$toolbar.data("imageViewMode",$defaultViewMode); //default view modeif($defaultViewMode=="full"){

$toolbar_a.html("<img src='toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");

} else {$toolbar_a.html("<img src='toolbar_fs_icon.png' width='50' height='50' />").attr("onClick",

"ImageViewMode('full');return false").attr("title", "Maximize");}ShowHideNextPrev($nextPrevBtnsInitState);//thumbnail scroller$thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add marginsliderLeft=$thumbScroller_container.position().left;sliderWidth=$outer_container.width();$thumbScroller.css("width",sliderWidth);var totalContent=0;fadeSpeed=200;

var $the_outer_container=document.getElementById("outer_container");var $placement=findPos($the_outer_container);

$thumbScroller_content.each(function () {var $this=$(this);totalContent+=$this.innerWidth();$thumbScroller_container.css("width",totalContent);$this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity);

});

$thumbScroller.mousemove(function(e){if($thumbScroller_container.width()>sliderWidth){

var mouseCoords=(e.pageX - $placement[1]); var mousePercentX=mouseCoords/sliderWidth; var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-

sliderWidth)*(mousePercentX)); var thePosA=mouseCoords-destX; var thePosB=destX-mouseCoords; if(mouseCoords>destX){

$thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing

} else if(mouseCoords<destX){ $thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,

$scrollEasingType); //with easing } else {

$thumbScroller_container.stop(); }

}});

$thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);$thumbnails_wrapper.hover(

function(){ //mouse overvar $this=$(this);$this.stop().fadeTo("slow", 1);

},function(){ //mouse out

var $this=$(this);$this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);

});

$thumbScroller_thumb.hover(function(){ //mouse over

var $this=$(this);

7

$this.stop().fadeTo(fadeSpeed, 1);},function(){ //mouse out

var $this=$(this);$this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);

});

//on window resize scale image and reset thumbnail scroller$(window).resize(function() {

FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH"));

$thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc"); var newWidth=$outer_container.width();$thumbScroller.css("width",newWidth);sliderWidth=newWidth;$placement=findPos($the_outer_container);

});

//load 1st imagevar the1stImg = new Image();the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload);the1stImg.src = $bgimg.attr("src");$outer_container.data("nextImage",$(".content").first().next().find("a").attr("href"));$outer_container.data("prevImage",$(".content").last().find("a").attr("href"));

});

function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){$this.fadeOut("fast",function(){

$this.attr("src", "").attr("src", imgSrc); //change image sourceFullScreenBackground($this,imageWidth,imageHeight); //scale background image$preloader.fadeOut("fast",function(){$this.fadeIn("slow");});var imageTitle=$img_title.data("imageTitle");if(imageTitle){

$this.attr("alt", imageTitle).attr("title", imageTitle);$img_title.fadeOut("fast",function(){

$img_title.html(imageTitle).fadeIn();});

} else {$img_title.fadeOut("fast",function(){

$img_title.html($this.attr("title")).fadeIn();});

}});

}

//mouseover toolbarif($toolbar.css("display")!="none"){

$toolbar.fadeTo("fast", 0.4);}$toolbar.hover(

function(){ //mouse overvar $this=$(this);$this.stop().fadeTo("fast", 1);

},function(){ //mouse out

var $this=$(this);$this.stop().fadeTo("fast", 0.4);

});

//Clicking on thumbnail changes the background image$("#outer_container a").click(function(event){

event.preventDefault();var $this=$(this);GetNextPrevImages($this);GetImageTitle($this);SwitchImage(this);

7

ShowHideNextPrev("show");});

//next/prev images buttons$nextImageBtn.click(function(event){

event.preventDefault();SwitchImage($outer_container.data("nextImage"));var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");GetNextPrevImages($this);GetImageTitle($this);

});

$prevImageBtn.click(function(event){event.preventDefault();SwitchImage($outer_container.data("prevImage"));var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");GetNextPrevImages($this);GetImageTitle($this);

});

//next/prev images keyboard arrowsif($keyboardNavigation=="on"){$(document).keydown(function(ev) { if(ev.keyCode == 39) { //right arrow SwitchImage($outer_container.data("nextImage"));

var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");GetNextPrevImages($this);GetImageTitle($this);

return false; // don't execute the default action (scrolling or whatever) } else if(ev.keyCode == 37) { //left arrow SwitchImage($outer_container.data("prevImage"));

var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");GetNextPrevImages($this);GetImageTitle($this);

return false; // don't execute the default action (scrolling or whatever) }});}

function ShowHideNextPrev(state){if(state=="hide"){

$nextImageBtn.fadeOut();$prevImageBtn.fadeOut();

} else {$nextImageBtn.fadeIn();$prevImageBtn.fadeIn();

}}

//get image titlefunction GetImageTitle(elem){

var title_attr=elem.children("img").attr("title"); //get image title attribute$img_title.data("imageTitle", title_attr); //store image title

}

//get next/prev imagesfunction GetNextPrevImages(curr){

var nextImage=curr.parents(".content").next().find("a").attr("href");if(nextImage==null){ //if last image, next is first

var nextImage=$(".content").first().find("a").attr("href");}$outer_container.data("nextImage",nextImage);var prevImage=curr.parents(".content").prev().find("a").attr("href");if(prevImage==null){ //if first image, previous is last

var prevImage=$(".content").last().find("a").attr("href");}$outer_container.data("prevImage",prevImage);

}

7

//switch imagefunction SwitchImage(img){

$preloader.fadeIn("fast"); //show preloadervar theNewImg = new Image();theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload);theNewImg.src = img;

}

//get new image dimensionsfunction CreateDelegate(contextObject, delegateMethod){

return function(){return delegateMethod.apply(contextObject, arguments);

}}

//new image on loadfunction theNewImg_onload(){

$bgimg.data("newImageW",this.width).data("newImageH",this.height);BackgroundLoad($bgimg,this.width,this.height,this.src);

}

//Image scale functionfunction FullScreenBackground(theItem,imageWidth,imageHeight){

var winWidth=$(window).width();var winHeight=$(window).height();if($toolbar.data("imageViewMode")!="original"){ //scale

var picHeight = imageHeight / imageWidth;var picWidth = imageWidth / imageHeight;if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode

if ((winHeight / winWidth) < picHeight) {$(theItem).attr("width",winWidth);$(theItem).attr("height",picHeight*winWidth);

} else {$(theItem).attr("height",winHeight);$(theItem).attr("width",picWidth*winHeight);

};} else { //normal size image mode

if ((winHeight / winWidth) > picHeight) {$(theItem).attr("width",winWidth);$(theItem).attr("height",picHeight*winWidth);

} else {$(theItem).attr("height",winHeight);$(theItem).attr("width",picWidth*winHeight);

};}$(theItem).css("margin-left",(winWidth-$(theItem).width())/2);$(theItem).css("margin-top",(winHeight-$(theItem).height())/2);

} else { //no scale$(theItem).attr("width",imageWidth);$(theItem).attr("height",imageHeight);$(theItem).css("margin-left",(winWidth-imageWidth)/2);$(theItem).css("margin-top",(winHeight-imageHeight)/2);

}}

//Image view mode function - fullscreen or normal sizefunction ImageViewMode(theMode){

$toolbar.data("imageViewMode", theMode);FullScreenBackground($bgimg,$bgimg.data("newImageW"),$bgimg.data("newImageH"));if(theMode=="full"){

$toolbar_a.html("<img src='toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");

} else {$toolbar_a.html("<img src='toolbar_fs_icon.png' width='50' height='50' />").attr("onClick",

"ImageViewMode('full');return false").attr("title", "Maximize");}

}

7

//function to find element Positionfunction findPos(obj) {

var curleft = curtop = 0;if (obj.offsetParent) {

curleft = obj.offsetLeftcurtop = obj.offsetTopwhile (obj = obj.offsetParent) {

curleft += obj.offsetLeftcurtop += obj.offsetTop

}}return [curtop, curleft];

}</script></body></html>

En ejecución:

Las imágenes y los demas archivos se encuentran en la carpeta recursos.

Technology

Articulo java web