T

Slideshow



Feature List

Solo tienes que observar el slide en acción:




DESCARGA:
 Feature List.zip(102KB):jQuery, archivo CSS, ejemplo e imagenes.


Implementar
 
Aloja a los dos archivos a un servicio de alojamiento:




style.cssjquery.featureList-1.0.0.js



Una vez alojados, incluye las URL de los dos archivos en el siguiente código: 

<link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.featureList-1.0.0.js"></script>
<style type="text/css">
	
		h3 {
			margin: 0;	
			padding: 7px 0 0 0;
			font-size: 16px;
			text-transform: uppercase;
		}

		div#feature_list {
			width: 750px;
			height: 240px;
			overflow: hidden;
			position: relative;
		}

		div#feature_list ul {
			position: absolute;
			top: 0;
			list-style: none;	
			padding: 0;
			margin: 0;
		}

		ul#tabs {
			left: 0;
			z-index: 2;
			width: 320px;
		}

		ul#tabs li {
			font-size: 12px;
			font-family: Arial;
		}
		
		ul#tabs li img {
			padding: 5px;
			border: none;
			float: left;
			margin: 10px 10px 0 0;
		}

		ul#tabs li a {
			color: #222;
			text-decoration: none;	
			display: block;
			padding: 10px;
			height: 60px;
			outline: none;
		}

		ul#tabs li a:hover {
			text-decoration: underline;
		}

		ul#tabs li a.current {
			background:  url('Imagen.feature-tab-current.png');
			color: #FFF;
		}

		ul#tabs li a.current:hover {
			text-decoration: none;
			cursor: default;
		}

		ul#output {
			right: 0;
			width: 463px;
			height: 240px;
			position: relative;
		}

		ul#output li {
			position: absolute;
			width: 463px;
			height: 240px;
		}

		ul#output li a {
			position: absolute;
			bottom: 10px;
			right: 10px;
			padding: 8px 12px;
			text-decoration: none;
			font-size: 11px;
			color: #FFF;
			background: #000;
			-moz-border-radius: 5px;
		}
		
		ul#output li a:hover {
			background: #D33431;
		}
	</style>
	<script language="javascript">
		$(document).ready(function() {

			$.featureList(
				$("#tabs li a"),
				$("#output li"), {
					start_item	:	1
				}
			);

			/*
			
			// Alternative

			
			$('#tabs li a').featureList({
				output			:	'#output li',
				start_item		:	1
			});

			*/

		});
	</script>

Ya incluidas, coloca el código antes de:  

</head>

Por ultimo, solo coloca el siguiente código HTML como elemnto HTML/Javascript o en una entrada:

<div id="content">
	<div id="feature_list">
		<ul id="tabs">
			<li>
				<a href="javascript:;">
					<img src="Imagen.services.png" />
					<h3>Services</h3>
					<span>Lorem ipsum dolor sit amet consect</span>
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="Imagen.programming.png" />
					<h3>Programming</h3>
					<span>Lorem ipsum dolor sit amet consect</span>
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="Imagen.applications.png" />
					<h3>Applications</h3>
					<span>Lorem ipsum dolor sit amet consect</span>
				</a>
			</li>
		</ul>
		<ul id="output">
			<li>
				<img src="Imagen.sample1.jpg" />
				<a href="#">See project details</a>
			</li>
			<li>
				<img src="Imagen.sample2.jpg" />
				<a href="#">See project details</a>
			</li>
			<li>
				<img src="Imagen.sample3.jpg" />
				<a href="#">See project details</a>
			</li>
		</ul>

	</div>
</div>

Y listo, ya debería estar funcionando.  

FlShow Carousel

A continuación observa el carousel en acción.




DESCARGA:
 FlShow Carousel.zip(488KB):javascript, archivo xml, archivo swf, ejemplo e imagenes.


Implementar
Antes que nada edita el archivo xml y alojalo junto con los otros dos archivos a un servicio de alojamiento:




default.xmlCarousel.swfswfobject.js



Una vez alojados, coloca las URL en el siguiente código Javascript:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
	swfobject.embedSWF("Carousel.swf", "carousel1", "750", "500", "9.0.0", false, {xmlfile:"default.xml", loaderColor:"0xCCCCCC"});
</script>

Ya colocadas, incluye el código Javascript como elemento HTML/Javascript:

Y por ultimo, coloca antes de:

]]></b:skin>

el siguiente código CSS:

<style type="text/css">
	html, body {
	      font: 12pt Georgia, Times, serif;
	      height: 100%;
	      color: white;
	      background-color: black;
			}
	.carousel_container {
	      width: 750px;
	      height: 500px;
	      margin: 0px auto;
	      border: 1px solid gray;
			}
</style>	

Guardamos la plantilla y listo, ya deberia de estar funcionando.

Start/Stop Slider

Solo observa el slide en acción:




DESCARGA:
 Start/Stop Slider.zip(277KB):javascript, archivo CSS, ejemplo e imagenes.


Implementar
Antes que nada edita el archivo CSS y alojalo junto con los dos archivos javascript a un servicio de alojamiento:




style.cssjquery-1.2.6.jsstartstop-slider.js



Una vez alojados, coloca las URL de los tres archivos en el siguiente código: 

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" />
	<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
	<script type="text/javascript" src="js/startstop-slider.js"></script>

Ahora coloca el mismo código anterior antes de:  

</head>

Por ultimo, solo incluye el siguiente código HTML en una entrada o como elemento HTML/Javascript:

<div id="page-wrap">	
	<div id="slider">
		<div id="mover">
			<div id="slide-1" class="slide">
				<h1>Garden Rack</h1>	
				<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>	
				<a href="#"><img src="Imagen.slide-1-image.png" alt="learn more" /></a>		
			</div>	
			<div class="slide">
				<h1>Tulip Bulbs</h1>	
				<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>	
				<a href="#"><img src="Imagen.slide-2-image.png" alt="learn more" /></a>
					
			</div>	
			<div class="slide">
				<h1>Garden Gloves</h1>	
				<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>	
				<a href="#"><img src="Imagen.slide-3-image.png" alt="learn more" /></a>	
			</div>
		</div>
	</div>	
</div>


Y listo, ya debería estar funcionando.  

Panning Slideshow

Solo tienes que ver la galería en acción.



DESCARGA:
 Panning Slideshow.zip(269KB):jQuery, javascript, archivo CSS, ejemplo e imagenes.


Implementar
 
Recuerda editar el archivo CSS antes de alojarlo y fija las rutas de acceso a las imagenes. 




panning-slideshow.css



Una vez editado, alójalo a un servicio de alojamiento junto con los otros tres archivos:




image-rotator.jsjquery.easing.1.3.jsjquery.timer.js



Incluye los archivos Javascript antes de: 

</head>

y en el orden específico como se muestra en el siguiente ejemplo:

 <link rel="stylesheet" href="paneo pase de diapositivas.css"/>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="js/jquery.easing.1.3.js"></script>
 <script src="js/jquery.timer.js"></script>
 <script src="image-rotator.js"></script>

Ahora, coloca el siguiente código en una entrada o como elemento HTML/Javascript:

<div id="window">		
		<ul id="slideshow">
<li class="box1"><img src="Imagen.Tigre.jpg" alt="Tigre"/></li>
<li class="box2"><img src="Imagen.Guacamaya.jpg" alt="Guacamaya"/></li>
<li class="box3"><img src="Imagen.Aguila.jpg" alt="Aguila"/></li>
<li class="box4"><img src="Imagen.Panda.jpg" alt="Panda"/></li>
		</ul>
</div>

Y listo, ya debería estar funcionando. 

Easy Slider

Solo tienes que observar la galería en acción.
         




DESCARGA:
 Easy Slider.zip(218KB):archivos jQuery, ejemplo e imagenes.


Implementar
 
Aloja los dos archivos Jquery a un servicio de alojamiento:




easySlider1.5.jsjquery.js



Incluyelos antes de:

</head>
 
y en el orden específico como se muestra en el siguiente ejemplo:

<script src='js/jquery.js' type='text/javascript'/>
<script src='js/easySlider1.5.js' type='text/javascript'/>
  <script type='text/javascript'>
	$(document).ready(function(){	
	$("#slider").easySlider({
		auto: true,
		continuous: true 
		});
		});	
   </script>

Ahora coloca el siguiente código CSS antes de:

]]></b:skin>


<style type='text/css'>

	body {
		background:#fff url(Imagen.bg_body.gif) repeat-x;
		font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
		color:#333;
		line-height:180%;
		margin:0;
		padding:0;
		text-align:center;
	}
	h1{
		font-size:180%;
		font-weight:normal;
		margin:0;
		padding:20px;
		}
	h2{
		font-size:160%;
		font-weight:normal;
		}	
	h3{
		font-size:140%;
		font-weight:normal;
		}	
	img{border:none;}
	pre{
		display:block;
		font:12px "Courier New", Courier, monospace;
		padding:10px;
		border:1px solid #bae2f0;
		background:#e3f4f9;	
		margin:.5em 0;
		width:674px;
		}	
			
        .graphic, #prevBtn, #nextBtn{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }	

	#container{	
		margin:0 auto;
		position:relative;
		text-align:left;
		width:696px;
		background:#fff;		
		margin-bottom:2em;
		}	
	#header{
		height:144px;
		background:#5DC9E1;
		color:#fff;
		}				
	#content{
		position:relative;
		}			


	#slider{}	
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li{ 
		
		width:696px;
		height:241px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		}	
	#nextBtn{ 
		left:696px;
		}														
	#prevBtn a, #nextBtn a{  
		display:block;
		width:30px;
		height:77px;
		background:url(Imagen.btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a{ 
		background:url(Imagen.btn_next.gif) no-repeat 0 0;	
		}												
</style>

Por ultimo, solo coloca el siguiente código HTML donde quieres que aparesca la galería:

<div id='container'>
 <div id='content'>
  <div id='slider'>
  <ul>				
  <li><a href='#'><img alt='Css Template Preview' src='Imagen.01.jpg'/></a></li>
  <li><a href='#'><img alt='Css Template Preview' src='Imagen.02.jpg'/></a></li>
  <li><a href='#'><img alt='Css Template Preview' src='Imagen.03.jpg'/></a></li>
  <li><a href='#'><img alt='Css Template Preview' src='Imagen.04.jpg'/></a></li>
  <li><a href='#'><img alt='Css Template Preview' src='Imagen.05.jpg'/></a></li>	
  </ul>
  </div>
 </div>
</div>

Y listo, ya debería estar funcionando. 

s3Slider Jquery Plugin

Solo tienes que observar los slideshows en acción.

Primer slideshow:    


Segundo slideshow:



DESCARGA:
 s3Slider Jquery Plugin.zip(572KB):archivos Javascript, ejemplos e imágenes.


Implementar
 
Aloja el archivo javascript a un servicio de alojamiento:




s3Slider.js



una vez alojado, coloca antes de:

</head>

 
el siguiente código que es para el primer slideshow:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3500
        });
    });
</script>

Ahora incluye antes de: 

]]></b:skin>

el siguiente código CSS:

<style type="text/css" media="screen">
#slider {
    width: 410px; 
    height: 300px; 
    position: relative; 
	overflow: hidden; 
}
#sliderContent {
    width: 410px; 
    position: absolute;
	top: 0;
	margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
	display: none;
}
.sliderImage span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 384px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
	clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
ul { list-style-type: none;}
</style>

Después, coloca el siguiente código HTML en una entrada o como elemento HTML/Javascript:

<div id="slider">
        <ul id="sliderContent">
            <li class="sliderImage">
                <a href=""><img src="Imagenes_ejemplo.410.1.jpg" alt="1" /></a>
                <span class="top"><strong>Title text 1</strong><br />Content text...</span>
            </li>
            <li class="sliderImage">
                <a href=""><img src="Imagenes_ejemplo.410.2.jpg" alt="2" /></a>
                <span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
            </li>
            <li class="sliderImage">
                <img src="Imagenes_ejemplo.410.3.jpg" alt="3" />
                <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
            </li>
            <li class="sliderImage">
                <img src="Imagenes_ejemplo.410.4.jpg" alt="4" />
                <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
            </li>
            <li class="sliderImage">
                <img src="Imagenes_ejemplo.410.5.jpg" alt="5" />
                <span class="top"><strong>Title text 2</strong><br />Content text...</span>
            </li>
            <div class="clear sliderImage"></div>
        </ul>
    </div>

Recuerda que los tres códigos anteriores son para el primer slideshow.

Ahora los siguientes códigos, son para el segundo slideshow. 

Incluye antes de: 

</head>


el siguiente código: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider1').s3Slider({
            timeOut: 4000 
        });
    });
</script>

Después incluye antes de:

]]></b:skin>

el siguiente código CSS:

<style type="text/css" media="screen">
#slider1 {
    width: 720px; 
    height: 300px; 
    position: relative; 
	overflow: hidden; 
}

#slider1Content {
    width: 720px; 
    position: absolute;
	top: 0;
	margin-left: 0;
}
.slider1Image {
    float: left;
    position: relative;
	display: none;
}
.slider1Image span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 694px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
	clear: both;
}
.slider1Image span strong {
    font-size: 14px;
}
.left {
	top: 0;
    left: 0;
	width: 110px !important;
	height: 280px;
}
.right {
	right: 0;
	bottom: 0;
	width: 90px !important;
	height: 290px;
}
ul { list-style-type: none;}
</style>

Por ultimo, coloca el siguiente código HTML en una entrada o como elemento HTML/Javascript:

<div id="slider1">
        <ul id="slider1Content">
            <li class="slider1Image">
                <a href=""><img src="Imagenes_ejemplo.wide.1.jpg" alt="1" /></a>
                <span class="left"><strong>Title text 1</strong><br />Content text...</span></li>
            <li class="slider1Image">
                <a href=""><img src="Imagenes_ejemplo.wide.2.jpg" alt="2" /></a>
                <span class="right"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span></li>
            <li class="slider1Image">
                <img src="Imagenes_ejemplo.wide.3.jpg" alt="3" />
                <span class="right"><strong>Title text 2</strong><br />Content text...</span></li>
            <li class="slider1Image">
                <img src="Imagenes_ejemplo.wide.4.jpg" alt="4" />
                <span class="left"><strong>Title text 2</strong><br />Content text...</span></li>
            <li class="slider1Image">
                <img src="Imagenes_ejemplo.wide.5.jpg" alt="5" />
                <span class="right"><strong>Title text 2</strong><br />Content text...</span></li>
            <div class="clear slider1Image"></div>
        </ul>
    </div>

Guardamos y listo, ya deberían de estar funcionando.

Thiny Slideshow

Solo tienes que observar la galería en acción.




DESCARGA:
Tiny Slideshow.zip(713KB):javascript, archivo CSS, ejemplo e imagenes.


Implementar
Primero edita el archivo CSS:




style.css



Una vez editado, alojalo a un servicio de alojamiento junto con el archivo Javascript:




compressed.js



Ya editado el CSS y alojados, coloca las URL en el siguiente código Javascript:

<link rel="stylesheet" href="style.css" />
<div id="wrapper">
		<div id="fullsize">
			<div id="imgprev" class="imgnav" title="Previous Image"></div>
			<div id="imglink"></div>
			<div id="imgnext" class="imgnav" title="Next Image"></div>
			<div id="image"></div>
			<div id="information">
			<h3></h3>
			<p></p>
			</div>
		</div>
		<div id="thumbnails">
			<div id="slideleft" title="Slide Left"></div>
			<div id="slidearea">
			<div id="slider"></div>
			</div>
			<div id="slideright" title="Slide Right"></div>
		</div>
	</div>
<script type="text/javascript" src="compressed.js"></script>
<script type="text/javascript">
	$('slideshow').style.display='none';
	$('wrapper').style.display='block';
	var slideshow=new TINY.slideshow("slideshow");
	window.onload=function(){
		slideshow.auto=true;
		slideshow.speed=5;
		slideshow.link="linkhover";
		slideshow.info="information";
		slideshow.thumbs="slider";
		slideshow.left="slideleft";
		slideshow.right="slideright";
		slideshow.scrollSpeed=4;
		slideshow.spacing=5;
		slideshow.active="#fff";
		slideshow.init("slideshow","image","imgprev","imgnext","imglink");
	}
</script>

Ahora el mismo código Javascript, colócalo antes de:

</head>

Y por ultimo, solo coloca el código HTML en donde quieres que se vea el slideshow:

<ul id="slideshow">
		<li>
			<h3>TinySlideshow v1</h3>
			<span>Imagen.orange-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="Imagen.orange-fish-thumb.jpg" alt="Orange Fish" /></a>
		</li>
		<li>
			<h3>Sea Turtle</h3>
			<span>Imagen.sea-turtle.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<img src="Imagen.sea-turtle-thumb.jpg" alt="Sea Turtle" />
		</li>
		<li>
			<h3>Red Coral</h3>
			<span>Imagen.red-coral.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="Imagen.red-coral-thumb.jpg" alt="Red Coral" /></a>
		</li>
		<li>
			<h3>Coral Reef</h3>
			<span>Imagen.coral-reef.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="Imagen.coral-reef-thumb.jpg" alt="Coral Reef" /></a>
		</li>
		<li>
			<h3>Blue Fish</h3>
			<span>Imagen.blue-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<img src="thumbnails/blue-fish-thumb.jpg" alt="Blue Fish" />
		</li>
		<li>
			<h3>TinySlideshow v.2</h3>
			<span>photos/yellow-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="Imagen.yellow-fish-thumb.jpg" alt="Yellow Fish" /></a>
		</li>
		<li>
			<h3>Squid</h3>
			<span>Imagen.squid.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="Imagen.squid-thumb.jpg" alt="Squid" /></a>
		</li>
		<li>
			<h3>Small Fish</h3>
			<span>Imagen.small-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="Imagen.small-fish-thumb.jpg" alt="Small Fish" /></a>
		</li>
	</ul>

Nada más coloca las imagenes en sus respectivos lugares y listo ya deberia de estar funcionando.

T

Menú



Fading Menú

Coloca el cursor encima del menú para verlo en acción:

Demo  


DESCARGA:
 Fading Menú.zip(26KB):jQuery, archivo CSS, ejemplo e imagenes.


Implementar
Primero que nada, edita el archivo CSS y alojalo junto con los otros tres archivos javascript a un servicio de alojamiento:




main.cssjquery.jsjquery-color.jsmain.js



Luego, coloca las URL de los archivos en el siguiente código: 

<link rel="stylesheet" type="text/css" href="main.css"/>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery-color.js"></script>
	<script type="text/javascript" src="main.js"></script>

Una vez colocadas, incluye todo el código anterior antes de la etiqueta:  

</head>

Y por ultimo, solo incluye el siguiente código HTML en una entrada o como elemento HTML/Javascript:

<div id="pageWrap">
	<div id="pageBody">
		<a class="hoverBtn" href="#">Home</a>
		<a class="hoverBtn" href="#">Google</a>
		<a class="hoverBtn" href="#">Twitter</a>
		<a class="hoverBtn" href="#">Blogger</a>
		<a class="hoverBtn" href="#">Contact</a>
		<div class="clear"></div>	
	</div>
</div>


Guardamos y listo, ya debería estar funcionando el menú.  

Tabbed Menú

Solo observa el slide en acción:




DESCARGA:
 Tabbed Menú.zip(51KB):jQuery, ejemplo e imagenes.


Implementar
Primero aloja el archivo javascript a un servicio de alojamiento:




jquery-1.3.1.min.js



Después, coloca la URL del archivo javascript en el siguiente código: 

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {	

  //Get all the LI from the #tabMenu UL
  $('#tabMenu > li').click(function(){
        
    //remove the selected class from all LI    
    $('#tabMenu > li').removeClass('selected');
    
    //Reassign the LI
    $(this).addClass('selected');
    
    //Hide all the DIV in .boxBody
    $('.boxBody div').slideUp('1500');
    
    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
    $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
    
  }).mouseover(function() {

    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest    
    $(this).addClass('mouseover');
    $(this).removeClass('mouseout');   
    
  }).mouseout(function() {
    
    //Add and remove class
    $(this).addClass('mouseout');
    $(this).removeClass('mouseover');    
    
  });

  //Mouseover with animate Effect for Category menu list
  $('.boxBody #category li').mouseover(function() {

    //Change background color and animate the padding
    $(this).css('backgroundColor','#888');
    $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
  }).mouseout(function() {
    
    //Change background color and animate the padding
    $(this).css('backgroundColor','');
    $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
  });  
	
  //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
  $('.boxBody li').click(function(){
    window.location = $(this).find("a").attr("href");
  }).mouseover(function() {
    $(this).css('backgroundColor','#888');
  }).mouseout(function() {
    $(this).css('backgroundColor','');
  });  	
	
});

</script>
<style>

body{font-family:arial;font-size:10px;color:#ccc;background-color:#555}
a {color:#ccc;text-decoration:none;}
a:hover {color:#ccc;text-decoration:none}

#tabMenu {margin:0;padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}

li.comments {background:url(Imagen.tabComment.gif) no-repeat 0 -32px;}
li.posts {background:url(Imagen.tabStar.gif) no-repeat 0 -32px;}
li.category {background:url(Imagen.tabFolder.gif) no-repeat 0 -32px;}
li.famous {background:url(Imagen.tabHeart.gif) no-repeat 0 -32px;}
li.random {background:url(Imagen.tabRandom.gif) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {width:227px}
.boxTop {background:url(Imagen.boxTop.gif) no-repeat;height:11px;clear:both}
*html .boxTop {margin-bottom:-2px;}
.boxBody {background-color:#282828;}
.boxBottom {background:url(Imagen.boxBottom.gif) no-repeat;height:11px;}

.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(Imagen.arrow.gif)}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li span {font-size:8px;font-style:italic; color:#888;}
</style>

Ahora coloca todo el código anterior antes de la etiqueta:  

</head>

Por ultimo, solo incluye el siguiente código HTML en una entrada o como elemento HTML/Javascript:

<div class='box'>
<ul id='tabMenu'>
  <li class='posts selected'/>
  <li class='comments'/>
  <li class='category'/>
  <li class='famous'/>
  <li class='random'/>
</ul>
<div class='boxTop'/>
<div class='boxBody'>
  <div class='show' id='posts'>
    <ul>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Simple JQuery Modal Window Tutorial.</li>
      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
      <li>Exclusive RSS Icons from Queness.</li>
      <li>50 Monochromatic Website Designs.</li>
      <li>Food Plates and Creative Dishware Designs.</li>
      <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
      <li class='last'>New Smashing Freebies For Designers and Bloggers.</li>
    </ul>  
  </div>  
  <div id='comments'>
    <ul>
      <li><a>jQuery Tabbed Navigation Menu. <span> - kevin</span></a></li>
      <li><a>You can add links in here! <span> - kevin</span></a></li>
      <li><a>It's easy to understand. Though it's not the best, but hell yeah it works. <span> - kevin</span></a></li>
      <li><a>I hope you will like it. <span> - kevin</span></a></li>
      <li><a>My next tutorial will be jQuery-based Accordion. <span> - kevin</span></a></li>
      <li class='last'><a>And, I'm working on a free wordpress template as well : ) <span> - kevin</span></a></li>
    </ul>
  </div>
  <div id='category'>
    <ul>
      <li><a href='#'>ajax</a></li>
      <li><a href='#'>css-html</a></li>
      <li><a href='#'>freebies</a></li>
      <li><a href='#'>icon</a></li>
      <li><a href='#'>inspiration</a></li>
      <li><a href='#'>javascript</a></li>
      <li><a href='#'>logo</a></li>
      <li><a href='#'>photography</a></li>
      <li><a href='#'>photoshop</a></li>
      <li><a href='#'>php</a></li>
      <li><a href='#'>seo</a></li>
      <li><a href='#'>tutorial</a></li>
      <li><a href='#'>usability</a></li>
      <li><a href='#'>wallpaper</a></li>
    </ul>  
  </div>
  <div id='famous'>
    <ul>
      <li>Simple JQuery Modal Window Tutorial.</li>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
      <li class='last'>Exclusive RSS Icons from Queness.</li>
    </ul>  
  </div>
  <div id='random'>
    <ul>
      <li>50 Monochromatic Website Designs.</li>
      <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
      <li>Simple JQuery Modal Window Tutorial.</li>
      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Exclusive RSS Icons from Queness.</li>
      <li>New Smashing Freebies For Designers and Bloggers.</li>
      <li class='last'>Food Plates and Creative Dishware Designs.</li>
    </ul>    
  </div>        
</div>
<div class='boxBottom'/>
</div>


Y listo, ya debería estar funcionando el menú.  

Lava Lamp

Coloca el cursor encima del menú para verlo en acción:




DESCARGA:
 Lava Lamp.zip(24KB):javascript, ejemplo e imagenes.


Implementar
Primero que nada aloja los tres archivos javascript a un servicio de alojamiento:




jquery-1.2.3.min.jsjquery.easing.min.jsjquery.lavalamp.min.js



Una vez alojados, incluye las URL de los tres archivos javascript en el siguiente código: 

<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

Ahora coloca todo el código antes de:  

</head>

Después, coloca antes de:

]]></b:skin>

el siguiente código CSS:

.lavaLampWithImage {
            position: relative;
            height: 29px;
            width: 421px;
            background: url("Imagen.bg.gif") no-repeat top;
            padding: 15px;
            margin: 10px 0;
            overflow: hidden;
        }
                .lavaLampWithImage li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampWithImage li.back {
                        background: url("Imagen.lava.gif") no-repeat right -30px;
                        width: 9px; height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                        .lavaLampWithImage li.back .left {
                            background: url("Imagen.lava.gif") no-repeat top left;
                            height: 30px;
                            margin-right: 9px; /* 7px is the width of the rounded shape */
                        }
                    .lavaLampWithImage li a {
                        font: bold 14px arial;
                        text-decoration: none;
                        color: #fff;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;    
                    }
                        .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
                            border: none;
                        }

        .lavaLampNoImage {
            position: relative;
            height: 29px;
            width: 421px;
            background-color: white;
            padding: 15px;
            margin: 10px 0;
            overflow: hidden;
            border: 1px solid gray;
        }
                .lavaLampNoImage li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampNoImage li.back {
                        border: 1px solid #000;
                        background-color: #e6e8ea;
                        width: 9px;
                        height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                    .lavaLampNoImage li a {
                        font: bold 14px arial;
                        text-decoration: none;
                        color: #000;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;
                    }
                        .lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
                            border: none;
                        }                    

        .lavaLampBottomStyle {
            position: relative;
            height: 29px;
            width: 421px;
            background-color: white;
            padding: 15px;
            margin: 10px 0;
            overflow: hidden;
            border: 1px solid gray;
        }
                .lavaLampBottomStyle li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampBottomStyle li.back {
                        border-bottom: 5px solid blue;
                        width: 9px;
                        height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                    .lavaLampBottomStyle li a {
                        font: bold 14px arial;
                        text-decoration: none;
                        color: #000;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;
                    }   
                        .lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
                            border: none;
                        }           

Por ultimo, incluye los siguientes códigos HTML en una entrada o como elemento HTML/Javascript:

Primer menú:

<ul class="lavaLampNoImage" id="2">
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Segundo menú:

<ul class="lavaLampBottomStyle" id="3">
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Guardamos y listo, ya deberían estar funcionando.  

Apycom-12-Steel Blue

Coloca el cursor encima del menú para verlo en acción:




DESCARGA:
 Apycom-12-Steel Blue.zip(65KB):jQuery, javascript, archivo CSS, ejemplo e imagenes.


Implementar
Edita el archivo CSS y alojalo junto con los otros dos archivos a un servicio de alojamiento:




menu.cssjquery.jsmenu.js



Una vez alojados, incluye las URL de los tres archivos en el siguiente código: 

<link type="text/css" href="menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>

Ya incluidas, coloca el código antes de:  

</head>

Ahora coloca antes de:

]]></b:skin>

el siguiente codigo CSS:

<style type="text/css">
* { margin:0;
    padding:0;
}
html { background:#333333; }
body {
    margin:40px auto;
    width:630px;
    height:466px;
    background:#454545;
    overflow:hidden;
}
div#menu {
margin-left:120px;
position:relative;
top:25px;
}
div#copyright { display: none; }
</style>


Por ultimo, solo coloca el siguiente código HTML en una entrada o como elemento HTML/Javascript:

<div id="menu">
    <ul class="menu">
        <li><a href="#" class="parent"><span>Home</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul></div>
                        </li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul></div>
        </li>
        <li><a href="#" class="parent"><span>Product Info</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                    </ul></div>
                </li>
                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
                    <div><ul>
                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
                <li><a href="#"><span>Sub Item 4</span></a></li>
                <li><a href="#"><span>Sub Item 5</span></a></li>
                <li><a href="#"><span>Sub Item 6</span></a></li>
                <li><a href="#"><span>Sub Item 7</span></a></li>
            </ul></div>
        </li>
        <li><a href="#"><span>Help</span></a></li>
        <li class="last"><a href="#"><span>Contacts</span></a></li>
    </ul>
</div>

Y listo, ya debería estar funcionando.  

Navigatión Effect

Solo tienes que colocar el cursor encima del menú para verlo en acción.




DESCARGA:
 Navigatión Effect.zip(35KB):jQuery, javascript, archivo CSS, ejemplo e imagenes.


Implementar
 
Edita el archivo CSS antes de alojarlo junto con los otros dos archivos a un servicio de alojamiento:




styles.cssjquery.jssliding_effect.js



Ahora incluye las URL de los tres archivos alojados en el siguiente código: 

<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="sliding_effect.js"></script>

Una vez incluidas, coloca el código antes de:  

</head>

Por ultimo, solo tienes que colocar el siguiente código HTML como elemnto HTML/Javascript o en una entrada:

<div id="navigation-block">
            <ul id="sliding-navigation">
                <li class="sliding-element"><h3>Navigation Title</h3></li>
                <li class="sliding-element"><a href="#">Link 1</a></li>
                <li class="sliding-element"><a href="#">Link 2</a></li>
                <li class="sliding-element"><a href="#">Link 3</a></li>
                <li class="sliding-element"><a href="#">Link 4</a></li>
                <li class="sliding-element"><a href="#">Link 5</a></li>
            </ul>
        </div>	


Y listo, ya debería estar funcionando.  

Garage Door Style Menú

Coloca el cursor encima del menú para verlo en acción.




DESCARGA:
Garage Door Style Menú.zip(66KB):jQuery, javascript, archivo CSS, ejemplo e imagenes.


Implementar
 
Edita el archivo CSS antes de alojarlo y fija las rutas de acceso a las imagenes. 




style.css



Una vez editado, alójalo a un servicio de alojamiento junto con los otros dos archivos:




jquery-1.2.6.min.jsjquery.backgroundPosition.js



Asegurate de incluirlos antes de:

</head>

 
Todos los archivos Javascript deberán de ir en el orden específico como en el siguiente ejemplo:

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript"src="js/jquery.backgroundPosition.js"></script>

Ahora el siguiente código colocalo en una entrada o como elemento HTML/Javascript:

 <ul id="menuback">
 <li class="shutter" id="shutter1"><a class="link" href="#1">Link 1</a></li>
 <li class="shutter" id="shutter2"><a class="link" href="#2">Link 2</a></li>
 <li class="shutter" id="shutter3"><a class="link" href="#3">Link 3</a></li>
 <li class="shutter" id="shutter4"><a class="link" href="#4">Link 4</a></li>
	</ul>

Y listo, ya debería estar funcionando.

Accordión Menú

En el primer menú haz clic sobre el y en el segundo solo tienes que colocar el cursor encima del menú.




DESCARGA:
       
Accordión Menú.zip(19KB):jQuery, javascript, ejemplo e iconos.


Implementar
 
Aloja el archivo jquery a un servicio de alojamiento:




jquery.js



Incluyelo antes de:

</head>

y en el orden específico como se muestra en el siguiente ejemplo:

 
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
	//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
	$("#firstpane p.menu_head").click(function()
    {
	$(this).css({backgroundImage:"url(Imagen.Flecha abajo.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
       	$(this).siblings().css({backgroundImage:"url(Imagen.Flecha izquierda.png)"});
	});
	//slides the element with class "menu_body" when mouse is over the paragraph
	$("#secondpane p.menu_head").mouseover(function()
    {
	$(this).css({backgroundImage:"url(Imagen.Flecha abajo.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
        $(this).siblings().css({backgroundImage:"url(Imagen.Flecha izquierda.png)"});
	});
});
</script>

Ahora, coloca el siguiente código donde quieres que aparezca el primer menú o el 

segundo, ya sea en una entrada o como elemento HTML/Javascript:

Primer menú:

<div style="float:left" > 
<div id="firstpane" class="menu_list"> 
 <p class="menu_head">Header-1</p>
	<div class="menu_body">
	<a href="#">Link-1</a>
        <a href="#">Link-2</a>
        <a href="#">Link-3</a>	
	</div>
 <p class="menu_head">Header-2</p>
	<div class="menu_body">
	<a href="#">Link-1</a>
        <a href="#">Link-2</a>
        <a href="#">Link-3</a>	
	</div>
 <p class="menu_head">Header-3</p>
	<div class="menu_body">
        <a href="#">Link-1</a>
        <a href="#">Link-2</a>
        <a href="#">Link-3</a>			
        </div>
</div>  
</div>

Segundo menú:

<div style="float:left; margin-left:20px;"> 
<div class="menu_list" id="secondpane"> 
 <p class="menu_head">Header-1</p>
	 <div class="menu_body">
	 <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>	
	 </div>
 <p class="menu_head">Header-2</p>
	 <div class="menu_body">
	 <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>	
         </div>
 <p class="menu_head">Header-3</p>
	 <div class="menu_body">
         <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>			
         </div>
</div>      
</div>

Y por ultimo, edita el siguiente código css cambiandole el tipo de letra y color de fuente: 

<style type="text/css">
body {
	margin: 10px auto;
	font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
        background: #1C1C1C;
}
.menu_list {	
	width: 300px;
}
.menu_head {
	padding: 10px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
        font-weight:bold;
        color:#FFFFFF;
        background: #660000 url(Imagen.Flecha izquierda.png) center right no-repeat;
}
.menu_body {
	display:none;
}
.menu_body a{
        display:block;
        color:#000000;
        background-color:#FFCC00;
        padding-left:10px;
        font-weight:bold;
        text-decoration:none;
}
.menu_body a:hover{
        color: #FFFFFF;
        text-decoration:underline;
  }
</style>

y lo colocas antes de:

]]></b:skin>

Guardamos y listo, ya debería estar funcionando.

Apycom-14-Steel Blue

Coloca el cursor encima del menú para verlo en acción.




DESCARGA:
Apycom-14-Steel Blue.zip(108KB):jQuery, archivo CSS, ejemplo e imagenes.


Implementar
 
Edita el archivo CSS colocando las URL de tus imagenes en sus respectivos lugares. 




menu.css



Una vez editado, alójalo a un servicio de alojamiento junto con los otros dos archivos jquery:




jquery.jsmenu.js



Asegurate de incluirlos antes de:

</head>

 
Todos los archivos que alojaste, deberán de ir en el orden específico como en el siguiente ejemplo:

<link type="text/css" href="menu.css"rel="stylesheet" />
<script type="text/javascript"src="jquery.js"></script>
<script type="text/javascript"src="menu.js"></script>

Después, coloca antes de:

]]></b:skin>
 
el siguiente código:

 
<style type="text/css">
* {
    margin:0;
    padding:0;
}
html { background:#222; }
body {
    margin:40px auto;
    height:362px;
    width:585px;
    background:url(Imagen.back.png);
    border:1px solid #333;
    overflow:hidden;
}
div#menu { margin:65px 0 0 40px; }
div#copyright { display: none; }
</style>

Ahora, coloca el siguiente código en una entrada o como elemento HTML/Javascript:

 <div id="menu">
 <ul class="menu">
 <li><a href="#"
class="parent"><span>Home</span></a>
 <div><ul>
 <li><a href="#" class="parent"><span>Sub Item 1</span></a>
 <div><ul>
 <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
 <div><ul>
 <li><a href="#"><span>Sub Item 1.1.1     </span></a></li>
 <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
 </ul></div>
 </li>
 <li><a href="#"><span>Sub Item 1.2 </span></a></li>
 <li><a href="#"><span>Sub Item 1.3</span></a></li>
 <li><a href="#"><span>Sub Item 1.4</span></a></li>
 <li><a href="#"><span>Sub Item 1.5</span></a></li>
 <li><a href="#"><span>Sub Item 1.6</span></a></li>
 <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
 <div><ul>
 <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
 <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
 </ul></div>
 </li>
 </ul></div>
 </li>
 <li><a href="#"><span>Sub Item 2 </span></a></li>
 <li><a href="#"><span>Sub Item 3</span></a></li>
 </ul></div>
 </li>
 <li><a href="#" class="parent"><span>Product Info</span></a>
 <div><ul>
 <li><a href="#" class="parent"><span>Sub Item 1</span></a>
 <div><ul>
 <li><a href="#"><span>Sub Item 1.1</span></a></li>
 <li><a href="#"><span>Sub Item 1.2</span></a></li>
 </ul></div>
 </li>
 <li><a href="#" class="parent"><span>Sub Item 2</span></a>
 <div><ul>
 <li><a href="#"><span>Sub Item 2.1</span></a></li>
 <li><a href="#"><span>Sub Item 2.2</span></a></li>
 </ul></div>
 </li>
 <li><a href="#"><span>Sub Item 3</span></a></li>
 <li><a href="#"><span>Sub Item 4</span></a></li>
 <li><a href="#"><span>Sub Item 5</span></a></li>
 <li><a href="#"><span>Sub Item 6</span></a></li>
 <li><a href="#"><span>Sub Item 7</span></a></li>
 </ul></div>
 </li>
 <li><a href="#"><span>Help</span></a></li>
 <li class="last"><a href="#"><span>Contacts</span></a></li>
 </ul>
 </div>

Y listo, ya debería estar funcionando.

Fresh Bottom Slide Out Menú

Coloca el cursor encima del menú para verlo en acción.
         



DESCARGA:
Fresh Bottom Slide Out Men.zip(61KB):jQuery, archivo CSS, ejemplo e iconos.


Implementar
 
Edita el archivo CSS colocando las URL de tus iconos en sus respectivos lugares. 




style.css



Una vez editado, alójalo a un servicio de alojamiento junto con el archivo jquery:




jquery-1.4.2.min.js



Asegurate de incluirlos antes de:

</head>

 
Los dos archivos que alojaste, deberán de ir en el siguiente código:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
        $(function() {
            $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).stop(true,true).animate({
                            'bottom':'-15px'
                        }, 300);
                    $('i',$this).stop(true,true).animate({
                            'top':'-10px'
                        }, 400);
                },
                function () {
                    var $this = $(this);
                    $('a',$this).stop(true,true).animate({
                            'bottom':'-95px'
                        }, 300);
                    $('i',$this).stop(true,true).animate({
                            'top':'50px'
                        }, 400);
                }
            );
        });
        </script>

Nada mas coloca el siguiente código en donde quieres que aparesca el menú ya sea en una entrada o como HTML/Javascript:

 <div class="container">
    <ul id="menu">
      <li>
        <a>
        <i class="icon_about"></i>
        <span class="title">About</span>
        <span class="description">Learn about us and our services</span>
        </a>
      </li>
      <li>
        <a>
        <i class="icon_work"></i>
        <span class="title">Work</span>
        <span class="description">See our work and portfolio</span>
        </a>
      </li>
      <li>
        <a>
        <i class="icon_help"></i>
        <span class="title">Help</span>
        <span class="description">Talk to our support</span>
        </a>
       </li>
       <li>
         <a>
         <i class="icon_search"></i>
         <span class="title">Search</span>
         <span class="description">Search our website</span>
         </a>
       </li>
     </ul>
</div>

Y listo, ya debería estar funcionando.


NOTA
Por ultimo, si necesitas mas iconos, visita la pagina de: Dryicons, ahí encontraras una gran cantidad de ellos.
 

T

Galería



Viewer

Coloca el cursor encima del menú para verlo en acción:




DESCARGA:
 Viewer.zip(80KB):javascript, archivos CSS, ejemplo e imagenes.


Implementar
Antes que nada aloja los cuatro archivos a un servicio de alojamiento:




_web.cssstyle.cssmootools-1.2-core.js_class.viewer.js



Una vez alojados, incluye las URL de los cuatro archivos en el siguiente código: 

<link rel="stylesheet" href="_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="mootools-1.2-core.js"></script>
<script type="text/javascript" src="_class.viewer.js"></script>
<script type="text/javascript">//<![CDATA[
	window.addEvent('domready',function(){
		var V5 = new viewer($('box5').getChildren(),{
			onWalk: function(current_index){
				handles5.removeClass('active');
				handles5[current_index].addClass('active');
			}
		});
		var handles5 = $$('#handles5 span');
		handles5.each(function(el,i){el.addEvent('click',V5.walk.bind(V5,[i,true]));});
	});
//]]></script>

Ahora coloca el código antes de:  

</head>

Por ultimo, solo incluye el siguiente código HTML en una entrada o como elemento HTML/Javascript:

<div id="cont">
<div class="sample">
	<div class="mask">
		<div id="box5">

			<div>
				<h3>1. Lorem ipsum dolor sit amet</h3>
				<img src="Imagen.img1.jpg" alt="Photo" />
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
			</div>

			<div>
				<h3>2. Nullam porttitor tortor et sem</h3>
				<img src="Imagen.img2.jpg" alt="Photo" />
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p>
				<p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
			</div>

			<div>
				<h3>3. Aenean consectetuer nibh sedt</h3>
				<img src="Imagen.img3.jpg" alt="Photo" />
				<ul>
					<li>Duis consequat laoreet libero.</li>
					<li>Nullam scelerisque porta arcu.</li>
					<li>Praesent ut tortor quis nunc vehicula interdum.</li>
					<li>Cras ultrices venenatis justo.</li>
					<li>Duis eu ligula at justo tempus varius.</li>
					<li>Vivamus mattis ante et arcu.</li>
					<li>Nulla eleifend dignissim neque.</li>
					<li>Donec ut elit vel nisi mollis volutpat.</li>
				</ul>
			</div>

			<div>
				<h3>4. Pellentesque ac dolor</h3>
				<img src="Imagen.img4.jpg" alt="Photo" />
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
			</div>

			<div>
				<h3>5. Pellentesque ac dolor</h3>
				<img src="Imagen.img5.jpg" alt="Photo" />
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
			</div>

		</div>
	</div>
	<p class="buttons" id="handles5">
		<span>1. Uno</span>
		<span>2. Dos</span>
		<span>3. Tres</span>
		<span>4. Cuatro</span>
		<span>5. Cinco</span>
	</p>
</div>
</div>

Nada más coloca las URL de las imagenes y listo, ya debería estar funcionando.  

Slot Machine Tabs

Haz clic en las pestañas del menú para verlo en acción.
 



DESCARGA:
Slot Machine Tabs.zip(78KB):jQuery, archivo CSS, ejemplo e imagenes.


Implementar
 
Edita el archivo CSS fijando la url de la imagen antes de alojarlo a un servicio de alojamiento. 




style.css



Una vez editado, alójalo a un servicio de alojamiento junto con los otros dos archivos jquery:




jquery-1.4.2.min.jsslotmachine.js



Asegurate de incluir antes de:

</head>

 
los archivos Javascript en el orden específico como en el siguiente ejemplo:

<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='js/slotmachine.js'></script>

Ahora el siguiente código, colocalo donde quieres que vaya la galería ya sea en una entrada o como elemento HTML/Javascript:

 <div id="page-wrap">
 <div id="slot-machine-tabs">
    <ul class="tabs">
    <li><a href="#one">Tab One</a></li>
    <li><a href="#two">Tab Two</a></li>
    <li><a href="#three">Tab Three</a></li>
    </ul>
 <div class="box-wrapper">
 <div id="one" class="content-box">
 <div class="col-one col">
 <img src="Imagen.Evangelina.jpg" alt="" />
 </div>
 <div class="col-two col">
 <h3>Kate</h3>
 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 </div>
 <div class="col-three col">
 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 </div>
 </div>
 <div id="two" class="content-box">
 <div class="col-one col">
 <img src="Imagen.Elizabeth.jpg" alt="" />
 </div>
 <div class="col-two col">
 <h3>Juliet</h3>
 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 </div>
 <div class="col-three col">
 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 </div>
 </div>
 <div id="three" class="content-box">
 <div class="col-one col">
 <img src="Imagen.Sonia.jpg" alt="" />
 </div>
 <div class="col-two col">
 <h3>Penelope</h3>
 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 </div>
 <div class="col-three col">
 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 </div>
 </div>
 </div> 
 </div>  
 </div>


Y listo, guardamos y ya debería estar funcionando.

Space Gallery

Haz clic en las imagenes de abajo para verlo en acción.


					
					
					
					
					
					
				


DESCARGA:
Space Gallery.zip(252KB): jQuery, javascript, archivos CSS, imágenes, ejemplos e instrucciones.


Implementar
Conecta el Javascript y archivos CSS a su documento. 

Edita los archivos CSS antes de alojarlos y fija las rutas de acceso a las imagenes y cambia los colores para adaptarse a tu tema 

del sitio.




custom.cssspacegallery.css



Importante: asegurate de incluir los archivos Javascript en el orden específico como en el ejemplo siguiente:

<link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
    <link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />
    <link rel="stylesheet" media="screen" type="text/css" href="css/custom.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/eye.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/spacegallery.js"></script>
    <script type="text/javascript" src="js/layout.js"></script>


Todo lo anterior colocalo antes de:

</head>

 
Recuerda alojar los archivos a un servicio de alojamiento. Yo te recomiendo utilizar Dropbox. 

Ahora el siguiente código que es donde van las imagenes, colocalo en una entrada:

<div id="MiGalería" class="Galería del Espacio">
    <img src="Imagen/3.jpg" alt="" />
    <img src="Imagen/6.jpg" alt="" />
    <img src="Imagen/2.jpg" alt="" />
    <img src="Imagen/5.jpg" alt="" />
    <img src="Imagen/1.jpg" alt="" />
    <img src="Imagen/4.jpg" alt="" />
				      </div>


Y listo, ya debería estar funcionando.

Smooth Gallery-1.2-Namespaced

Haz clic en las flechas de la galería o en la pestaa(pictures) para verla en acción.
         



DESCARGA:
Smooth Gallery-1.2-Namespaced.zip(1,007KB):jQuery, archivo CSS, ejemplo e imagenes.


Implementar
 
Edita los archivos CSS fijando las urls de las imagenes antes de alojarlo a tu servicio de alojamiento. 




jd.gallery.csslayout.css



Una vez editado, alójalos junto con los otros dos archivos jquery:




jd.gallery.namespaced.jsmootools.namespaced.js



Asegurate de incluirlos antes de:

</head>

 
cada uno en el orden específico como en el siguiente ejemplo:

<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="scripts/mootools.namespaced.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.namespaced.js" type="text/javascript"></script>

Por ultimo, coloca el siguiente código donde quieres que aparesca la galería ya sea en una entrada o como elemento 

HTML/Javascript:

<script type="text/javascript">
   function startGallery() {
   var myGallery = new gallery(Moo.$('myGallery'), {
   timed: false
	});
	}
   window.onDomReady(startGallery);
 </script>
 <div class="content">
 <div id="myGallery">
 <div class="imageElement">
  <h3>Item 1 Title</h3>
  <p>Item 1 Description</p>
  <a href="#" title="open image" class="open"></a>
  <img src="Imagen.1.jpg" class="full" />
  <img src="Imagen.1-mini.jpg" class="thumbnail" />
 </div>
  <div class="imageElement">
   <h3>Item 2 Title</h3>
   <p>Item 2 Description</p>
   <a href="#" title="open image" class="open"></a>
   <img src="Imagen.2.jpg" class="full" />
   <img src="Imagen.2-mini.jpg" class="thumbnail" />
 </div>
 <div class="imageElement">
   <h3>Item 3 Title</h3>
   <p>Item 3 Description</p>
   <a href="#" title="open image" class="open"></a>
   <img src="Imagen.3.jpg" class="full" />
   <img src="Imagen.3-mini.jpg" class="thumbnail" />
 </div>
 <div class="imageElement">
   <h3>Item 4 Title</h3>
   <p>Item 4 Description</p>
   <a href="#" title="open image" class="open"></a>
   <img src="Imagen.4.jpg" class="full" />
   <img src="Imagen.4-mini.jpg" class="thumbnail" />
 </div>
 <div class="imageElement">
   <h3>Item 5 Title</h3>
   <p>Item 5 Description</p>
   <a href="#" title="open image" class="open"></a>
   <img src="Imagen.5.jpg" class="full" />
   <img src="Imagen.5-mini.jpg" class="thumbnail" />
 </div>
 <div class="imageElement">
   <h3>Item 6 Title</h3>
   <p>Item 6 Description</p>
   <a href="#" title="open image" class="open"></a>
   <img src="Imagen.6.jpg" class="full" />
   <img src="Imagen.6-mini.jpg" class="thumbnail" />
 </div>
 <div class="imageElement">
   <h3>Item 7 Title</h3>
   <p>Item 7 Description</p>
   <a href="#" title="open image" class="open"></a>
   <img src="Imagen.7.jpg" class="full" />
   <img src="Imagen.7-mini.jpg" class="thumbnail" />
 </div>
 <div class="imageElement">
   <h3>Item 8 Title</h3>
   <p>Item 8 Description</p>
   <a href="#" title="open image" class="open"></a>
   <img src="Imagen.8.jpg" class="full" />
   <img src="Imagen.8-mini.jpg" class="thumbnail" />
 </div>
 </div>
 </div>

Guardamos y listo, ya debería estar funcionando. 
 

T

Ventana Modal
    


Lightbox++v101

Coloca el cursor encima del menú para verlo en acción:




DESCARGA:
 Lightbox++v101.zip(986KB):javascript, archivo CSS, archivo SWF, ejemplo e imagenes.


Implementar
Edita los siguientes dos archivos CSS-Javascript: 




lightbox.csslightbox++.js



Y alojalos junto con los otros dos archivos Javascript a un servicio de alojamiento:




prototype.jsscriptaculous.js



Una vez alojados, coloca las URL de los cuatro archivos en el siguiente código: 

<link href='css/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='js/prototype.js' type='text/javascript'/>
<script src='js/scriptaculous.js?load=effects' type='text/javascript'/>
<script src='js/lightbox++.js' type='text/javascript'/>

Ahora incluye el código anterior antes de:  

</head>

Por ultimo, coloca el siguiente código HTML en una entrada o como elemento HTML/Javascript:

<a href='Imagen.digg_en.jpg' rel='lightbox' title='Digg.com Wallpaper'><img src='Imagen.digg_thumb.jpg'/></a>
<a href='Imagen.purple_en.jpg' rel='lightbox[papers]' title='Mac Wallpaper: Purple'><img src='Imagen.purple_thumb.jpg'/></a> 
<a href='Imagen.orange_en.jpg' rel='lightbox[papers]' title='Mac Wallpaper: Orange'><img src='Imagen.orange_thumb.jpg'/></a> 
<a href='Imagen.granite_en.jpg' rel='lightbox[papers]' title='Mac Wallpaper: Granite'><img src='Imagen.granite_thumb.jpg'/></a>
<a height='400' href='Archivo.sbemail.swf' rel='lightbox' title='Strongbad: Coloring' width='550'><img src='Imagen.strongbad_thumb.jpg'/></a>


Y listo, ya debería estar funcionando.  

Visual Light Box
     
Haz clic en las imagenes para ver la ventana modal en acción.
         



DESCARGA:
 Visual Light Box.zip(430KB):jQuery, javascript, archivos CSS, ejemplo e imagenes.


Implementar
 
Edita los archivos CSS fijando las rutas de acceso a las imagenes antes de alojarlos. 




visuallightbox.cssvlightbox.css



Una vez editados, alójalos a tu servicio de alojamiento junto con los otros dos archivos Jquery:




jquery.min.jsvisuallightbox.js



Asegurate de incluir los dos archivos CSS y el archivo jquery.min antes de:  

</head>

 
y en el orden específico como en el siguiente ejemplo:

<link href='engine/css/vlightbox.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>#vlightbox a#vlb{display:none}</style>
<link href='engine/css/visuallightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='engine/js/jquery.min.js' type='text/javascript'/>

Ahora incluye el archivo visuallightbox.js en el siguiente código:

<div id='vlightbox'>
  <a class='vlightbox' href='Data.Imagen.colinas_azules.jpg' title='Colinas azules'><img alt='Colinas azules' src='Data.thumbnails.colinas_azules.jpg'/></a>
  <a class='vlightbox' href='Data.Imagen.invierno.jpg' title='Invierno'><img alt='Invierno' src='Data.thumbnails.invierno.jpg'/></a>
  <a class='vlightbox' href='Data.Imagen.nenfares.jpg' title='Nenfares'><img alt='Nenfares' src='Data.thumbnails.nenfares.jpg'/></a>
  <a class='vlightbox' href='Data.Imagen.puesta_de_sol.jpg' title='Puesta de sol'><img alt='Puesta de sol' src='Data.thumbnails.puesta_de_sol.jpg'/></a>
  <script src='engine/js/visuallightbox.js' type='text/javascript'/> 
</div>

Una vez colocado el archivo, copea y coloca todo el código como elemento HTML/Javascript.

Y listo, ya debería estar funcionando.

PiroBox v.1.0

Haz clic en las imagenes para ver las ventanas en acción.
         



DESCARGA:
PiroBox v.1.0.zip(1,985KB):jQuery, archivo CSS, ejemplo e imagenes.


Implementar
 
Edita el archivo CSS fijando las url de cada imagen en donde corresponden.




pirobox.css



Una vez editados, alójalos a un servicio de alojamiento junto con los otros cuatro archivos Jquery:




jquery1.2.6.jspirobox.jspirobox_min.jspiroBox_packed.js



Asegúrate de incluir todos los archivos CSS/Jquery antes de:

</head>

 
y en el orden específico como se muestra a continuación:

<link href="css_pirobox/pirobox.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery1.2.6.js"></script>
<script type="text/javascript" src="js/piroBox.js"></script>
<script type="text/javascript" src="js/piroBox_packed.js"></script>
<script type="text/javascript" src="js/piroBox_min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.thumbs').piroBox({
			border: 10,
			borderColor : '#222', 
			mySpeed: 700,  
			bg_alpha: 0.3,
			cap_op_start : 0.4,
			cap_op_end: 0.8,
			pathLoader : '#000 url(Imagen.ajax-loader.gif) center center no-repeat;', 
			gallery : '.gallery_in li a', 
			gallery_li : '.gallery_in li', 
			next_class : '.next_in',
			previous_class : '.previous_in'
	});	
	$('.thumbs').piroBox({
                        border: 1, 
			mySpeed: 700,
			borderColor : '#444',  
			bg_alpha: 0.5,
			cap_op_start : 0.4,
			cap_op_end: 0.8,
			pathLoader : '#000 url(Imagen.ajax-loader.gif) center center no-repeat;', 
			gallery : '.gallery li a', 
			gallery_li : '.gallery li',
			single : '.single  a',
			next_class : '.next',
			previous_class : '.previous'
	});	
});
</script>

Ahora copea el siguiente código si quieres la primera galería:

<div class="gallery_in">
 <ul>
  <li>
  <a href="Imagen.1.jpg" title="Caption" ><img src="Imagen.1_s.jpg" alt="demo" width="200" height="139" /></a>
  </li>
  <li>
  <a href="Imagen.2.jpg" title="Caption" ><img src="Imagen.2_s.jpg" alt="demo" width="200" height="139" /></a>        
  </li>
  <li>
  <a href="Imagen.3.jpg" title="Caption"><img src="Imagen.3_s.jpg" alt="demo" width="200" height="139" /></a>
  </li>
  <li>
  <a href="Imagen.4.jpg" title="Caption" ><img src="Imagen.4_s.jpg" alt="demo" width="200" height="139" /></a>
  </li>
 </ul>
</div>

O copea el siguiente código si quieres la segunda galería:

<div class="gallery">
 <ul>
  <li>
  <a href="Imagen.5.jpg" title="Caption"><img src="Imagen.5_s.jpg" alt="demo" width="200" height="139" /></a>        
  </li>
  <li>
  <a href="Imagen.6.jpg" title="Caption"><img src="Imagen.6_s.jpg" alt="demo" width="200" height="139" /></a>        
  </li>
  <li>
  <a href="Imagen.7.jpg" title="Caption"><img src="Imagen.7_s.jpg" alt="demo" width="200" height="139" /></a>        
  </li>
  <li>
  <a href="Imagen.8.jpg" title="Caption"><img src="Imagen.8_s.jpg" alt="demo" width="200" height="139" /></a>
  </li>
 </ul>
</div>

Si prefieres la tercera, copea el siguiente código:

<div class="single_box">
<span class="single">
  <a href="Imagen.9.jpg" title="Caption"><img src="Imagen.9_s.jpg" alt="demo" width="200" height="139" /></a>
</span>
</div>
<div class="single_box">
<span class="single">
  <a href="Imagen.10.jpg" title="Caption"><img src="Imagen.10_s.jpg" alt="demo" width="200" height="139" /></a>
</span>
</div>

Recuerda colocarlos en una entrada o como elementos HTML/Javascript. Y listo, ya debería estar funcionando.

Lightbox Slideshow

Haz clic en una imagen para ver la ventana modal en acción.
         



DESCARGA:
 Lightbox Slideshow.zip(306KB):javascript, archivo CSS, ejemplo e imagenes.


Implementar
Antes que nada edita el archivo CSS:




lightbox.css



Una vez editado, alojalo a un servicio de alojamiento junto con los tres archivos Javascript:




prototype.jsscriptaculous.jslightbox.js



Ya estando alojados los cuatro archivos, coloca las URL en el siguiente código Javascript:

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
	<script type="text/javascript" src="prototype.js"></script>
	<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
	<script type="text/javascript" src="lightbox.js"></script>

Ya colocadas, incluye el mismo código Javascript antes de:

</head>

Por ultimo, coloca el código HTML en una entrada o como elemnto HTML/Javascript:

<a href="Imagen.DSC03897.jpg" title="this is a caption" rel="lightbox[Brussels]"><img src="Imagen.thumbnails.DSC03897.jpg" /></a>
<a href="Imagen.DSC03898.jpg" title="and another caption" rel="lightbox[Brussels]"><img src="Imagen.thumbnails.DSC03898.jpg" /></a>
<a href="Imagen.DSC03899.jpg" title="this caption is awesome!" rel="lightbox[Brussels]"><img src="Imagen.thumbnails.DSC03899.jpg" /></a>

Nada más coloca las URL de las imagenes en sus respectivos lugares y listo.

T

Widgets

Para todos aquellos blogueros que les gusta diseñar su web/blog con un reloj, contador, encuesta, reproductor, etc. 

A continuación les dejo la siguiente recopilación de widgets:

 
Relojes
Contadores
Encuestas
Reproductores
Mapas
Chats
Tool shell
Flag counter
Mod poll
Flash mp3 player
Whos amung
Xat
Clock desktop
Contador de visitas
Vorbeo
Alsa creations
Geo visite
Cbox
My flash fetish
Contador gratis
Xat
Source forge
Clustr maps
Meebo
24log
Contador visitas II
Miniencuestas
Sequane
Neoworx
Shoutmix
Clock link
Gratis para web
99 polls
Muz icons
Ip2 map
Six flash gear
Flash vortex
Mi codigo
Poll code
Moonk
Frappr
Gabbly
Rela time
Contador gratis II
Blog poll
Goear
Globetrackr
Poqbum
Relojes flash
Contador de visitas II
Encuesta facil
Player my space
Revolver maps
Ebuddy
On your site
24log
Flash gear
Mixpot
Libros de V.
Plugoo
Art digital design
Geo visite
Interrogantes
Play list
Smart guest book
Chatango
Pekegifs
Baby strology
Encuestas mi arroba
Media player yahoo
Melody soft
Olark
Relojes web
Contador web
Free web site polls
Happy worm
Galicia city
My shout box
Sindiplay
99 counters
Poll daddy
Jamendo
Libros mi arroba
Tiny chat
Poqbum
widgeo
Vizu
Last fm
Variedad
Cuenta Regresiva
Widgetsi
Five flash gear
Micro poll
Iradeo
Abowman
Count down
Pood waddle
Contador wap
Twtpoll
Player aouka
Your minis
Blogo versary
World time server
Globe trackr
Poll every where
Flabell
Didita9
Clock link
Clock easy
Stat counter
Doodle
Badongo
Widget box
One plus you
Time and date
Contadores mi arroba
Twiigs
Premium beat
Rock you
Graphi clayouts
24 time zones
Histats
Encuestas fluid
Varal
Spring widgets
Baby strology
Dlcom
Contadores gratis para w.
Flisti
Listengo
Wigflip
Clock easy
Calendarios
Free logs
fluid surveys
Hoover web desing
Critical layouts
justin jc
Free blog content
Whos amung
bloggeries
Radio blog club
Widdly tinks
GG timer
Huma Calendar
Usuarios online
Portal de encuestas
Flash mp3 player II
Page plugins
Daisy path
Pekegifs
Programatium
Fotoll
Resources
Your space is best
Joobly
Widgetsi
Contador usuario online
Neo myz
Radio zanorg
Wow zio
Tiempo M.
Gifss
Feed jit
Ballot box
Draft light
Tok box
Tiempo meteored
Slideshow
Whos read
Free polls
Flow player
Popuri
El tiempo
Slide
Guests counter
Blog polls
Music player
Pyzam
Weather
Photo peach
Easy traficounter
Obsurvey
Strange cube
Addtoany
Tu tiempo
Image loop
Amazing counters
Poll setup
Esnips
Lab pixies
Soitu
Flickr slideshow
Free counter plus
My free polls
4
Ilove Michael
Moon connection
Photo bucket
Contador web II
Blog polling
4
Clarin
6
1
Contador gratis web kit
3
4
Widgets yahoo
6
1
Contadores page rank
3
4
Trombi blog
6
1
Promociona
3
4
Komcitiz
6
1
Free web site hit c.
3
4
Video surf
6
1
Free counter
3
4
5
6
1
Two spots
3
4
5
6
1
Pax
3
4
5
6
1
Free hit counters
3
4
5
6
1
Lab pixies
3
4
5
6
1
2
3
4
5
6


Espero les sean de gran utilidad.

T  

Contacto

Exjemplos es un blog dedicado a presentar una serie de efectos enfocados en jquery, prototype y mootools.

Los efectos demostrados en Exjemplos se pueden utilizar en cualquier forma que desee sin atribución.

Si tiene sugerencias o comentarios sobre algun efecto en específico por favor, háganoslo saber.

Contacte con nosotros usando el formulario o por correo.



Enviar un email a:

Tweet

Otros
Wyiswyg mootools

A continuación utiliza el editor de texto para verlo en acción:




DESCARGA:
 Wyiswyg mootools.zip(267KB):Javascript, archivos CSS, ejemplo e imagenes.


Primero que nada edita el siguiente archivo CSS:




style.css



y alojalo junto con los otros cuatro archivos a un servicio de alojamiento:




mootools-1.2-core.js_uif.js_class.wysiwyg.packed.js_web.css



Una vez alojados, coloca las URL en el siguiente código Javascript:

<link rel="stylesheet" href="_web.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script type="text/javascript" src="mootools-1.2-core.js"></script>
	<script type="text/javascript" src="_uif.js"></script>
	<script type="text/javascript" src="_class.wysiwyg.packed.js"></script>
	<script type="text/javascript">//<![CDATA[
		window.addEvent('domready',function(){
			// Sample 1
			var W1 = new wysiwyg({});
			$('sample1').getElement('form').addEvent('submit',function(){
				if(W1.open){
					W1.toTextarea();
				}
			});
//]]></script>

Ya colocadas, incluye el código Javascript antes de:

</head>


Y por ultimo, coloca el codigo HTML en donde quieres que aparesca el editor de texto ya sea en una entrada o como elemento 
HTML/Javascript: 

<div id='cont'>
   <div class='sample' id='sample1'>
     <form action='form_processor.php' method='post'>
     <div>
<textarea cols='30' name='contenido' rows='5'><p>Contenido inicial.</p>