So far this code will only slide the image by clicking the thumnail on it. When we click the thumnail image, the slideshow will slide the image. But now I ALSO want it to slide the image automatically in every 10 second.
Here is my fiddle:
The Html
<ul id="slide-wrapper">
<li><img src="http://placekitten.com/120/120"/>
<p class="caption-title">Linkin Park's 'The Hunting Party': Track-by-Track Review</p></li>
<li><img src="http://placekitten.com/120/120"/>
<p class="caption-title">Sarah Jaffe Video Premiere Watch The Haunting Lover Girl Clip</p></li>
</ul>
<ul class="thumnails">
<li class="img-thum">
<img src="http://placekitten.com/120/120"/>
<p class="thum-capt">Linkin Park's 'The Hunting Party': Track-by-Track Review</p></li>
<li class="img-thum">
<img src="http://placekitten.com/120/120"/>
<p class="thum-capt">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p></li>
</ul>
</div>
The JS
//When we click on thumb img
$('.thumnails li').click(function() {
var
//SlideShow
sshow = $(this).closest('#slideshow'),
//Big
big = sshow.find('#slide-wrapper'),
//thumb
thumb = sshow.find('.thumnails'),
//Get index
indx = thumb.find('li').index(this),
//Current index
currentIndx = big.find('li').index(big.find('li:visible'));
//If currentIndx is same as clicked indx don't do anything
if(currentIndx == indx) {
return;
}
big
//Fadeout current image
.find('li:visible').fadeOut(0).end()
//Fadein new image
.find('li:eq(' + indx + ')').fadeIn(0);
});
Thanks in advance.
Just trigger a click on your "slide button" every 10 seconds in document.ready using setInterval function:
$(document).ready(function() {
setInterval(function(){
//Your code inside here will be executed every 10 seconds
$('.thumnails li').trigger("click");
}, 10000);
}
What you can do is:
setTimeout(function (){
autoSlide();
},10000);
Next, put the slide code in a function like autoSlide and than wil he run the code automaticly every 10 seconds.
Put that function also in you click event.
Related
I want to create a basic page in html that displays a single image.
I also added two buttons Previous and Next. These buttons should allow the user to move forward or backward. Have 6 images in total. When the user reaches the end (or beginning when clicking on the back button) of the slide show, the slide show should not wrap around to the beginning (or end).
button onclick function for both the cases is not working. Its only getting displayed the first image as what mentioned in the img src attribute.
This is what I have done so far. I put all the images into an array and try to travel the array forward and backward side based on the button click.
<body>
<img src="img1.jpg" id="demo" style="width:400px;height:600px"/img>
<br/>
<input type="button" onclick="preImage()" value="Previous
">
<input type="button" onclick = "nextImage()" value="Next
">
<script>
var slider_content = document.getElementById("demo");
var image = ['img1','img2','img3','img4','img5','img6'];
var i = image.length;
function nextImage(){
if(i<image.length){
i=i+1;
}else{
i=1;
}
slider_content.innerHTML="<img src="+image[i-1]+".jpg>";
}
function preImage(){
if(i<image.length+1 && i>1){
i=i-1;
}else{
i=image.length;
}
slide_content.innerHTML = "<img src="+image[i-1]+".jpg">
}
</script>
</body>
Create a wrapper div to your image and change the innerHTML of the div.
<div id="demo" style="width:400px;height:600px">
<img src="img1.jpg">
</div>
An error needs to be corrected in the preImage function:
slide_content.innerHTML = "<img src="+image[i-1]+".jpg">
to
slider_content.innerHTML = "<img src="+image[i-1]+".jpg>";
and also what Daniel said.
On the first slide of my slider I've got some text that changes within an interval.
This is the jQuery to do this:
<script>
var x = 0;
var text = ["STRATEGICALLY", "COST-EFFECTIVELY", "EFFICIENTLY", "EXCEPTIONALLY"];
var counter = 0;
var elem = document.getElementById("banner-change");
var intervalID = setInterval(change, 1500);
function change() {
jQuery(elem).fadeOut('slow', function() {
jQuery(elem).text(text[counter++]);
if (counter >= text.length) {
counter = 0;
}
jQuery(elem).fadeIn('fast');
if (++x === 5) {
window.clearInterval(intervalID);
}
});
}
</script>
The slider looks something like this (The shortened code):
<div id="myCarousel" class="hp-top carousel fade" data-ride="carousel" data-interval="6000">
<div class="carousel-inner">
<div class="item active"><img src="" alt="Chicago"/><div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">What makes</span> us <span class="slider-green">specialists?</span></p>
<p class="slider-text">We just do ip</p>
<p class="slider-text"><span id="banner-change" class="slider-green">exceptionally</span></p>
</div>
</div>
</div>
So the words in <span id="banner-change" class="slider-green"> keep changing. This works fine. However, it only works for the first time the first banner is shown. Which makes sense as I'm clearing the interval as each word is only supposed to show once, but not sure how to do this so that every time the first banner shows it starts the interval again?
You can use the carousel evelts to trigger action.
e.relatedTarget will then refer to the slide, that is sliding into view.
So if you give it a unique id, you can identify it and run whatever action afterwards.
$('#myCarousel').on('slide.bs.carousel', function (e) {
if (e.relatedTarget.id === 'firstSlide') // do something
})
Sound Track List Image URL:
https://www.dropbox.com/s/2gtd4hrhfhxl4sm/song2.png?dl=0
I have list of sound track. If i click on the first song Play button will appear as well as click second one the play button should be moved to second song and first should be as usual. But output is not an expected result. Can anyone please guide me.??
My script is here
function loadSong(song_url, play_img, sequence_id){
var x = document.createElement("IMG");
x.setAttribute("src", "images/play.jpg");
document.getElementById(sequence_id).appendChild(x);
}
Since you didn't post the HTML structure, I'll assume it's something like:
<div id="container">
<div class="song">
<div class="songImgDiv"></div>
<div class="songTitle">Song 1</div>
</div>
<!-- other songs -->
</div>
And the img has class .activePlay.
$('.song').on('click', function () {
var imgSrc = "images/play.jpg";
$('.song img.activePlay').remove();
var img = $('<img/>').prop('src', imgSrc).addClass('activePlay');
$(this).find('.songImgDiv').append(img);
});
jsfiddle DEMO
I made my slider but it's acting wierd when it reach the last slide and have to start again on the first. Until getting to the last slide it slides upwards, but when it has to go to the first it does it downwards. And it kind a misses the first one. I mean - it shows it (even downwards), but on my pagination dots it doestn't add class .selected to the first one. After that it acts normally again until the next cycle.
Why is that two things happening. I've tried to change the if(active_slide.index() == last_slide.index()) with if(active_slide.next().length == 0) /and < /; if(active_slide.is(last_slide)) ... it didn;t help.
Here is jsfiddle http://jsbin.com/iwiroq/4/edit.
Building on #yabol's answer, I've built a minimal example with a rolling image list
HTML:
<div class="image-slider">
<ul>
<li><img src="http://lorempixel.com/400/200/sports" alt="" /></li>
<li><img src="http://lorempixel.com/400/200/food" alt="" /></li>
<li><img src="http://lorempixel.com/400/200/city" alt="" /></li>
<li><img src="http://lorempixel.com/400/200/nature" alt="" /></li>
</ul>
</div>
JS:
var image_list = $('.image-slider li');
image_list.hide();
var first_child = '.image-slider li:first-child';
var last_slide = $('.image-slider li:last-child');
var last_index = last_slide.index();
var active_slide = $(first_child);
active_slide.show();
setInterval(next, 5000);
function next(){
active_slide.slideUp();
if (active_slide.index() >= last_index)
$(first_child).insertAfter(active_slide);
active_slide = active_slide.next();
active_slide.slideDown();
}
JSFiddle or Tinker for playing.
The reason it slides downwards instead of upwards is because first element of the list is higher in dom tree than the last one. You can work it around by adding first element also as the last one, and the last one element gets loaded you swap it with first.
i want to make slideshow and I want to be its behavior every 2 minutes slide down 1 pictures and so on , until the end of the images , and start again from the first picture .
I tried to make it and i make part of it (every 2 minutes change picture) but not slide down 1 pictures but change picture without slide down .
And one help me to make entire slideshow
My code is below
HTML
<div id="slideshow">
<img src="images/slideshow.jpg" alt="" title="" />
<img src="images/slideshow2.jpg" alt="" title="" />
<img src="images/slideshow3.jpg" alt="" title="" />
<img src="images/slideshow4.jpg" alt="" title="" />
<img src="images/slideshow5.jpg" alt="" title="" />
</div>
<script type="text/javascript">
window.onload = slideShow;
</script>
Javascript
var counter = 0;
function slideShow(){
var fatherElem = document.getElementById('slideshow');
var fatherChildren = fatherElem.children;
var fatherElemScroll = fatherElem.scrollTop;
counter++;
if (fatherChildren.length > counter) {
fatherElem.scrollTop += 300;
}
else {
fatherElem.scrollTop = 0;
counter = 0;
}
setTimeout(slideShow, 1000);
document.getElementsByName('SearchBox')[0].value = counter;
}
I'm sorry for my big question but i'm really need help
You're manipulating scrollTop on the slideshow div by 300px every second. If your images are exactly 300px high and your div is exactly 300px high with no overflow and your div forces your images to be vertically in a row, then what your code would do is switch to the next image every second. So, in answer to your questions:
You have not written any code for the image to slide. Changing scrollTop by 300 is a sudden change, not a sliding change.
Your code changes the scrollTop value every second, not every two minutes. The second parameter to setTimeout is a value in milliseconds. If you want two minutes, you would have to set that value to (1000 * 60 * 2).
Here's your code in action on jsfiddle: http://jsfiddle.net/jfriend00/NyYpB/ with some real images.
If you want the images to actually slide, then you will have to write some animation code to slowly manipulate scrollTop from it's present value to the enxt higher value continuously over the period of time you want the animation to run.
Animation can be tricky to do well from scratch. Most people will choose to either use CSS3 animation or use an animation library (like the one in jQuery or YUI) that has already done the right kind of tweening work for you because it will be faster and probably generate a higher quality result.
Here's a working example you can see and play with using jQuery: http://jsfiddle.net/jfriend00/CyCDD/.
HTML:
<div id="slideshow">
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130938160417/1190079664_chLyW-Ti.jpg" alt="" title="" />
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941050422/1190083195_Az688-Ti.jpg" alt="" title="" />
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941050421/1190083481_C3nag-Ti.jpg" alt="" title="" />
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941070426/1190078330_umaLY-Ti.jpg" alt="" title="" />
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941070425/1190080772_RmZX2-Ti.jpg" alt="" title="" />
</div>
CSS:
#slideshow {width: 100px; height: 66px; font-size: 0; overflow: hidden;}
Javascript:
var counter = 0;
function gotoNextSlide() {
var $ss = $("#slideshow");
if (counter >= $ss.children().length - 1) {
counter = 0;
} else {
counter++;
}
$ss.animate({'scrollTop': (counter * 66) + 'px'}, 1000);
}
setInterval(gotoNextSlide, 3000);