[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Scripts

  • s3Slider: slideshows basados en jQuery

    s3slider.jpg

    ¿Aun con ganas de testear más opciones para generar tus “slideshows”? Con s3Slider jQuery plugin tienes una opción mas para agregar a tu extensa lista, un script escrito en jQuery con opciones muy interesantes y efectos muy atractivos. Sin dejar de lado la opción de añadir fragmentos de texto que acompañen nuestras fotos.

    Ver demosdescarga – Via webintentavisual-blast.
    Uso:
    Descargar y alojar los archivos en nuestro servidor, luego realizar la llamada correspondiente desde nuestro “head”

    1. <script type="text/javascript" src="js/jquery.js"></script>
    2. <script type="text/javascript" src="js/s3Slider.js"></script>
    3. <script type="text/javascript">
    4.     $(document).ready(function() {
    5.         $('#slider').s3Slider({
    6.             timeOut: 3000
    7.         });
    8.     });
    9. </script>

    Un poco de estilo CSS – En este caso para el ejemplo N° 1

    1. #slider {
    2.     width: 410px; /* important to be same as image width */
    3.     height: 300px; /* important to be same as image height */
    4.     position: relative; /* important */
    5.     overflow: hidden; /* important */
    6. }
    7. #sliderContent {
    8.     width: 410px; /* important to be same as image width or wider */
    9.     position: absolute;
    10.     top: 0;
    11.     margin-left: 0;
    12. }
    13. .sliderImage {
    14.     float: left;
    15.     position: relative;
    16.     display: none;
    17. }
    18. .sliderImage span {
    19.     position: absolute;
    20.     font: 10px/15px Arial, Helvetica, sans-serif;
    21.     padding: 10px 13px;
    22.     width: 384px;
    23.     background-color: #000;
    24.     filter: alpha(opacity=70);
    25.     -moz-opacity: 0.7;
    26.     -khtml-opacity: 0.7;
    27.     opacity: 0.7;
    28.     color: #fff;
    29.     display: none;
    30. }
    31. .clear {
    32.     clear: both;
    33. }
    34. .sliderImage span strong {
    35.     font-size: 14px;
    36. }
    37. .top {
    38.     top: 0;
    39.     left: 0;
    40. }
    41. .bottom {
    42.     bottom: 0;
    43.     left: 0;
    44. }

    y por ultimo: Nuestra estructura

    1. <div id="slider">
    2.         <ul id="sliderContent">
    3.             <li class="sliderImage">
    4.                 <img src="images/410/3.jpg" alt="3" />
    5.                 <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
    6.             </li>
    7.             <div class="clear sliderImage"></div>
    8.         </ul>
    9.     </div>

  • jQuery popeye – Cajas lightbox, para ampliar contenido sin perder espacio o montar galerias

    jquwrypopeye.jpg

    Si se encuentran un poco agotados de usar siempre los mismos efectos de lightbox en el contenido de sus artículos o en ciertas secciones en particular, jQuery Popeye será una alternativa muy peculiar a tener en cuenta. Si bien jQuery Popeye ha sido inspirada en los tradicionales lightbox, no básicamente pretende obtener los mismos resultados. Tiene características muy particulares, y es realmente muy atractivo. jQuery Popeye podrá ser útil para montar galerías de imágenes en sección realmente reducidas, ampliar contenido de nuestros post añadiendo muchas imágenes sin dañar el diseño de nuestro blog, añadir cantidad de imágenes mediante Cajas de lightbox y no de forma individual, nos permite añadir una pequeña descripción a cada imagen en la parte inferior de nuestra caja utilizando el atributo ALT y variar un poco el efecto, ya que en vez de lightbox se asemejan mas a los pop-up.

    DemoDecarga demo – Articulo Original jQuery.popeye – an inline lightbox alternative

    Uso
    Para que funcione correctamente necesitaremos descargar las siguientes librerias. jquery.popeye-0.2.1.js (incluida en el pack original), pero además deberemos descargar jquery.easing.1.3.js junto con jquery-1.2.6.js (Incluidas en mi demo). Una vez con los archivos deberemos realizar la llamada correspondiente desde nuestro encabezado. Copiando y pegando el siguiente código dentro de nuestra etiqueta < HEAD >

    1. <script type="text/javascript" src="lib/jquery-1.2.6.js"></script>
    2. <script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
    3. <script type="text/javascript" src="lib/jquery.popeye-0.2.1.js"></script>
    4.  
    5. <script type="text/javascript">
    6.     <!--//<![CDATA[
    7.    
    8.     $(document).ready(function () {
    9.         var options1 = {
    10.             easing:     'easeInOutCirc'
    11.         }
    12.         var options2 = {
    13.             direction:  'right',
    14.             duration:   230            
    15.         }
    16.    
    17.         $('#popeye1').popeye(options1);
    18.         $('#popeye2').popeye(options2);
    19.     });
    20.    
    21.     //]]>-->
    22. </script>

    Tambien deberemos añadir las llamadas a las hojas de estilo.

    1. <link rel="stylesheet" type="text/css" href="css/jquery.popeye.css" media="screen" />
    2.  
    3.     <link rel="stylesheet" type="text/css" href="css/styling.css" media="screen" />

    Por utimo: Comenzamos a montar nuestras Cajas con las imagenes

    1. <h2>Demo 1 - Popeye (Float:Left)</h2>
    2.  
    3.  
    4.  
    5.     <!-- [COMIENZO DEMO 1 ] begin -->
    6.  
    7.         <div id="popeye1" class="popeye popeye-hasjs next">
    8.             <ul>
    9.                 <li><a  href="images/1large.jpg"><img src="images/1small.jpg" alt="Descripcion: Demo de Popeye jQuery, testeado por www. xyberneticos.com. A&ntilde;adir descripci&oacute;n utilizando el atributo (ALT)" /></a></li>
    10.                  <li><a href="images/2large.jpg"><img src="images/2small.jpg" alt="Descripcion: Demo de Popeye jQuery, testeado por www. xyberneticos.com. A&ntilde;adir descripci&oacute;n utilizando el atributo (ALT)" /></a></li>
    11.                   <li><a href="images/3large.jpg"><img src="images/3small.jpg" alt="Descripcion: Demo de Popeye jQuery, testeado por www. xyberneticos.com. A&ntilde;adir descripci&oacute;n utilizando el atributo (ALT)" /></a></li>
    12.      
    13.            </ul>
    14.  
    15.         </div>
    16.    
    17.            <!-- [FIN EJEMPLO DEMO 1] end -->
    18.     <div style="clear:both;">
    19.  
    20.  
    21.           <h2>Demo 2 - Popeye (Float:Right)</h2>
    22.  
    23.     <!-- [COMIENZO DEMO 2 ] begin -->
    24.         <div id="popeye2" class="popeye">
    25.             <ul>
    26.                 <li><a href="images/1large.jpg"><img src="images/1small.jpg" alt="Descripcion: Demo de Popeye jQuery, testeado por www. xyberneticos.com. A&ntilde;adir descripci&oacute;n utilizando el atributo (ALT)" /></a></li>
    27.                  <li><a href="images/2large.jpg"><img src="images/2small.jpg" alt="Descripcion: Demo de Popeye jQuery, testeado por www. xyberneticos.com. A&ntilde;adir descripci&oacute;n utilizando el atributo (ALT)" /></a></li>
    28.                   <li><a href="images/3large.jpg"><img src="images/3small.jpg" alt="Descripcion: Demo de Popeye jQuery, testeado por www. xyberneticos.com. A&ntilde;adir descripci&oacute;n utilizando el atributo (ALT)" /></a></li>
    29.                </ul>
    30.         </div>
    31.       </div>         <!-- [FIN EJEMPLO DEMO 2] end -->

  • Free CSS Drop-Down Menu Framework – Para montar menús desplegables

    200810301512.jpg

    Free CSS Drop-Down Menu, un Framework que nos permitirá montar menús desplegables a nuestros proyectos web de forma sumamente simple. En cuanto a estilos, posee múltiple opciones para adaptarlos lo mejor posible a las estructuras de tus proyectos. Para IE6 necesitas cargar jQuery, incluido también el pack. Sin duda es una muy buena opción para organizar tanto contenido de navegación que puedas llegar a tener. El archivo a descargar posee todos los ejemplos.

    Ver DemosDescarga

    Fuente webmasterlibre | carlosleopoldo

  • E-Commerce | Scripts

    15 /11 / 2008 - 6:52 pm

    Publicado por Nikko.

    • 15
    • 4.321

    Social Link

    13 alternativas para poner tus productos en Internet

    simplicarts.jpg

    Si están pensando en montar sus Comercios Electrónicos les recomiendo este fabuloso artículo que Diego ha traducido para todos nosotros. Nada más ni nada menos que 13 alternativas para poner sus productos en Internet. En esta recopilación de plataformas podrán descubrir las ventajas y desventajas de cada una de ellas, y optar por la que más se asemeje a los que buscan. Si bien todas son fabulosas, yo descare una de ellas, creo que la más simple, simpleCart(js) un Script que no necesita base de datos para funcionar y con el que podrás integrar todos tus productos con tu cuenta Paypal de forma simple. Creo que será muy práctico para aquellos comercios electrónicos donde las actualizaciones no sean constantes o los productos sean escasos.

    Enlace  13 aplicaciones de comercio electrónico de código libre – Original canvasburn

    Recomendado simpleCart(js)Demo

  • Typeface.js – Atractiva opción a sIFR

     

    typ23.jpg

    typeface.js un interesante Script que nos ofrece otra solución para la gestión de tipografías; básicamente nos permitirá utilizar cualquier tipo de fuente en nuestros proyectos, sin preocuparnos si nuestros usuarios la tendrán instalada en sus ordenadores o no. Y todo, sin utilizar Flash, como el popular sIFR que seguramente mucho de ustedes conocerá, con typeface.js bastara con escribir en HTML y CSS como si nuestros usuarios tuvieran la fuente instala localmente. Para comenzar a utilizarlo solo debemos cargar la biblioteca typeface.js y namefont. typeface.js (fuentes q encontraremos en el sitio). Recomiendo que indaguen porque es muy interesante.

    Mas info typeface.jsDemosFonts – Via ajaxian

    1. <script type="text/javascript" src="typeface-0.10.js"></script>
    2. <script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
    3. <div class="myclass typeface-js" style="font-family: Helvetiker">
    4.     Text here in Helvetiker font...
    5. </div>

  • Zoomy.js – Otra alternativa para generar tus lightbox

    zoomy.jpg

    Zoomy.js otra atractiva para generar lightbox. Pesa tan solo 4k y depende de Prototype Javascript Framework y Scriptaculous (effect.js , dragdrop.js) para funcionar. El efecto realizado por Zoomy.js es el de los tradicionales lightbox, hacer un zoom al dar click sobre las imágenes, solo que con la ventaja que al cargar las imágenes de antemano, no hay retraso cuando se produce el Zoom. Además de forma opcional podremos mostrar un titulo o añadir la opción de cerrar las ventanas de forma manual.

    Ver Mi demoDescarga Demo – Web Oficial Zoomy – Fuente Anieto2k

    Opciones :

    • ppearDuration: Permite determinar cuantos segundos deseamos estén muestras ventanas abiertas una vez realizado el zoom. (valor por defecto: 0,5 segundos).
    • closeButton: Mostrar o no el botón cerrar (valor por defecto: false).
    • draggable: Arrastrar y mostrar el botón Cerrar (valor por defecto: false).
    • hideCaption: (default value: false).

    Uso

    1. <script src="prototype.js" type="text/javascript"></script>
    2. <script src="dragdrop.js" type="text/javascript"></script>
    3. <script src="effects.js" type="text/javascript"></script>
    4. <script src="scriptaculous.js" type="text/javascript"></script>
    5. <script src="zoomy.js" type="text/javascript"></script>
    6. <script type="text/javascript">
    7. Event.observe(window,"load",function() {
    8.        $$("ul.zoomy a").each(function(element){
    9.         new Zoomy(element, { hideCaption: true });    
    10.        });
    11.        $$("ul.zoomy2 a").each(function(element){
    12.         new Zoomy(element, { draggable: true });    
    13.        });
    14.     });
    15. </script>

    Un poco de CSS

    1. .zoomy, .zoomy2 { float:left; width:100%; }
    2. .zoomy li, .zoomy2 li { list-style:none; float:left; display:inline; margin-right:5px; margin-bottom:5px; width:150px; height:100px;  }
    3.  
    4. .zoomy a, .zoomy2 a {outline:none; border:2px solid #372919; text-decoration:none; background-position:left top; text-indent:-9999px; display:block; width:150px; height:100px; }
    5.  
    6. #zoomy { position:absolute; border:1px solid #B3BEAD; background:#000000; padding:5px; color:#fff; line-height:100%; }
    7.    
    8. #zoomy p { margin:0; padding:5px 5px 10px 5px; position:relative; }
    9.  
    10. #close { position:absolute; right:5px; width:12px; height:12px; background:url(close.gif) no-repeat; cursor:pointer;}

    contenido

    1. <h3>Efecto Zoomy Simple</h3>  
    2.  
    3. <ul class="zoomy">
    4.     <li><a href="#" style="background-image: url(fotito.jpg)" title="Demo Website Xyberneticos" >Xyberneticos</a></li>
    5.         <li><a href="#" style="background-image: url(fotito.jpg)" title="Demo Website Xyberneticos" >Xyberneticos</a></li>
    6.             <li><a href="#" style="background-image: url(fotito.jpg)" ttitle="Demo Website Xyberneticos" >Xyberneticos</a></li>
    7.         <li><a href="#" style="background-image: url(fotito.jpg)" title="Demo Website Xyberneticos" >Xyberneticos</a></li>
    8. </ul>
    9.  
    10.  
    11. <h3>Efecto Zoomy Draggable</h3>
    12.  
    13.     <ul class="zoomy2">        
    14.             <li><a href="http://www.xyberneticos.com/" style="background-image: url(fotito.jpg)" title="Demo Website" >Xyberneticos</a></li>
    15.             <li><a href="http://www.xyberneticos.com/" style="background-image: url(fotito.jpg)" title="Demo Website" >Xyberneticos</a></li>
    16.                 <li><a href="http://www.xyberneticos.com/" style="background-image: url(fotito.jpg)" title="Demo Website" >Xyberneticos</a></li>
    17.                 <li><a href="http://www.xyberneticos.com/" style="background-image: url(fotito.jpg)" title="Demo Website" >Xyberneticos</a></li>
    18.              
    19.               </ul>

  • Mootools | Scripts

    15 /10 / 2008 - 6:32 pm

    Publicado por Nikko.

    • 15
    • 6.427

    Social Link

    noobSlide – Atractivos Slide para tus proyectos usando mootools

    nooslide.jpg

    Para aquellos que aun no se convencen en utilizar jQuery pero si disfrutan trabajar con mootools, este articulo les parecerá interesante, mas aun si tenían pensado montar Slide a sus proyectos y aun no se decidían de qué forma implementarlos. En estos casos noobSlide será una agradable opción a tener en cuenta, es una ligera “clase” escrita en mootools que te permitirá crear estupendos Slide. Lo genial de noobSlide es que no solo nos permitirá crear Slide simples, sino que podremos jugar un poco mas con los diseños, las formas de presentarlos, los efectos, etc…en resumen posee opciones más que interesantes, y dentro de todas ellas, quizás esta la que buscabas para tus proyectos personales.

    Ver Demos y opciones – Descarga – Web Autor efectorelativo


Pagina 11 de 25« Portada...789101112131415...20...Ultima »