- Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.
- tristique senectus et netus et malesuada fames ac turpis egestas.
- Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.
4. Paste below one of below code.
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {
//Speed of the slideshow
var speed = 5000;
//You have to specify width and height in #slider CSS properties
//After that, the following script will set the width and height accordingly
$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
//Assign a timer, so it will run periodically
var run = setInterval('newsscoller(0)', speed);
$('#gallery li:first, #excerpt li:first').addClass('selected');
//Pause the slidershow with clearInterval
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});
//Continue the slideshow with setInterval
$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed);
return false;
});
//Next Slide by calling the function
$('#btn-next').click(function () {
newsscoller(0);
return false;
});
//Previous slide by passing prev=1
$('#btn-prev').click(function () {
newsscoller(1);
return false;
});
//Mouse over, pause it, on mouse out, resume the slider show
$('#slider').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('newsscoller(0)', speed); });});
function newsscoller(prev) {
//Get the current selected item (with selected class), if none was found, get the first item
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
//if prev is set to 1 (previous item)
if (prev) {
//Get previous sibling
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
//if prev is set to 0 (next item)
} else {
//Get next sibling
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}
//clear the selected class
$('#excerpt li, #gallery li').removeClass('selected');
//reassign the selected class to current items
next_image.addClass('selected');
next_excerpt.addClass('selected');
//Scroll the items
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800); }
</script>
<style>
#slider {
/* You MUST specify the width and height */
width:660px;
height:275px;
position:relative;
overflow:hidden;
-moz-box-shadow: 0px 0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
}
#mask-gallery {
overflow:hidden;
}
#gallery {
list-style:none;
margin:0;
padding:0;
z-index:0;
width:900px;
overflow:hidden;
}
#gallery li {
float:left;
}
#mask-excerpt {
position:absolute;
top:0;
left:0;
z-index:500;
width:100px;
overflow:hidden;
}
#excerpt {
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
list-style:none;
margin:0;
padding:0;
z-index:10;
position:absolute;
top:0;
left:0;
width:100px;
background-color:#000;
overflow:hidden;
font-family:arial;
font-size:14px;
color:#fff;
}
#excerpt li {
padding:5px;
}
.clear {
clear:both;
}
#btn-prev {
border-top: 1px solid #96d1f8;
background: #65a9d7;
padding: 4px 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 9px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
#btn-prev:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
#btn-prev:active {
border-top-color: #238acf;
background: #238acf;
}
#btn-next {
border-top: 1px solid #96d1f8;
background: #65a9d7;
padding: 4px 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 9px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
#btn-next:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
#btn-next:active {
border-top-color: #238acf;
background: #238acf;
}
</style>
<div id="debug"></div>
<div id="slider">
<div id="mask-gallery">
<ul id="gallery">
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTe3A-LvHA7o7k7kTx7DDrLBzpciLAKkNkcDlje35IIuWMKWR2ZYxY5EBvg-b_DNOzdDh0vV14SW-TdABrw5feqtHzzIZklOKuBSI5z2CI9H5Y1JyoHV4wdBdxHJBzzYdYArmAEMBH1Gk/s1600/btrix_image2" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMM6dOWGzOkXG-SP4GOzsTjw34KgqZeeL2vnqq1Nxc8Axpi2Hw_A4iqZ9nGT47fHCIDkaM2ZBDfcImA52CPK0I0sVoPAvmmtyXmhnuMVX-JPKhOJGVIifxjaD0wIP5sGsJqJ7nAneitY/s1600/btrix_image1.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgsO_f3P1ppomoexPy3H7m2vZ521YXTKve82bv0RegRrqY56457jmPWj5WkAbzHzHvckfPgMQ9l_4c6sRYSjad531PluMMjRLBiFn9dmiNSVgpmQklpurzvpKz6yV_pbNlIL1TSTeRIGs/s1600/btrix_image3.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIj9QXoRXHPbx1DrpUh1my-A_8Vqxxy6r0fh-ZMQrGmZiiuZcGg9g_5YsqD0TSwuJNJ3pgln_FsAYXyjErQNfl2bPTR6QaM3rfIxtiVQpdXW2bIG6rCkzR5TJyt2F0LB-KP5vZ_fID32w/s1600/btrix_image5.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO8YOMdgv1wJ1uFEk-N1USY8wKaBgpO_lVRrde8ZoVpUh6jBJ7oTc0lvfIOm6CggwZLaq0hP328CbRh0ZximVlJH2RXozAwDZijGw-Nni3uQ6pkvk3e-KrH-5nwZo4XNVquZ9tbUXq3VI/s1600/btrix_image4.jpg" width="660" height="275" alt=""/></li>
</ul>
</div>
<div id="mask-excerpt">
<ul id="excerpt">
<li>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li>
<li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
<li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li>
<li>tristique senectus et netus et malesuada fames ac turpis egestas.</li>
<li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li> </ul>
</div>
</div>
<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-next">next</a>
</div>
<div class="clear"></div>
You can change photos by changing Image URLs
You can change image discription by changing red color text.
7. Now save your HTML/Javascript'.
You are done...
Không có nhận xét nào:
**Đăng nhận xét