[ un desarrollo de PATAGONIA CREATIVE ]
Email Facebook Rss

Archivos en Categoria: Scripts

  • Diseño Web | Javascript | jQuery | Scripts

    03 /10 / 2008 - 7:44 pm

    Publicado por Nikko.

    • 15
    • 7.967

    Social Link

    Accesible News Slider

    slidequery.jpg

    Accesible News Slider, otra alternativa para montar Slide Horizontales basados en jquery. Puede ser una buena forma de resaltar post, si se animan a adaptarlo a worpdress o para montar una sección de productos que se encuentren ofreciendo desde sus blogs.Ver demo - Descarga - Mas Info Reindel

    Uso.

    Descargar todos los archivos, alojarlos en nuestro servidor y realizar la llamada a ellos, copiando y pegando el siguiente código dentro de nuestra etiqueta < head >…

    PLAIN TEXT
    JavaScript:
    <link rel="stylesheet" href="jquery.accessible-news-slider.css" type="text/css" media="screen, projection" />

    <script language="javascript" type="text/javascript" src="jquery-1.1.3.1.pack.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.accessible-news-slider.js"></script>
    <script language="javascript" type="text/javascript">
    $(function() {

        $(".computers_technology").accessNews({
            newsHeadline: "Computers &amp; Technology",
            newsSpeed: "normal"
        });

       
        /*

        newsHeadline: "Top Stories"  (String)          |  Each unique slider (id) or set of sliders (class) can receive a headline.
        newsSpeed: "normal"          (String/Integer)  |  "slow","normal","fast", or an integer, with 1 being the fastest animation.

        */

    });
    </script>

    Nuestra estructura

    PLAIN TEXT
    HTML:
    <div class="news_slider computers_technology">
                <div class="messaging">
                    Please Note: You may have disabled JavaScript and/or CSS. Although this news content will be accessible, certain functionality is unavailable.
                </div>
                <a href="#skip_to_news_1" class="skip">Skip to news content.</a>
                <a href="#" class="prev"><img src="images/prev.gif" width="16" height="16" alt="Previous" title="Previous" env="images" /></a>
                <a href="#" class="next"><img src="images/next.gif" width="16" height="16" alt="Next" title="Next" env="images" /></a>
                <div class="news_items">
                    <a name="skip_to_news_1"></a>
                    <div class="container fl">
                        <div class="item fl">
                            <a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
                            <div class="fl">
                                <a href="/">Titulo Producto o articulo</a><br />
                                Descripcion detallada del post o articulo...etc etc etc
                            </div>
                        </div>
                       
                         <div class="item fl">
                            <a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
                            <div class="fl">
                                <a href="/">Titulo Producto o articulo</a><br />
                                Descripcion detallada del post o articulo...etc etc etc
                            </div>
                        </div>
                       
                       
                       
                    </div>
                </div>
            </div>

    El aspecto lo pueden modificar por completo, desde la hoja de estilo que acompaña a los archivos.

  • Diseño Web | Javascript | jQuery | php | Scripts

    21 /09 / 2008 - 4:39 pm

    Publicado por Nikko.

    • 15
    • 8.833

    Social Link

    Contenido deslizante con Auto-Reproducción

    contslider.jpg

    Auto playing featured Content Slider, una divertida forma para mostrar gran cantidad de contenido en una pequeña área. Estaremos usando XHTML / CSS para la construcción y el estilo de widgets. Junto con las librerías jQuery y Coda Slider plugin para los efectos de animación. Este featured Content Slider, posee un contenido principal (grupos), que se desliza de izquierda a derecha mostrando cada uno de ellos un contenido único. Hay enlaces que actúan como menú de navegación que nos permitirá saltar rápidamente a cualquier grupo en particular. Estos vínculos pueden estar formados por hipervínculo de texto, miniatura, etc.

    • Diferentes tipos de contenido personalizado en los paneles. Se puede poner lo que queramos en los paneles, pero para que sea más fácil para nosotros mismos, habrá un par de diferentes formatos a respetar. Una imagen de fondo cubriéndolo por completo, pero con una superposición de textos.
    • Auto-play. Podemos hacer click en los paneles para saltar a cada grupo especifico, o dejar que las transiciones se produzcan de forma automática.
    • Flecha indicador. Sirve como indicador visual para resaltar el panel que estamos viendo actualmente, algo así como una pequeña flecha sobre las miniaturas que apunta en el panel.

    Ver demo - Mas informacion y descarga Auto playing featured Content Slider - By css-tricks
    Instalacion:

    PLAIN TEXT
    JavaScript:
    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
        <script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
        <script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
        <script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
        <script type="text/javascript">
            var theInt = null;
            var $crosslink, $navthumb;
            var curclicked = 0;
            theInterval = function(cur){
                clearInterval(theInt);
                if( typeof cur != 'undefined' )
                    curclicked = cur;
                $crosslink.removeClass("active-thumb");
                $navthumb.eq(curclicked).parent().addClass("active-thumb");
                    $(".stripNav ul li a").eq(curclicked).trigger('click');
                theInt = setInterval(function(){
                    $crosslink.removeClass("active-thumb");
                    $navthumb.eq(curclicked).parent().addClass("active-thumb");
                    $(".stripNav ul li a").eq(curclicked).trigger('click');
                    curclicked++;
                    if( 6 == curclicked )
                        curclicked = 0;
                }, 3000);
            };
            $(function(){
                $("#main-photo-slider").codaSlider();
                $navthumb = $(".nav-thumb");
                $crosslink = $(".cross-link");
                $navthumb
                .click(function() {
                    var $this = $(this);
                    theInterval($this.parent().attr('href').slice(1) - 1);
                    return false;
                });
                theInterval();
            });
        </script>

    Agregando estilo

    PLAIN TEXT
    CSS:
    /*
        SLIDER
    */
    .slider-wrap                                { width: 419px; position: absolute; top: 87px; left: 40px; }
    .stripViewer .panelContainer
    .panel ul                     { text-align: left; margin: 0 15px 0 30px; }
    .stripViewer                                { position: relative; overflow: hidden; width: 419px; height: 285px; }
    .stripViewer .panelContainer                { position: relative; left: 0; top: 0; }
    .stripViewer .panelContainer .panel   { float: left; height: 100%; position: relative; width: 419px; }
    .stripNavL, .stripNavR, .stripNav       { display: none; }
    .nav-thumb      { border: 1px solid black; margin-right: 5px; }
    #movers-row   { margin: -43px 0 0 62px; }
    #movers-row div  { width: 20%; float: left; }
    #movers-row div a.cross-link             { float: right; }
    .photo-meta-data                            { background: url(images/transpBlack.png); padding: 10px; height: 30px;
                                                  margin-top: -50px; position: relative; z-index: 9999; color: white; }
    .photo-meta-data span          { font-size: 13px; }
    .cross-link   { display: block; width: 62px; margin-top: -14px;
                                                  position: relative; padding-top: 15px; z-index: 9999; }
    .active-thumb             { background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }

    Contenido

    PLAIN TEXT
    HTML:
    <div class="slider-wrap">
        <div id="main-photo-slider" class="csw">
            <div class="panelContainer">
                <div class="panel" title="Panel 1">
                    <div class="wrapper">
                        <!-- REGULAR IMAGE PANEL -->
                        <img src="images/tempphoto-1.jpg" alt="temp" />
                        <div class="photo-meta-data">
                            Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
                            <span>"Free Tibet" Protest at the Olympic Torch Rally</span>
                        </div>
                    </div>
                </div>
                <div class="panel" title="Panel 2">
                    <div class="wrapper">
                        <!-- PANEL CONTENT -->
                    </div>
                </div>
                <div class="panel" title="Panel 3">
                    <div class="wrapper">
                        <!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
                        <img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
                        <h1>How to Cook a Scotch Egg</h1>
                        <ul>
                            <li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
                            <li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
                            <li>1/2 cup AP flour</li>
                            <li>1-2 eggs, beaten</li>
                            <li>3/4 cup panko-style bread crumbs</li>
                            <li>Vegetable oil for frying</li>
                        </ul>
                    </div>
                </div>
                <div class="panel" title="Panel 4">
                    <div class="wrapper">
                        <!-- PANEL CONTENT -->
                    </div>
                </div>
                <div class="panel" title="Panel 5">
                    <div class="wrapper">
                        <!-- PANEL CONTENT -->
                    </div>
                </div>
                <div class="panel" title="Panel 6">
                    <div class="wrapper">
                        <!-- PANEL CONTENT -->
                    </div>
                </div>
            </div>
        </div>
        <!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
              AND THE CLASS="CROSS-LINK" ARE REQUIRED -->
        <a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
        <div id="movers-row">
            <div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
            <div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
            <div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
            <div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
            <div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
        </div>
    </div>

    Ver demo - Mas informacion y descarga Auto playing featured Content Slider - By css-tricks

  • Diseño Web | Galerias | jQuery | Scripts

    13 /09 / 2008 - 8:30 pm

    Publicado por Nikko.

    • 15
    • 5.701

    Social Link

    DhoniShow ROCK – Mas formas de crear slideshows

    dshowquery.jpg

    DhoniShow ROCK otra versión de esta estupenda galería que nos permite montar slideshows a nuestros proyectos web. Anteriormente comentamos la que se llama solamente DhoniShow basada en prototype 1.5+ y Script.aculo.us. La diferencia con esta versión DhoniShow ROCK, es la librería que se utilizara, ahora completamente en jquery. Su funcionamiento es realmente muy simple, y las configuración con las cuales interactuar muchísimas. Muchos efectos, autoplay, transiciones manuales, opción de añadir imágenes miniaturas bajo la de tamaño original, tiempo de transiciones en secuencias, etc.

    Ver Demo - Descarga Demo - Mas info DhoniShow ROCK

    Uso:
    Para su instalación como siempre, necesitamos descargar cada uno de los archivos, alojarlos en una carpeta o servidor y realizar la llamada correspondiente a ellos. Es decir, a nuestras librerías jquery y las correspondientes a DhoniShow, su script y su hoja de estilo.

    PLAIN TEXT
    JavaScript:
    <link rel="stylesheet" href="dhonishow.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.dhonishow.js" type="text/javascript" charset="utf-8"></script>

    Crear una slideshow con AUTOPLAY

    PLAIN TEXT
    HTML:
    <div class="dhonishow autoplay_3 duration_3"> 
     <img src="1.jpg"> 
     <img src="2.jpg"> 
     <img src="4.jpg"> 
    </div>

    Crear galerias y agregando enlaces a las descripciones

    PLAIN TEXT
    HTML:
    <div class="dhonishow"> 
    <img src="1.jpg" alt="Agregando link a la descripcion. Mira: <a href='http://xyberneticos.com/'>xyberneticos.com</a>"> 
    <img src="2.jpg" alt="Nuestra galeria slideShow con un dise&ntilde;o muy peculiar bajo <a href='http://dhonishow.de/'>dhonishow ROCk</a> mediante jQuery - power by <a href='http://xyberneticos.com/'>xyberneticos.com</a>
    "> 
    <img src="4.jpg" alt="Soy un link <a href='http://xyberneticos.com/'>xyberneticos.com</a> "> 
    </div>

    Ambas formas, lo podrán ver funcionar en el ejemplo que también pueden descargar.
    gracias Cesar

  • Diseño Web | Mootools | Scripts

    31 /08 / 2008 - 7:09 pm

    Publicado por Nikko.

    • 15
    • 7.576

    Social Link

    Sexy Alert Box – Tus mensajes de error más atractivos

    sexyalert.jpg

    Sexy Alert Box es un clon "sexy" del clásico alert de javascript. Este script ha dejado de desarrollarse por el autor, pero Eduardo ha sabido adaptarlo muy bien a Mootools luego de la liberación del código original. El efecto es muy similar a los logrados con Lightbox, pero desarrollado para otros fines. Los ejemplos sin duda te serán de guía para saber en qué momento utilizarlos. Sexy Alert Box requiérela utilización de Mootools 1.2, es compatible con cada uno de los navegadores, incluyendo Internet Explorer (Una gran ventaja) y su finalidad es mostrar mensajes de error de una manera más atractiva a los ojos de nuestros usuarios.

    Ver Demos - Descarga ejemplos - Mas info e instalacion  Sexy Alert Box

  • Diseño Web | Galerias | Javascript | jQuery | Programacion | Scripts

    31 /08 / 2008 - 5:25 pm

    Publicado por Nikko.

    • 15
    • 8.782

    Social Link

    Interface Slideshow

    interfaceshoe.jpg

    Interface Slideshow, otra agradable alternativa para mostrar nuestras imágenes en diapositivas y con desvanecimiento. Sin duda la cantidad de opciones que se nos suelen presentar son tantas, que hace muy difícil la elección de uno a la hora de implementarlo en nuestros proyectos. Soy de esos que creen, que aunque suelan verse muy similar a otros, todos poseen diversas ventajas y pequeñas cosas que llamaran más la atención uno de otro. Sea en la forma de implementarse, la librería en la cual se basa, las diferentes opciones que nos presenta y demás. Interface Slideshow utiliza jquery y un poco de css para dar el estilo que veremos en el ejemplo. Creo que les gustara.
    Ver Demo -Interface Slideshow

    Uso:

    Lo primero será descargar ambas librerías, jQuery 1.1.2 19 kb junto con Interface 1.2 146kb alojarlo en nuestro servidor o la carpeta que contiene todas nuestras librerías y realizar la llamada a ellos desde nuestro encabezado. Dentro de nuestras etiquetas < Head >…

    PLAIN TEXT
    JavaScript:
    <script src="jquery.js" type="text/javascript"></script>
    <script src="interface.js" type="text/javascript"></script>

    Un poco de CSS

    PLAIN TEXT
    CSS:
    #slideShow1
    {
    width: 300px;
    height: 280px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    margin: 10px;
    }
    #slideShow2
    {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    margin: 10px;
    }
    .pagelinks a
    {
    font-weight: bold;
    color: #666;
    }
    .slideCaption
    {
    background-color: #FFFFCC;
    padding: 4px;
    text-align: center;
    font-weight: bold;
    }
    .pagelinks a.activeSlide
    {
    color: #f90;
    }
    /* this is for IE so the prev/next links can be hovered*/
    .nextSlide,.prevSlide
    {
    background-image: url(images/spacer.gif);
    }
    .nextSlide:hover
    {
    background-image: url(images/nextslide.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
    }
    .prevSlide:hover
    {
    background-image: url(images/prevslide.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    }
    .inputsTooltip
    {
    border: 1px solid #ccc;
    background-color: #eee;
    padding: 4px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    filter:alpha(opacity=70);
    -moz-opacity:.70;
    opacity:.70;
    }
    #tooltipURL
    {
    display: none;
    }

    Estructura de ambos ejemplos

    PLAIN TEXT
    HTML:
    <div id="slideShow1">
    <div class="slideshowLoader"></div>
    <div class="slideshowHolder"></div>
       
       
    <div class="slideshowLinks pagelinks"></div>

    <div class="slideshowCaption slideCaption"></div>
    </div>

    <div id="slideShow2"><div class="slideshowLoader"></div>
    <div class="slideshowHolder"></div>
       
       
    <div class="slideshowLinks pagelinks"></div>
    <div class="slideshowCaption slideCaption"></div>
    </div>

    PLAIN TEXT
    JavaScript:
    <script type="text/javascript">
    $(document).ready(
        function()
        {
            $.slideshow(
                {
                    container : 'slideShow1',
                    loader: 'slideshow_files/slideshow_loader.gif',
                    linksPosition: 'top',
                    linksClass: 'pagelinks',
                    linksSeparator : ' | ',
                    fadeDuration : 400,
                    activeLinkClass: 'activeSlide',
                    nextslideClass: 'nextSlide',
                    prevslideClass: 'prevSlide',
                    captionPosition: 'bottom',
                    captionClass: 'slideCaption',
                    autoplay: 5,
                    random: true,
                    images : [
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Panda Dynamic'
                        },
                        {
                            src: 'slideshow_files/Active.jpg',
                            caption: 'Panda Actual'
                        },
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Fiat Panda'
                        },
                        {
                            src: 'slideshow_files/Active.jpg',
                            caption: 'Panda Active'
                        }
                    ]
                }
            )
            $.slideshow(
                {
                    container : 'slideShow2',
                    loader: 'images/slideshow_loader.gif',
                    linksPosition: 'top',
                    linksClass: 'pagelinks',
                    linksSeparator : ' | ',
                    fadeDuration : 400,
                    activeLinkClass: 'activeSlide',
                    nextslideClass: 'nextSlide',
                    prevslideClass: 'prevSlide',
                    captionPosition: 'bottom',
                    captionClass: 'slideCaption',
                    autoplay: 5,
                    images : [
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Fiat Panda'
                        },
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Panda Active'
                        },
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Panda Actual'
                        },
                        {
                            src: 'slideshow_files/Dynamic.jpgg',
                            caption: 'Panda Dynamic'
                        }
                    ]
                }
            )
           
            $('a').ToolTip(
                {
                    className: 'inputsTooltip',
                    position: 'mouse'
                }
            );
        }
    );
    </script>

    Ver Demo -Mas info Interface Slideshow

  • Diseño Web | Javascript | Scripts

    10 /08 / 2008 - 3:50 pm

    Publicado por Nikko.

    • 15
    • 2.703

    Social Link

    Unit PNG Fix – Para seguir solucionando transparencias en IE

    Unit PNG Fix, otro compacto javascript de tan solo 1kb que nos permitirá seguir solucionando los tradicionales errores producidos por IE6. Transparencias, corrección de atributos de filtros, etc.

    Descarga - Mas Info Unit PNG Fix

    PLAIN TEXT
    JavaScript:
    <!--[if lt IE 7]>
            <script type="text/javascript" src="unitpngfix.js"></script>
    <![endif]-->

  • Diseño Web | Programacion | Recursos Web | Scripts

    21 /07 / 2008 - 12:31 am

    Publicado por Nikko.

    • 15
    • 2.051

    Social Link

    Resaltar productos con MooTools

    prowerful.jpg

    Create a Simple, Powerful Product Highlighter with – Una bonita técnica que podremos utilizar en nuestros proyectos web para crear simples y potentes secciones resaltadas con MooTools. Este tutorial te permitirá conocer un poco esta técnica y las ventajas de utilizar MooTools.

    Ver Demo - Descarga - Mas info  Create a Simple, Powerful Product Highlighter with MooTools

    Instalacion:

    PLAIN TEXT
    JavaScript:
    <script src="mootools.js" type="text/javascript"></script>

    <script type="text/javascript" charset="utf-8"> window.addEvent(\'domready\', function() {

    // Create variables (in this case two arrays) representing our bubbles and pages    var myPages = $$(\'.page\');   var myBubbles = $$(\'.bubble\');

    // Set bubbles opacity to zero so they\'re hidden initially and toggle visibility on for their container        myBubbles.setStyle(\'opacity\', 0);    $(\'bubbleWrap\').setStyle(\'visibility\',\'visible\')

    // Add our events to the pages  myPages.each(function(el, i) {     el.set(\'morph\', {link : \'cancel\'});

    el.addEvents({    \'mouseenter\': function() {                 myBubbles[i].morph({                \'opacity\' : 1,           \'margin-top\' : \'-15px\'             });          },             \'mouseleave\' : function() {         myBubbles[i].morph({      \'opacity\' : 0,                     \'margin-top\' : 0     });    }           });    }); });

    </script>

    un poco de estilo

    PLAIN TEXT
    CSS:
    <style type="text/css" media="screen">  img { border: 0; }    #siteWrap {       margin: 287px auto 0 auto;         width: 642px;     height: 345px;       position: relative;       background: transparent url(images/bg_pageWrap.jpg) no-repeat top left;    }  #pageWrap {   position: absolute;   z-index: 5;   top: 138px;   left: 134px;

    }   #psdPage {       margin-right: 19px;       float: left;     cursor: pointer;  }    #netPage {         margin-right: 20px;         float: left;       cursor: pointer;   }      #audioPage {       float: left;     cursor: pointer;  }    #bubbleWrap {   position: absolute;   z-index: 10;         left: 158px;       top: 30px;     }   .bubble {         position: absolute;     }   .clear {   clear: both;     } </style>

    contenido

    PLAIN TEXT
    HTML:
    <p id="siteWrap">
    <p id="bubbleWrap" style="visibility: hidden">
    <p class="bubble"><img src="images/bubble_PSD.jpg" alt="PSDTUTS" /></p>
    <p class="bubble"><img src="images/bubble_NET.jpg" alt="NETTUTS" /></p>
    <p class="bubble"><img src="images/bubble_AUDIO.jpg" alt="AUDIOTUTS" /></p>

    <p id="pageWrap">
    <p class="page" id="psdPage"><a href="#"><img src="images/page_PSD.jpg" alt="PSDTUTS" /></a></p>
    <p class="page" id="netPage"><a href="#"><img src="images/page_NET.jpg" alt="NETTUTS" /></a></p>
    <p class="page" id="audioPage"><a href="#"><img src="images/page_AUDIO.jpg" alt="AUDIOTUTS" /></a></p>

    Mas info Create a Simple, Powerful Product Highlighter with MooTools


Pagina 12 de 25« Portada...«7891011121314151617»...Ultima »