Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS slidshow – move thumbs from bottom to side?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #162767
    we5inelgr
    Participant

    Hi all,

    How can I modify this code, so that the thumbs are on the right side of the large pictures, instead of the bottom (like they are now). Put them in two different TDs (but would that mess up the DIVs)? Or, is there some other way?

    The CSS:

    <style type="text/css">
    
    * {
        margin: 0;
        padding: 0;
    }
    
    img {border: none;}
    
    a {outline: none;}
    
    body {
        font-family: Helvetica, Verdana, Arial, sans-serif;
        background: url(images/post-BG.png) repeat;
        text-align: center;
        color: #fff;
    }
    
    h1 {
        margin: 30px 0 0 0;
        text-shadow: #d6d6d6 0px 1px 2px;
        color: #030303
    }
    
    h3 {
        margin: 10px 0 10px 0;
        text-shadow: #d6d6d6 0px 1px 2px;
        color: #030303
    }
    
    
    
    /* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */
    
    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
    
        }
    
        50% { 
            opacity: 0;
        }
    
        100% { 
            opacity: 1;
        }
    }
    
    #box {
        text-align: left;
        width: 700px;
        margin: 30px auto 0 auto;
        background: #000;
        overflow: hidden;
        border: 10px solid #000;
        -webkit-box-shadow: #131313 0px 2px 10px;
        -moz-box-shadow: #131313 0px 3px 10px;
        box-shadow: #131313 0px 3px 10px;   
        -webkit-animation-name: fadeIn; 
        -webkit-animation-duration: 3s; 
        -webkit-animation-iteration-count: 1;
        -webkit-animation-delay: 0s;
    }
    
    ul#slider{
        -webkit-border-radius: 10px;
        margin: 0px;
        padding: 0px;
        list-style: none;
        position: relative;
        width: 700px;
        height: 438px;
        overflow: hidden;   
    }
    
    ul#thumb {
        overflow: none;
        margin: 0px 0px 0px 0px;
        padding: 0px;
        list-style: none;
        position: relative;
        background: #000;
        overflow: auto;
        width: 700px;
    }
    
    ul#thumb a {
        -webkit-transition: opacity .2s ease-in-out;
        border: 1px solid #979797;
        width: 35px;
        height: 35px;
        display: block;
        overflow: hidden;
        float: right;
        margin: 10px 0px 0px 10px;
        opacity: 0.75;
    }
    
    ul#thumb a:hover {
        opacity: 1;
    } 
    
    ul#slider li {  
        width: 700px;
        height: 438px;
        position: absolute;
        }
    
    ul#slider li p {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: inherit;
        color: #fff;
        background: rgba(0, 0, 0, .5);
        width: 100%;
    }
    
    ul#slider li p span {
        line-height: 1.2em;
        padding: 10px;
        display: block;
    }
    
    /* Animation for the :target image. Slides the image in. */
    
    @-webkit-keyframes moveTarget {
        0% {
            left:-700px;
    
        }
    
        100% { 
            left:0px;
        }
    }
    
    
    ul#slider li:target {
        -webkit-animation-name: moveTarget; 
        -webkit-animation-duration: .5s; 
        -webkit-animation-iteration-count: 1;
        top:0px;
        left: 0px;
        z-index: 10;
    }
    
    /*
    Animation for the current image. Slides it out the frame and back to the starting position. 
    Adds a lower z-index than the now current image.
    */
    
    @-webkit-keyframes moveIt {
        0% {
            left:0px;
    
        }
        50% {
            left:700px;
    
        }
        100% { 
            left:-700px;
            z-index: 5;
        }
    }
    
    ul#slider li:not(:target) {
        -webkit-animation-name: moveIt; 
        -webkit-animation-duration: 1.5s; 
        -webkit-animation-iteration-count: 1;
        top:0px;
        left: 0px;
    }
    
    </style>
    

    The HTML:

    <div id="box">
    
    <ul id="slider">
        <li id="1" >
            <img src="pic1.png" alt="pic1" width="700" height="438" />
            <p><span>Description 1.</span></p>
        </li>
        <li id="2">
            <img src="pic2.png" alt="pic2" width="700" height="438" />
            <p><span>Description 2.</span></p>
        </li>
        <li id="3">
            <img src="pic3.png" alt="pic3" width="700" height="438" />
            <p><span>Description 3.</span></p>
        </li>
    </ul>
    
    <ul id="thumb">
        <li><a href="#1"><img src="thmb1.png" alt="thmb1" width="50" height="50" /></a></li>
        <li><a href="#2"><img src="thmb2.png" alt="thmb2" width="50" height="50" /></a></li>
        <li><a href="#3"><img src="thmb3.png" alt="thmb3" width="50" height="50" /></a></li>
    </ul>
    
    </div>
    

    Thanks.

    #162772
    chrisburton
    Participant

    Please put this in a pen

    #162776
    Paulie_D
    Member

    Please put this in a pen

    And use image placeholders

    Lorempixel.com or Placehold.it can help there.

    #162801
    we5inelgr
    Participant

    Thanks for the replies, but sorry…I don’t understand. What’s that pen and how to use it beside pasting code in?

    #162803
    chrisburton
    Participant

    That helps us see what is wrong with your problem and also allows us to make changes to it.

    You paste your HTML code in the HTML box (left), CSS in the CSS box (middle) and if you have Javascript, that goes in the right box. Then click save and post the link.

    #162812
    we5inelgr
    Participant

    oh ok. got it. thanks.

    here it is:

    http://codepen.io/we5inelgr/pen/gtxvG

    #162832
    we5inelgr
    Participant

    Interesting. Thanks much, especially for the explaination!

    One other thing, why would image #3 load as the main image instead of image #1? Yet, Image #1 is first in line for the thumbs?

    #162837
    dyr
    Participant

    https://css-tricks.com/on-target/

    As Chris describes in this article….

    The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.

    When your PEN loads the hash is empty and therefore there exist 0 :target matches. You can test this by opening the console, selecting the correct frame, and examining the hash property of the location object: location.hash outputs "" when viewing your PEN before clicking on any of the thumbs.

    I haven’t used :target to make an image slider like this without JavaScript. In a real world setting you might always visit the page with a hash in the URL. Or you could use JavaScript to add a hash to the URL if none exists when the page loads.

    // Extremely basic example, adding this to
    // wahhabb's codepen does make it so #1 is active.
    // You probably won't want to hard code '#1'
    var hash = window.location.hash
    if (!hash) { window.location.hash = "#1" }
    
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.