[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Galerias

  • miniGallery – An extremely lightweight gallery template

    minigallery.jpg

    MiniGallery es una galería muy simple y bonita, que puede ser muy útil para tus proyectos web. El JavaScript utilizado en miniGallery es la secuencia de comandos Yetii, extremadamente ligero y tan flexible que es fácil de personalizar para satisfacer casi cualquier requisito.

    Ver DemoDescarga

  • Galerias | jQuery | Scripts

    12 /07 / 2009 - 11:59 pm

    Publicado por Nikko.

    • 15
    • 10.959

    Social Link

    Beautiful jQuery sliders

    sliderquey.jpg

    Create Beautiful jQuery sliders, es un maravilloso tutorial desarrollado por DreamCSS , que les explicara paso a paso como montar una galería de imágenes con efectos deslizantes. Además de poseer un diseño simple pero elegante, se le han añadido efectos a los textos que acompañaran a cada una de las fotografías, que si bien es un dato menor, permite lograr una personalización aun mayor. Me parece un script muy interesante para ser utilizado en porfolios, web turisticas o web corporativas, creo que pensaran lo mismo una vez que lo vean funcionando.

    Ver DemoDescarga – Mas Info  Beautiful jQuery sliders

    Via webappers

  • Galerias | jQuery | Scripts

    21 /03 / 2009 - 12:01 am

    Publicado por Nikko.

    • 15
    • 9.058

    Social Link

    Simple Slideshow

    simples.jpg

    Simple Slideshow, otra opción que les permitirá montar sus Slideshow o diapositivas animadas de la forma más simple. Si deseas animar sus encabezados, pero no les agrada la idea de utilizar animaciones en flash, Simple Slideshow puede ser una buena opción a tener en cuenta.

    Ver DemoDescarga – Mas Info Simple Slideshow

    Leer MAS →

  • Galerias | jQuery | Scripts

    17 /02 / 2009 - 6:50 pm

    Publicado por Nikko.

    • 15
    • 8.812

    Social Link

    Moving Boxes – Más contenido deslizante con jQuery

    movinboxes.jpg

    Moving Boxes, otra interesante opción para montar cajas con contenido deslizante. La ida original sigue siendo la base de Start/Stop slider que también comentamos. Botones de control a sus laterales para navegar por el contenido de nuestra caja, pero con la diferencia que al encontrase en el centro de la caja el contenido que hayamos introducido, se producirá un Zoom que lo hace muy llamativo.

    Ver DemoDescarga – Mas info  Moving Boxes

  • Easy Slider – Plugin jQuery ideal para tu porfolio

    easyslider.jpg

    Otro agradable plugin jQuery para agregar a nuestra extensa lista. Easy Slider, como llama a este plugin Alen Grakalic, nos permitirá deslizar horizontalmente o verticalmente tanto imágenes como cualquier otro contenido que se nos ocurra. Es completamente configurable tan solo con CSS, lo que permite una integración realmente simple a nuestro sitio. Si desean ver una idea de cómo podrían llegar a implementar Easy Slider en sus porfolios, basta con visitar templatica, otro de los sitios de Alen Grakalic, donde ha logrado integrar Easy Slider de una forma maravillosa.

    Demos

    Mas Info Easy SliderDescarga ejemplos

    Uso:

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

    agregando estilo

    1. /* Easy Slider */
    2.  
    3.     #slider ul, #slider li{
    4.         margin:0;
    5.         padding:0;
    6.         list-style:none;
    7.         }
    8.     #slider, #slider li{
    9.         /*
    10.             define width and height of container element and list item (slide)
    11.             list items must be the same size as the slider area
    12.         */
    13.         width:696px;
    14.         height:241px;
    15.         overflow:hidden;
    16.         }
    17.     span#prevBtn{}
    18.     span#nextBtn{}                 
    19.  
    20. /* // Easy Slider */

    Contenido

    1. <div id="slider">
    2.         <ul>               
    3.             <li><a href="#"><img src="images/01.jpg" alt="Descripcion" /></a></li>
    4.             <li><a href="#"><img src="images/02.jpg" alt="Descripcion" /></a></li>
    5.             <li><a href="#"><img src="images/03.jpg" alt="Descripcion" /></a></li>
    6.             <li><a href="#"><img src="images/04.jpg" alt="Descripcion" /></a></li>
    7.             <<li><a href="#"><img src="images/05.jpg" alt="Descripcion" /></a></li>        
    8.         </ul>
    9.     </div>

    El script automáticamente agregara la navegación “anterior” y “próximo”, pero se le ha asignado un ID (identificación) que pueden utilizar para darle un poco de estilo mediante CSS

    1. <span id="prevId"><a href="javascript:void(0);">Previous</a></span>
    2. <span id="nextBtn"><a href="javascript:void(0);">Next</a></span>

  • Crear un Widget Amazon Books con jQuery y XML

    amazonboxxml.jpg

    Create an Amazon Books Widget with jQuery and XML, un fabuloso tutorial paso a paso que nos permitirá crear un Widget Amazon Books con jQuery y XML, algo así como una caja donde exponer nuestros productos totalmente navegable mediante su carrusel. Inclusive nos permitirá añadir una breve descripción del producto, algo que lo torna mucho más interesante. Requiere de JavaScript y jQuery, esta ultima diseñada para recorrer documentos XML con facilidad, archivo que utilizaremos para actualizar los datos en nuestro widget de productos.

    Ver demoDescarga demo – Mas info Create an Amazon Books Widget
    Uso
    Realizar las llamadas desde nuestro encabezado < head > – Observar que se hace referencia a la ubicación del archivo book.xml, documento que utilizaremos para actualizar los datos de nuestro widgets:

    1. <script language="javascript" type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    2. <script language="javascript" type="text/javascript" src="js/books.js"></script>
    3. <script language="javascript" type="text/javascript">
    4.  
    5.     $(function(){
    6.         BOOKS.init({
    7.             xmlPath : "data/books.xml",
    8.             imgPath : "images",
    9.             perView : 4
    10.         });
    11.     });
    12.  
    13. </script>

    Un poco de estilo

    1. #books {
    2.     width: 515px; /* optional */
    3. }
    4. #books img {
    5.     border: 0;
    6. }
    7. #books .clear_both {
    8.     clear: both;
    9. }
    10. #books .float_left,
    11. #books  ul li {
    12.     float: left;
    13.     display: inline;
    14. }
    15. #books .float_right {
    16.     float: right;
    17. }
    18. #books .overclear {
    19.     width: 100%;
    20.     overflow: hidden;
    21. }
    22.  
    23. /* styles */
    24.  
    25. #books .buttons {
    26.     position: relative;
    27.     height: 30px;
    28.     margin: 0 0 5px 0;
    29. }
    30. #books .prev {
    31.     position: absolute;
    32.     top: 0;
    33.     left: 0;
    34.     visibility: hidden;
    35. }
    36. #books .next {
    37.     position: absolute;
    38.     top: 0;
    39.     right: 0;
    40. }
    41. #books .showing {
    42.     margin: 5px 60px 0 60px;
    43.     text-align: center;
    44.     font-size: .8em;
    45. }
    46. #books .top {
    47.     background: url(../images/books_top.gif) repeat-x;
    48. }
    49. #books .inner {
    50.     padding: 0 0 0 20px;
    51.     margin: 0 0 -20px 0;
    52.     background: url(../images/books_left_mid.gif) repeat-y;
    53. }
    54. #books  ul {
    55.     margin: 0;
    56.     padding: 0;
    57.     list-style-type: none;
    58.     background: url(../images/books_right_mid.gif) repeat-y top right;
    59. }
    60. #books  ul li {
    61.     display: none;
    62.     position: relative;
    63.     margin: 0;
    64.     padding: 0 20px 20px 0;
    65.     font-size: .8em;
    66.     z-index: 1;
    67. }
    68. #books  ul li.loader {
    69.     display: block;
    70.     float: none;
    71.     height: 115px;
    72.     margin: 0 0 20px -20px;
    73.     background: url(../images/books_loader.gif) no-repeat center center;
    74. }
    75. #books  ul li a.info {
    76.     position: absolute;
    77.     bottom: 20px;
    78.     right: 20px;
    79. }
    80. #books  ul li a.thumb {
    81.     display: block;
    82.     border: 1px solid #ddd;
    83. }
    84. #books  ul li a.thumb img {
    85.     display: block;
    86.     margin: 0;
    87.     padding: 3px;
    88. }
    89. #books .btm {
    90.     background: url(../images/books_btm.gif) repeat-x;
    91. }
    92. .books_tool_tip {
    93.     display: none;
    94.     position: absolute;
    95.     top: 0;
    96.     left: 0;
    97.     width: 350px;
    98.     z-index: 9999;
    99. }
    100. .books_tool_tip .books_pointer_left {
    101.     position: absolute;
    102.     top: 0;
    103.     left: 0;
    104.     width: 10px;
    105.     height: 10px;
    106.     background: url(../images/books_pointer_left.gif);
    107. }
    108. .books_tool_tip .books_pointer_right {
    109.     position: absolute;
    110.     top: 0;
    111.     right: 0;
    112.     width: 10px;
    113.     height: 10px;
    114.     background: url(../images/books_pointer_right.gif);
    115. }
    116. .books_tool_tip .inner {
    117.     border: 1px solid #ddd;
    118.     padding: 15px 15px 3px 15px;
    119.     margin: 0 0 0 9px;
    120.     background: #fff;
    121. }
    122. .books_tool_tip .inner_right {
    123.     margin: 0 9px 0 0;
    124. }
    125. .books_tool_tip .inner p {
    126.     font-size: .8em;
    127.     margin: 0;
    128.     padding: 0 0 12px 0;
    129. }

    Contenido

    1. <div id="books">
    2.         <div class="overclear buttons">
    3.             <a href="#" class="prev"><img src="images/books_prev.gif" width="40" height="30" alt="Previous" /></a>
    4.             <div class="showing"><!-- showing --></div>
    5.             <a href="#" class="next"><img src="images/books_next.gif" width="40" height="30" alt="Next" /></a>
    6.         </div>
    7.         <div class="overclear top">
    8.             <img src="images/books_left_top.gif" width="20" height="20" alt="" class="float_left" />
    9.             <img src="images/books_right_top.gif" width="20" height="20" alt="" class="float_right" />
    10.         </div>
    11.         <div class="inner">
    12.             <ul class="overclear">
    13.                 <li class="loader"><!-- loader --></li>
    14.             </ul>
    15.         </div>
    16.         <div class="overclear btm">
    17.             <img src="images/books_left_btm.gif" width="20" height="20" alt="" class="float_left" />
    18.             <img src="images/books_right_btm.gif" width="20" height="20" alt="" class="float_right" />
    19.         </div>
    20.     </div>

  • Start/Stop Slider – Más formas de generar contenido deslizante

    stopstarslider.jpg

    Start/Stop Slider otra atractiva propuesta por Chris Coyier para generar Contenido Deslizante (Slider) en tus proyectos online. Requiere de jquery y es completamente personalizable desde su archivo startstop-slider.js, basta tener un poco de conocimiento o tiempo y curiosidad. Start/Stop Slider posee una característica que es fácil deducir ya con el nombre del proyecto, nos permite mediante un botón parar la animación de nuestro slider cuando lo deseemos, una buena forma de permitir a nuestros usuarios leer con tranquilidad las cosas que deseemos mostrar en ellos. Además posee otras funcionalidades, que invito a que conozcan testeando Start/Stop Slider desde sus ordenadores.

    Ver Demo - Descarga - Mas Info Start/Stop Slider by: Chris Coyier

    Uso:
    Realizar la llamada correspondiente a nuestros script desde el encabezado de nuestro theme < head >…

    1. <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
    2.     <script type="text/javascript" src="js/startstop-slider.js"></script>

    Añadir estilo en nuesra hoja de Style.css

    1. #slider          { background: white url(../images/slider-bg.jpg); height: 227px; overflow: hidden;
    2.                    position: relative; margin: 50px 0; }
    3. #mover           { width: 2880px; position: relative; }
    4. .slide           { padding: 40px 30px; width: 900px; float: left; position: relative; }
    5. .slide h1        { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px;
    6.                    color: #ac0000; }
    7. .slide p         { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
    8. .slide img       { position: absolute; top: 20px; left: 400px; }
    9. #slider-stopper  { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white;
    10.                    padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }

    Contenido

    1. <div id="slider">
    2.  
    3.             <div id="mover">
    4.        
    5.                 <div id="slide-1" class="slide">
    6.                
    7.                     <h1>Garden Rack</h1>
    8.                    
    9.                     <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>
    10.                    
    11.                     <a href="#"><img src="images/slide-1-image.png" alt="learn more" /></a>
    12.                    
    13.                 </div>
    14.                
    15.                 <div class="slide">
    16.                
    17.                     <h1>Tulip Bulbs</h1>
    18.                    
    19.                     <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>
    20.                    
    21.                     <a href="#"><img src="images/slide-2-image.png" alt="learn more" /></a>
    22.                    
    23.                 </div>
    24.                
    25.                 <div class="slide">
    26.                
    27.                     <h1>Garden Gloves</h1>
    28.                    
    29.                     <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>
    30.                    
    31.                     <a href="#"><img src="images/slide-3-image.png" alt="learn more" /></a>
    32.                    
    33.                 </div>
    34.            
    35.             </div>
    36.        
    37.         </div>


Pagina 2 de 812345678