Foros del Web - Ver Mensaje Individual

smithce79 · #2 (**permalink**) 14/02/2013, 04:18

El código del html no lo pude poner porque es muy largo, lo pongo en dos partes:

HTML - parte 1

Código:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
			span.reference{
				font-family:Arial;
				position:fixed;
				right:10px;
				top:10px;
				font-size:10px;
			}
			span.reference a{
				color:#fff;
				text-transform:uppercase;
				text-decoration:none;
				text-shadow:1px 1px 1px #000;
				margin-left:20px;
			}
			span.reference a:hover{
				color:#ddd;
			}
			h1.title{
				width:919px;
				height:148px;
				position:fixed;
				top:10px;
				left:10px;
				text-indent:-9000px;
				background:transparent url(images/icons/title.png) no-repeat top left;
				z-index:2;
			}
		</style>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.easing.1.3.js"></script>
		<script type="text/javascript">
			$(window).load(function() {
				sliderLeft=$('#thumbScroller .container').position().left;
				padding=$('#outer_container').css('paddingRight').replace("px", "");
				sliderWidth=$(window).width()-padding;
				$('#thumbScroller').css('width',sliderWidth);
				var totalContent=0;
				$('#thumbScroller .content').each(function () {
					totalContent+=$(this).innerWidth();
					$('#thumbScroller .container').css('width',totalContent);
				});
				$('#thumbScroller').mousemove(function(e){
					if($('#thumbScroller  .container').width()>sliderWidth){
						var mouseCoords=(e.pageX - this.offsetLeft);
						var mousePercentX=mouseCoords/sliderWidth;
						var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
						var thePosA=mouseCoords-destX;
						var thePosB=destX-mouseCoords;
						var animSpeed=600; //ease amount
						var easeType='easeOutCirc';
						if(mouseCoords==destX){
							$('#thumbScroller .container').stop();
						}
						else if(mouseCoords>destX){
							//$('#thumbScroller .container').css('left',-thePosA); //without easing
							$('#thumbScroller .container').stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
						}
						else if(mouseCoords<destX){
							//$('#thumbScroller .container').css('left',thePosB); //without easing
							$('#thumbScroller .container').stop().animate({left: thePosB}, animSpeed,easeType); //with easing
						}
					}
				});
				$('#thumbScroller  .thumb').each(function () {
					$(this).fadeTo(fadeSpeed, 0.6);
				});
				var fadeSpeed=200;
				$('#thumbScroller .thumb').hover(
				function(){ //mouse over
					$(this).fadeTo(fadeSpeed, 1);
				},
				function(){ //mouse out
					$(this).fadeTo(fadeSpeed, 0.6);
				}
			);
			});
			$(window).resize(function() {
				//$('#thumbScroller .container').css('left',sliderLeft); //without easing
				$('#thumbScroller .container').stop().animate({left: sliderLeft}, 400,'easeOutCirc'); //with easing
				$('#thumbScroller').css('width',$(window).width()-padding);
				sliderWidth=$(window).width()-padding;
			});
		</script>

    </head>

    <body>
		<div id="fp_gallery" class="fp_gallery">
        
	<img src="images/1.jpg" alt="" class="fp_preview" style="display:none;"/>

      <div class="fp_overlay"></div>
			<div id="fp_loading" class="fp_loading"></div>
			<div id="fp_next" class="fp_next"></div>
			<div id="fp_prev" class="fp_prev"></div>
			<div id="outer_container">
				<div id="thumbScroller">
					<div class="container">
						<div class="content">
							<div><a href="#"><img src="images/thumbs/1.jpg" alt="images/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/thumbs/3.jpg" alt="images/3.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/thumbs/4.jpg" alt="images/4.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/thumbs/5.jpg" alt="images/5.jpg" class="thumb" /></a></div>
						</div>
					</div>
                    							<div class="zoom"><a href="#" /><img src="images/zoom.jpg" alt="images/5.jpg" width="100" height="72" class="thumb"/></a></div>

				</div>
			</div>
		</div>