dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Fullsreen Background Slideshow

  1. #1
    Join Date
    Oct 2012
    Posts
    2

    Fullsreen Background Slideshow

    Good time of day, I'm from Ukraine, so sorry for my English, I try to make a website, only know HTML and CSS, and JavaScript from never worked, and according to it, I complete zero. I need to make a full-screen gallery where JavaScript can not do without. Downloaded a sample gallery that I like, but you need something to change it. I'm the fourth day of editing, but it fails because it is entirely in JavaScript. That must ask for your help. That is the gallery http://www.onlinedisk.ru/file/958914/. I decided to change it as an image http://i47.tinypic.com/35d0lxt.jpg. The first button shows all image gallery, second and last a previous and next image, and the third stop / play. Also, when you hover over the keys change their background. Container size of keys 42px. I think its clear opinion stated if that ask. Help please, do not pass by, but I was disappointed at all and if you do not go as I planned at all let down this deal.

  2. #2
    Join Date
    Oct 2012
    Posts
    39
    We’ll use an unordered list for the slideshow and we’ll add a span for each image and a division with a heading:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <ul class="cb-slideshow">
    <li>
    <span>Image 01</span>
    <div>
    <h3>re·lax·a·tion</h3>
    </div>
    </li>
    <li><!--...--></li>
    <li><!--...--></li>
    </ul>
    The spans are going to be the elements that will have the background images of the slideshow.
    THE CSS
    Let’s style the unordered list first. It will be fixed and we will stretch it over the viewport. We’ll also use a :after pseudo-element in order to place a pattern on top of the image:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .cb-slideshow,
    .cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
    }
    .cb-slideshow:after {
    content: '';
    background: transparent url(../images/pattern.png) repeat top left;
    }

  3. #3
    Join Date
    Oct 2012
    Posts
    2
    Thanks for the tip, but maybe I was wrong to put it, I can't arrange the buttons as the picture in the first post

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles