www.webdeveloper.com
Results 1 to 4 of 4

Thread: Video on Image Inside Slider

  1. #1
    Join Date
    Jun 2013
    Posts
    38

    Video on Image Inside Slider

    Okay, unfortunately, I can't give you my website because it's on an internal stage server.

    Having said that, here's my issue.

    I'm adding content to a simple javascript slider. The images on slides 1,3, and 4 are perfect. The issue is slide 2. Slide 2 includes a video. There's an image as a background on this slide, but there's a video on the left side of it.
    Screenshot of How it SHOULD look.
    Screenshot of How it CURRENTLY looks.

    It's been difficult to place everything with CSS since it's all within the confines of a slider that's already affected by javascript.

    Also, the slider is on autoplay to change every 3-5 seconds. How do I make it so that the slider stops autoplaying if somebody clicks on the video? This way the video can finish playing before it goes to the next slide...

    The last issue I have is that when it DOES switch to the next slide, the video hangs out for just a moment until the animation is complete. In other words, the fade animation between slides doesn't affect the video and it stays until it's fully on the next slide...


    Any thoughts anyone might have would be very helpful... Thanks!

    Here's the JS from the slider:
    Code:
    <script type='text/javascript'>
        jQuery('#slider-1').cycle({
            next: '#next-1',
            prev: '#prev-1',
            fx: 'fade',
            timeout: 30000000,
            pause: 1,
            pager: '#slider-nav-pager-1',
            height: '433px',
            width: '960px'
        })
    </script>

  2. #2
    Join Date
    Jun 2013
    Posts
    38
    Sorry, that link should be as follows for the second screenshot:
    http://www.cleantelligent.com/wp-con...de2Current.JPG

  3. #3
    Join Date
    Jun 2013
    Posts
    38
    Here's further code:

    Here's the CSS:
    Code:
    .slide-desc {     height: 64px;     margin-top: -81px;     width: 930px;     padding: 5px 25px;     position: relative;     background: url('images/slider-desc-bg.png') no-repeat; 	font-family:cabin; 	font-size:14px; 	color:#86d6ff; 	z-index: 2000; } .slide .slide-desc h2{ 	color:white; 	font-size:24px; 	margin: 0 0 0 -10px; 	line-height: 1.3em; } .slide .slide-desc a {     background: url("images/t-thingy.png") no-repeat scroll right center #208FC9;     border-radius: 6px 6px 6px 6px;     bottom: 22px;     color: white;     font-family: 'times new roman';     font-size: 18px;     height: 48px;     padding-right: 45px; 	padding-left: 10px;     position: relative; 	text-decoration:none; 	line-height: 2.5em; 	right: 10px; } .slider{ 	margin: 0 auto; } .entry-content .shadow-wrap {     margin: 0 auto;     padding-left: 15px;     padding-top: 10px;     width: 1000px; } #slider-1 .slide img {     width: 960px;     max-width: 100%; }  #slider-1 .slide-desc img {     width: auto; } .slide-header {     color: #D1D1D1;     font-family: cabin;     font-size: 18px;     padding: 5px 0 15px;     text-align: center; } #slider-nav-1 {     bottom: 8px;     margin: 0 auto;     position: relative;     width: 170px; } #slider-nav-pager-1 a{ 	background: url('images/unused.png') no-repeat; 	padding: 2px 5px; 	color: transparent; 	margin: 0 4px; } #slider-nav-pager-1 .activeSlide{ 	background: url('images/current.png') no-repeat; } #slider-nav-1 #next-1 { 	float:right; 	margin-left: 3px; } #slider-nav-1 #prev-1 { 	float:right; 	margin-right: 3px; } #slider-nav-1 #slider-nav-pager-1 { 	float:right; }
    Here's the html:
    Code:
    		<div class='slider' id='slider-1'> <div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div> <img src="/wp-content/uploads/2012/02/clean-slide-1.jpg" alt="Slide 1" /> <div class='slide-desc'> <h2>Productivity</h2> We believe technology is not only for automation, but for empowerment. <a class="alignright" title="Productivity" href="/about-us/janitorial-service-software/efficiency-in-the-workplace/">Meet and Exceed Expectations</a>  </div></div>  <div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div> <img src="/wp-content/uploads/2012/05/canyon-cleantelligent.jpg" alt="Slide 1" /> <div class='slide-desc'> <h2>Quality</h2> Showcase performance in a new light.<a class="alignright" title="Quality" href="/about-us/janitorial-service-software/quality-control-software/">Advance Quality Control</a>  </div></div>  <div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div> <img src="/wp-content/uploads/2012/05/iPad-Cleantelligent.jpg" alt="Slide 1" /> <div class='slide-desc'> <h2>Mobility</h2> Users can access CleanTelligent anywhere, anytime on their favorite devices.<a class="alignright" title="Mobility" href="/about-us/janitorial-service-software/mobile-inspection-software/">Mobilize Inspections</a>  </div></div>  <div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div> <img src="/wp-content/uploads/2012/05/retention-cleantelligent.jpg" alt="Slide 1" /> <div class='slide-desc'> <h2>Retention</h2> Bridge the gap between employees and clients.<a class="alignright" title="Retention" href="/about-us/janitorial-service-software/client-retention-program/">Enhance Client Communication</a>  </div></div>  </div> <div class='shadow-wrap'><img class='shadow' alt="Slider Shadow" src='/wp-content/themes/cleantelligent/images/slider-shadow.png' /></div> <div id='slider-nav-1'> <a href="bidding-and-estimating-software"><img alt="Bidding and Estimating" src="/wp-content/themes/cleantelligent/images/BandElogo.jpg" width="100" style="position: absolute; right: -510px; top: -122px;"></a> <a href="#" id="next-1"><img src='/wp-content/themes/cleantelligent/images/next.png' alt='next' /></a> <div id='slider-nav-pager-1'></div> <a href="#" id="prev-1"><img src='/wp-content/themes/cleantelligent/images/prev.png' alt='previous' /></a> </div> <script type='text/javascript'>     jQuery('#slider-1').cycle({         next: '#next-1',         prev: '#prev-1',         fx: 'fade',         timeout: 30000000,         pause: 1,         pager: '#slider-nav-pager-1',         height: '433px',         width: '960px'     }) </script>

  4. #4
    Join Date
    Jun 2013
    Posts
    38
    Wow, I've messed this thred up... The code SHOULD be the following:

    Here's the CSS:
    Code:
    .slide-video {
    	width: 930px;
    	background: url('images/Slide2.jpg') no-repeat;
    }
    .slide-video-desc {
           width: 930px;
    	top: -1%;
           position: relative;
           background: url('images/slider-desc-bg.png') no-repeat;
    	overflow: hidden;
    	background-size:960px 85px;
    	height: 85px;
    	font-family: 'tradegothic';
    	font-size: 22px;
    	color: #F8F8F8;
    	text-align: left;
    	padding-bottom: 150px;
           line-height: .4em;
    }
    .slide-video-button {
    	    background: url("images/Whole_Button.png") no-repeat scroll left center #D1D1D1;
        background-size: 100% 100%;
        border-radius: 6px 6px 6px 6px;
        bottom: 45px;
        color: black;
        font-family: 'platin';
        font-size: 18px;
        height: 45px;
        padding-right: 40px;
    	padding-left: 15px;
    	float: right;
        position: relative;
    	text-decoration: none;
    	line-height: 2.5em;
    	right: 10px;
    }
    
    /*Slider Description*/
    .slide-desc {
        margin-top: -90px;
        width: 930px;
        padding: 5px 25px;
        position: relative;
        background: url('images/slider-desc-bg.png') no-repeat;
    	overflow: hidden;
    	background-size:960px 85px;
    	height: 85px;
    	font-family: 'tradegothic';
    	font-size: 22px;
    	color: #F8F8F8;
    	z-index: 2000;
    	text-align: left;
    }
    .slide {
    	font-famliy: 'tradegothic';
    }
    /*Slide Title*/
    .slide .slide-desc h2{
    	color:  #F8F8F8;
    	font-size:40px;
    	margin: 5px 0 5px -5px;
    	line-height: 0.7em;
    	font-family: 'platin';
           text-shadow:3px 3px 7px #181818;
    }
    /*Slide Button*/
    .demo-button {
        background: url("images/Whole_Button.png") no-repeat scroll left center #D1D1D1;
        background-size: 100% 100%;
        border-radius: 6px 6px 6px 6px;
        bottom: 17px;
        color: black;
        font-family: 'platin';
        font-size: 18px;
        height: 45px;
        padding-right: 40px;
    	padding-left: 15px;
    	float: right;
        position: relative;
    	text-decoration: none;
    	line-height: 2.5em;
    	right: 10px;
    }
    .demo-button a:hover {
        text-decoration: none;
    }
    
    .demo-button a:hover span {
        text-decoration: none;
    }
    .button-text {
    	padding-left: 50px; 
    	padding-right: -10px;
    }
    a:link {
       text-decoration: none;
    }
    .slider{
    	margin: 0 auto;
        padding-top: 15px;
    }
    .entry-content .shadow-wrap {
        margin: 0 auto;
        padding-left: 15px;
        padding-top: 10px;
        width: 1000px;
    }
    #slider-1 .slide img {
        width: 960px;
        max-width: 100%;
        padding-top: 15px;
    }
    
    #slider-1 .slide-desc img {
        width: auto;
    }
    /*Slogan*/
    .slide-header {
        color: #D1D1D1;
        font-family: 'tradegothic';
        font-size: 18px;
        padding: 5px 0 15px;
        text-align: left;
        padding-top: 10px;
    }
    #slider-nav-1 {
        bottom: 8px;
        margin: 0 auto;
        position: relative;
        width: 170px;
    }
    #slider-nav-pager-1 a{
    	background: url('images/unused.png') no-repeat;
    	padding: 2px 5px;
    	color: transparent;
    	margin: 0 4px;
    }
    #slider-nav-pager-1 .activeSlide{
    	background: url('images/current.png') no-repeat;
    }
    #slider-nav-1 #next-1 {
    	float:right;
    	margin-left: 3px;
    }
    #slider-nav-1 #prev-1 {
    	float:right;
    	margin-right: 3px;
    }
    #slider-nav-1 #slider-nav-pager-1 {
    	float:right;
    }
    Here's the html:
    Code:
    <div class='slider' id='slider-1'>
    <div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div>
    <img src="/wp-content/themes/cleantelligent/images/Slide1.jpg" alt="Slide 1" />
    <div class='slide-desc'>
    <h2 style="font-family: 'platin';">Our Mission</h2>
    Innovating smarter solutions for building and preserving success. 
    <a class="demo-button" title="Our Mission" href="https://www.cleantelligent.com/tour/"><span class="button-text">Take the Tour</span></a>
    
    </div></div>
    
    <div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div>
    <div class="slide-video">
    <iframe width="530" height="300" src="//www.youtube.com/embed/fa14mM1Zjhw" frameborder="0" allowfullscreen></iframe>
    <div class="slide-video-desc">
    <img src="images/slider-desc-bg.png">
    <h2 style="font-size: 40px; font-family: 'platin'; color: #F8F8F8;">Why CleanTelligent?</h2>
    Find out why hundreds of BSC's and Facility Managers love CleanTelligent.
    <div class="slide-video-button"><a title="Why CleanTelligent?" href="https://www.cleantelligent.com/benefits"><span class="button-text">Explore Benefits</span></a></div>
    
    </div>
    
    </div></div>
    
    <div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div>
    <img src="/wp-content/themes/cleantelligent/images/Slide3.jpg" alt="Slide 3" />
    <div class='slide-desc'>
    <h2 style="font-family: 'platin';">Request a Demo</h2>
    Schedule a free, one-on-one web demo with one of our software consultants.<a class="demo-button" title="Request a Demo" href="https://www.cleantelligent.com/get-started/"><span class="button-text">Request a Demo</span></a>
    
    </div></div>
    
    <div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div>
    <img src="/wp-content/themes/cleantelligent/images/Slide4.jpg" alt="Slide 4" />
    <div class='slide-desc'>
    <h2 style="font-family: 'platin';">Bidding and Estimating Module</h2>
    Increase revenus and successfully retain clients with impactful proposals.<a class="demo-button" title="Bidding and Estimating" href="https://www.cleantelligent.com/bidding-and-estimating-software/"><span class="button-text">More Information</span></a>
    
    </div></div>
    
    </div>
    
    <!--END OF SLIDER CONTENT-->
    
    <div class='shadow-wrap'><img class='shadow' alt="Slider Shadow" src='/wp-content/themes/cleantelligent/images/slider-shadow.png' /></div>
    <div id='slider-nav-1'>
    <a href="#" id="next-1"><img src='/wp-content/themes/cleantelligent/images/next.png' alt='next' /></a>
    <div id='slider-nav-pager-1'></div>
    <a href="#" id="prev-1"><img src='/wp-content/themes/cleantelligent/images/prev.png' alt='previous' /></a>
    </div>
    <script type='text/javascript'>
        jQuery('#slider-1').cycle({
            next: '#next-1',
            prev: '#prev-1',
            fx: 'fade',
            timeout: 50000,
            pause: 1,
            pager: '#slider-nav-pager-1',
            height: '433px',
            width: '960px'
        })
    </script>

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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