Grow your CSS skills. Land your dream job.

Need Help Gallery Slider with jQuery

  • # May 26, 2009 at 5:41 am

    Hi everyone !
    Does someone now if there is a jquery plugin to mimic this slider :
    http://www.gametrailers.com/

    thanks :)

    # May 26, 2009 at 8:42 am

    I found this one : http://devkick.com/lab/galleria/demo_01 … blades.jpg

    # May 26, 2009 at 8:51 am

    However i have a trouble with this effect,
    Indeed, i would like to display my thumb in line

    here you will find my css file

    ps: i will soon upload my website online, so you could see directly the problem

    thanks

    # May 26, 2009 at 8:52 am

    .galleria{list-style:none;width:200px}
    .galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0}
    .galleria li a{display:none}
    .galleria li div{position:absolute;display:none;top:0;left:180px}
    .galleria li div img{cursor:pointer}
    .galleria li.active div img,.galleria li.active div{display:inline}
    .galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:inline;width:auto;height:auto}
    .galleria li .caption{display:inline;padding-top:.5em}
    * html .galleria li div span{width:400px} /* MSIE bug */

    /* BEGIN DEMO STYLE */
    *{margin:0;padding:0}
    body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
    h1,h2{font:bold 80% ‘helvetica neue’,sans-serif;letter-spacing:3px;text-transform:uppercase;}
    a{color:#348;text-decoration:none;outline:none;}
    a:hover{color:#67a;}
    .caption{font-style:italic;color:#887;}
    .demo{position:relative;margin-top:2em;}
    .gallery_demo{width:702px;margin:0 auto;}
    .gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
    .gallery_demo li div{left:240px}
    .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

    #main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
    #main_image img{margin-bottom:10px;}

    .nav{padding-top:15px;clear:both;font:80% ‘helvetica neue’,sans-serif;letter-spacing:3px;text-transform:uppercase;}

    .info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
    .info p{margin-top:1.6em;}

    # May 26, 2009 at 9:22 am

    That is a nice plugin! Could you possibly post a link to your test site ?

    # May 26, 2009 at 9:35 am

    yes, but the DNS is not yet ready !

    # May 26, 2009 at 9:50 am

    You can check the website here : http://temp.notebookcom.fr/

    thanks :)

    # May 26, 2009 at 10:04 am

    The problem is the width on the ul. This should do what you want:

    Code:
    .galleria {
    display:block;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0 auto;
    width:540px;
    }
    # May 26, 2009 at 10:47 am

    Thank you very much Master Apostrophe !

    # May 27, 2009 at 4:40 am

    Furthemore, i don’t like the thumb jumping when i click on it
    Is it remediable ?

    thanks
    http://temp.notebookcom.fr/

    # May 27, 2009 at 6:44 am

    This should do the trick:

    Code:
    .galleria_container {
    height:362px;
    }
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".