Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    77
    Thanks
    15
    Thanked 1 Time in 1 Post

    help with TinySlideshow CSS

    original script is located here:
    http://www.scriptiny.com/2008/12/javascript-slideshow/

    My current adapted files are located here:
    http://darrenlasso.com/freelance/TinySlideshow/

    What im trying to do is remove the carousel from the original script and just have the thumbnails line up underneath the main image. BUT what im seeing is that i cant figure out how to set the width of the thumbnail area- i want to have it only go the width of the main image, and fall onto multiple lines. So for this example, there are 8 total thumbs, id like them to be in 2 rows of 4.
    Any idea how to accomplish this?
    You can view the html from the link above, and im going to copy the css for you below.
    Please let me know if you have any ideas
    thanks!

    Code:
    body {margin:0; background:#111; padding:5px; font:11px Verdana,Arial; width:490px;}
    #slideshow {position:absolute; height:220px; width:490px; list-style:none; }
    #slideshow span {display:none}
    #wrapper {width:490px; height:720px; display:none}
    #wrapper * {margin:0; padding:0}
    #fullsize {position:absolute; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
    #information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
    #information h3 {padding:4px 8px 3px; font-size:14px}
    #information p {padding:0 8px 8px}
    #image {width:500px}
    #image img {position:absolute; z-index:25; width:auto}
    .imgnav {position:absolute; width:10%; height:306px; cursor:pointer; z-index:150}
    #imgprev {left:0; background:url(images/left.gif) left center no-repeat}
    #imgnext {right:0; background:url(images/right.gif) right center no-repeat}
    #imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
    #thumbnails { display:block; position:absolute; top:320px; width:490px; height:200px;}
    #slidearea {float:left; display:block; position:absolute; width:490px; margin-right:5px; height:220px;}
    #slider {position:absolute; left:0; height:220px;  width:490px; }
    #slider img {cursor:pointer; border:1px solid #666; padding:2px}

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    looks like a jquery slider? A lot of times, these scripts are uncustomizable, or more specifically: your going to have to search the javascript to find the solution.

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    #thumbnails {
    display: block;
    position: absolute;
    top: 320px;
    width: 490px;
    height: 200px;
    overflow: hidden; /* missing */
    }
    if you want two rows, you have to use a ul and lis (2) with overflow: hidden;, honestly I don't recommend tampering with the original script though!
    Last edited by Sammy12; 07-08-2011 at 06:28 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •