Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 4 de 4

Tema: moving boxes plugin jquery

  1. #1
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 sep, 11
    Mensajes
    344
    Poder de Reputación
    11

    moving boxes plugin jquery

    alguien puede explicar como se instala esto desde "0"..

    http://css-tricks.com/moving-boxes/

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 sep, 11
    Mensajes
    344
    Poder de Reputación
    11
    otro.. más facil a priori, por favor ayuuuuda!!!!!!!

    necesito centrarlo, que no lo esta y aumentar el tamaño del contenedor.. ya luego me preocuparía de centrar las fotos
    es un slider tipo boxes como el anterior, pero este lo tengo casi ya, pero necesito lo anterior.

    ¿puede alguien que entienda decirme donde cambio esto?
    (estoy desesperado)


    este es el código CSS donde estoy intentando cambiar el tamaño del contenedor


    codigo CSS:



    body{padding:0px; margin:0px; background-image: url(../images/background.jpg);}

    #logo{width:840px; margin:0 auto; text-align:center; margin-top:120px;}
    #container
    {
    margin-top:20px;

    }
    #slider
    {
    margin: 0 auto;
    text-align:center;
    }

    #slider div a{
    font-size: 12px;
    color: white;
    font-weight: bold;
    float:left;
    padding:10px;
    text-decoration:none;
    }

    #slider div a:hover{color:#F1D5CA;}

    .image-slider
    {
    width: 834px;
    height: 172px;
    background:url(../images/bg.png) no-repeat;
    padding: 14px 16px 0px 16px;
    position: relative; /*overflow: hidden;*/
    font-family:Helvetica, Arial, Tahoma, sans-serif;

    }
    .image-slider-back, .image-slider-forward
    {
    float: left;
    width: 23px;
    height: 98px; /*background-color: #121212;*/
    color: White;
    position: relative;
    top:12px;
    cursor: pointer;
    }
    .image-slider-back
    {
    background-image: url(../arrow-left.png);
    background-repeat: no-repeat;
    background-position: left;
    }
    .image-slider-forward
    {
    background-image: url(../arrow-right.png);
    background-repeat: no-repeat;
    background-position: right;
    }
    .image-slider-contents
    {
    width: 755px;
    height: 154px;
    float: left;
    position: relative;
    overflow: hidden;
    }
    /*.image-slider-contents .contents-wrapper > div*/
    .image-slider-contents .contents-wrapper
    {
    position: absolute;
    padding-top: 18px;
    }
    .image-slider-contents .outer
    {
    background-color: White;
    float: left;
    width: 156px;
    height: 86px;
    margin:0px 15px;
    cursor:pointer;
    }
    .image-slider-contents .outer > div
    {
    width: 156px;
    height: 86px;
    }
    .image-slider-contents .outer > div img
    {
    width: 152px;
    height: 82px;
    margin: 2px;
    margin-top: -30px;
    }
    /*.image-slider-contents > div > div
    {
    position: relative;
    float: left;
    width: 156px;
    height: 86px;
    margin-left: 6px;
    margin-right: 6px;
    padding: 2px;
    background-color: White;
    }*/
    .image-slider-contents img
    {
    width: 156px;
    height: 86px;
    }

    .hidden
    {
    display: none;
    }
    .visible
    {
    display: block;
    }
    .thumbnail-active
    {
    filter: alpha(opacity=100);
    opacity: 1.0;
    cursor: pointer;
    }
    .thumbnail-inactive
    {
    filter: alpha(opacity=20);
    opacity: 0.2;
    cursor: pointer;
    }

    .preview
    {
    position: absolute;
    width: 450px;
    height: 260px;
    background-color: White;
    padding: 2px;
    border: solid 1px black;
    }
    .preview .img-large
    {
    width: 450px; /*height: 216px;*/
    z-index: 1000;
    }
    .preview .img-large .left
    {
    position: absolute;
    left: 8px;
    top: 100px;
    width: 16px;
    height: 24px;
    z-index: 1000;
    background: url(../arrow-left.png);
    cursor:pointer;
    }
    .preview .img-large .right
    {
    position: absolute;
    left: 428px;
    top: 100px;
    z-index: 1000;
    width: 16px;
    height: 24px;
    background: url(../arrow-right.png);
    cursor:pointer;
    }
    .preview .close
    {
    position: absolute;
    left: 434px;
    top: -16px;
    width: 32px;
    height: 34px;
    background: url(../images/close.png);
    float: right;
    cursor: pointer;
    z-index: 2000;
    }
    .preview .img-large img
    {
    width: 450px;
    height: 260px;

    }
    .preview .label
    {
    width: 434px;
    line-height: 30px;
    float: left;
    position: absolute;
    top: 216px;
    color: Black;
    padding: 8px;
    background-color: White;
    text-align:left;
    font-weight:bold;
    font-size:13px;
    }
    .outer
    {
    border: solid 1px black;
    }
    .outer.active
    {
    border: solid 1px #B56161;
    background-color: #F1D5CA;
    }
    .outer.active div span
    {
    color: #F1D5CA;
    }

    #footer{width:100%; margin:0 auto; text-align:center; line-height:50px;}
    #footer a{color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
    #footer a:hover{color:#B56161;}

  3. #3
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 sep, 11
    Mensajes
    344
    Poder de Reputación
    11
    Buenos días, a todo el Foro CCTW..

    a ver, voy a completar la información por si alguien me quiere echar un cable..
    primero.- el plugin de jquery actual es este..

    http://www.ajaxshake.com/plugin/ES/9...o-gslider.html


    hay que descargar unos archivos que son el plugin en sí.
    de los que aparte de la carpeta de imagenes y los archivos .js que estan puestos en el sitio correcto.
    te dan la hoja de estilos, que puse en el mensaje anterior, y un documento index.html, donde te dan el código completo a colocar entre head y entre body
    que es este :


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>gSlider - Interactive jQuery Image Slider</title>

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

    <script src="js/image-slider.js" type="text/javascript"></script>

    <link href="style/image-slider.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
    $(document).ready(function() {
    $('#slider').slider({ speed: 500 });

    });

    </script>

    </head>
    <body>
    <div id="logo"><img src="images/interactive-image-slider-gslider.png" alt="Interactive Image Slider" /></div>
    <div id="container">
    <div id="slider">
    <div>
    <img alt="Open Source Vector Icons" src="images/open-source-vector-icons.png" />
    <a href="http://www.greepit.com/2010/07/open-source-icons-for-ui-designers-web-developers-gcons/" target="_blank">Open Source Vector Icons</a>
    </div>
    <div>
    <img alt="Feedback Collection Polling Widget" src="images/Feedback-Collection-Polling-Widget.png" />
    <a href="http://www.greepit.com/2010/11/feedback-collection-and-polling-widget-opineo/" target="_blank">Feedback Collection Polling Widget</a></div>
    <div>
    <img alt="Most Effective Link Building Strategies for Blogs" src="images/link-building-strategies-for-blogs.png" />
    <a href="http://www.greepit.com/2010/11/most-effective-link-building-strategies-for-blogs/" target="_blank">Link Building Strategies for Blogs</a></div>
    <div>
    <img alt="First Complete CSS3 jQuery Tabs" src="images/jQuery-css3-tabs.png" />
    <a href="http://www.greepit.com/2011/04/jquery-css3-tabs-with-breadcrumb-and-pagination-classytabs/" target="_blank">First Complete CSS3 jQuery Tabs</a></div>
    <div>
    <img alt="Professional Creative Free Resume Template" src="images/professional-creative-resume-template.png" />
    <a href="http://www.greepit.com/2010/06/creative-resume-template/" target="_blank">Professional Creative Free Resume Template</a></div>
    <div>
    <img alt="How to Design Accessible Websites and Web Applications
    " src="images/how-to-design-accessible-websites-and-web-applications.png" />
    <a href="http://www.greepit.com/2011/05/how-to-design-accessible-websites-and-web-applications/" target="_blank">How to Design Accessible Websites</a></div>
    <div>
    <img alt="One-liner Login Control" src="images/one-line-login-control-singleline-login.png" />
    <a href="http://www.greepit.com/2011/05/one-is-better-than-two-singleline-login" target="_blank">One-liner Login Control</a></div>
    <div>
    <img alt="Free Minimal Wordpress Theme" src="images/free-minimal-wordpress-theme.png" />
    <a href="http://www.greepit.com/2010/12/free-minimal-wordpress-theme-ginimalistic/" target="_blank">Free Minimal Wordpress Theme</a></div>

    <div>
    <img alt="5 Web Design Trends to Watch & Follow in 2011" src="images/5-web-design-trends-to-watch-follow-in-2011.png" />
    <a href="http://www.greepit.com/2011/04/5-web-design-trends-to-watch-follow-in-2011/" target="_blank">Web Design Trends to Watch & Follow</a></div>


    </div>
    </div>

    <div id="footer"><a href="http://www.greepit.com/2011/06/gslider-lightweight-versatile-and-interactive-jquery-image-slider">Back to Post</a></div>
    </body>
    </html>

    aparte tambien encontre este javascript para que he puesto a continuación
    <script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-6579611-1']);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

    </script>

    y no hay más.. el resultado es éste:



    tengo que centrarlo y ponerlo mas ancho, ya que el tamaño de la galeria debe ser 798 x 431..
    buscando en la hoja de estilos como cambiar el tamaño del cuadradito/contenedor, slider o como se llame no hay manera, macho!!

    así que si algún lumbreras me quiere ayudar no creo que sea un gran problema para él, Gracias por si acaso.

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 sep, 11
    Mensajes
    344
    Poder de Reputación
    11
    Bueno, finalmente lo conseguí..



    Por mi parte ha sido todo. (Pueden cerrar el tema)

Temas Similares

  1. ¿Algun plugin compatible con Fancybox?
    Por victor5atodogas en el foro Foro General
    Respuestas: 0
    Último Mensaje: 05/12/2011, 17:18
  2. Ayuda con el plugin irTranslationSpanish
    Por pepesietepicos en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 2
    Último Mensaje: 26/10/2008, 21:01

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •