Tạo slideshow cho trang thiết kế nội thất bằng jQuery và CSS3

Slideshow mà mình giới thiệu cho các bạn trong bài viết này không chỉ dành riêng cho những trang thiết kế nội thất mà còn dùng chung cho những trang muốn trình diễn sản phẩm trên trang chủ.

Xem Demo | Download

HTML

Để thực hiện được slideshow này, trước tiên các bạn chèn các file jquery cần thiết bên dưới.

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>

Sau đó các bạn cứ theo khung chuẩn html như sau để mà chèn các ảnh và nội dung cần thiết

<div class="main_gallery">	    
				<div id="gallery" class="content-gallery">
					<div class="slideshow-container">
						<div id="slideshow" class="slideshow"></div>
						<div id="caption" class="caption-container"></div>
					</div>
				</div> 		
                 	
			   <div id="thumbs" class="navigation">
				  <ul class="thumbs noscript">
					 <li>
						<a class="thumb" name="leaf" href="images/img_b1.jpg" title="Agrocore">
						   <img src="images/img_1.jpg" alt="Agrocore" />
						</a>
						<div class="caption">
						   <div class="indent1">living set </div>
						   <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />
							Sleek and stylish interior to suit your taste.</div>
						   <div class="indent"><h4>Contemporary</h4></div>
						</div>
					 </li>
					 <li>
						<a class="thumb" name="leaf" href="images/img_b2.jpg" title="ProClinique">
						   <img src="images/img_2.jpg" alt="ProClinique" />
						</a>
						<div class="caption">
						   <div class="indent1">in grey</div>
						   <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>
						   <div class="indent"><h4>Sitting room </h4></div>
						</div>
					 </li>
					 <li>
						<a class="thumb" name="leaf" href="images/img_b3.jpg" title="Beauty">
						   <img src="images/img_3.jpg" alt="Beauty" />
						</a>
						<div class="caption">
						  <div class="indent1">living set </div>
						   <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />
							Sleek and stylish interior to suit your taste.</div>
						   <div class="indent"><h4>Contemporary</h4></div>
						</div>
					 </li>
					 <li>
						<a class="thumb" name="leaf" href="images/img_b4.jpg" title="Market">
						   <img src="images/img_4.jpg" alt="Market" />
						</a>
						<div class="caption">
						   <div class="indent1">in grey  </div>
						   <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>
						   <div class="indent"><h4>Sitting room </h4></div>
						</div>
					 </li>
					 <li class="last">
						<a class="thumb" name="leaf" href="images/img_b5.jpg" title="Business">
						   <img src="images/img_5.jpg" alt="Business" />
						</a>
						<div class="caption">
						   <div class="indent1">living set </div>
						   <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />
							Sleek and stylish interior to suit your taste.</div>
						   <div class="indent"><h4>Contemporary</h4></div>
						</div>
					 </li>
				  </ul>
			   </div>
			    
		</div>
	   

CSS

Tiếp tục , chúng ta sẽ định dạng lại slideshow cho gọn gàng với đoạn css sau :

/*======= awidth =======*/
.main_gallery{margin:0 auto; text-align:left; awidth:887px;}

/*--- gallery ---*/

div.content-gallery {

    /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
    display: none;
    awidth: 887px   
}

div.content-gallery a, div.navigation a {
    text-decoration: none;
    color: #777;
}

div.content-gallery a:focus, div.content-gallery a:hover, div.content a:active {
    text-decoration: underline;
}

div.slideshow-container {
    position: relative;
    clear: both;
    height: 425px; /* This should be set to be at least the height of the largest image in the slideshow */
}

div.loader {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(images/loader-gall.gif);
    background-repeat: no-repeat;
    background-position: center;
    awidth: 887px;
    height: 425px; /* This should be set to be at least the height of the largest image in the slideshow */
}

div.slideshow {
    height: 742px;
    /*overflow:hidden;*/
}

div.slideshow span.image-wrapper {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

div.slideshow a.advance-link {
    display: block;
    awidth: 887px;
    height: 425px; /* This should be set to be at least the height of the largest image in the slideshow */
    text-align: center;
    overflow:hidden;
}

div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
    text-decoration: none;
}

div.slideshow img {
    position:absolute;
    left:0;
    top:0;
}
div.caption-container {
    /*position: relative;
    clear: both;
    height:7px;*/
}

span.image-caption {
    display: block;
    position: absolute;
    awidth: 887px;
    top: 0;
    left: 0;
}

div.caption {
    awidth:887px;
    margin-top:346px;
    background: url(images/bg.png);height:79px;
}

div.caption h4 {
    float:left;
    z-index:10;
    font-size:31px;
    line-height:1.2em;
    display:block; margin:10px 0px 0px 0px; *margin:-4px 0px 0px 0px;
    margin-bottom:5px
}div.caption .indent{
        margin:16px 0 0 22px; position:relative; color:#999;
}div.caption .indent1{
        margin:44px 0 0 25px; *margin-left:3px; position:absolute; font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#fff;
}

div.image-desc {
    font-size:10px;
    color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:12px;
    float:right; line-height:1.5em;
    padding:23px 30px 0 251px; *padding-left:229px; position:absolute
}
 
div.navigation {
    background:#e9e9e9; padding:28px 28px 28px 30px; height:90px; position:absolute; z-index:1; top:439px;
    /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}

ul.thumbs {
    clear: both;
    margin: 0;
    padding: 0;
}

ul.thumbs li {
    float: left;
    padding: 0;
    padding:0 26px 0 0;
    list-style: none;

}
ul.thumbs li.last {
    padding-right:0;
}

a.thumb {
    display: block;
}

ul.thumbs li.selected a.thumb {

}

a.thumb:focus {
    outline: none;
}

ul.thumbs img {
    border: none;
    display: block;
}

jQuery

Và để slideshow có thể bắt đầu, thì công việc cuối cùng của các bạn là chèn thêm đoạn script bên dưới là xong.

<script type="text/javascript">
		jQuery(document).ready(function($) {
			/*$('div.content').css('display', 'block');*/
			$('div.content-gallery').css('display', 'block');

			var onMouseOutOpacity = 0.5;
			$('#thumbs ul.thumbs li').opacityrollover({
				mouseOutOpacity:   onMouseOutOpacity,
				mouseOverOpacity:  1.0,
				fadeSpeed:         'fast',
				exemptionSelector: '.selected'
			});
			
			var gallery = $('#thumbs').galleriffic({
			delay:                     6500,
			numThumbs:                 10,
			preloadAhead:              10,
			enableTopPager:            true,
			enableBottomPager:         true,
			maxPagesToShow:            7,
			imageContainerSel:         '#slideshow',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              'previous',
			nextLinkText:              'next',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             false,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				this.fadeTo('fast', 1.0);
			}
			});
		});
	</script>

Chúc các bạn thành công !

Chuyên Mục: Css, Javascript

Bài viết được đăng bởi webmaster