how to slide down 1 picture every specific time and so on - javascript

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);

Related

Load and play a gif with javascript onclick event

On my website I have three images 1.png, 2.png and 3.png. When I click on 1.png, I want the animated gif 1a.gif to be loaded and shown/updated in the img tag located in <div id="container">. When I click on 2.png, 2a.gif should be displayed (while 1a.gif vanishes) and so on... This is my code:
<html>
<body>
<div>
<img src="1.png" onclick="document.getElementById('img').src = '1a.gif'" />
<img src="2.png" onclick="document.getElementById('img').src = '2a.gif'" />
<img src="3.png" onclick="document.getElementById('img').src = '3a.gif'" />
</div>
<div id="container">
<img id="img" src="1a.gif" />
</div>
</html>
</body>
It is working, however unreliable (tested with firefox and chrome)! When I refresh the html page and click on 1.png, than on 2.png ... suddendly at one point only the first frame of the animated gif is shown. I have to click on the same image (1,2 or 3.png) again in order to make the gif run. Why? I am looking for a light weight javascript solution without jquery. I am just asking myself why the gif is not played properly once I click on the image.
As a side note: It would be nice to show a loading image while the gif (5 MB) is loading. I failed to achive that using css:
#container {background:url('loading.png') no-repeat; }
In this case the loading image doesn't show up at all. Probably because I am updating directly from one (e.g. 1a.gif) to another (e.g. 2a.gif).
Showing it right before loading the gif did not help as well:
<img src="1.png" onclick="document.getElementById('img').src = 'loading.png';
document.getElementById('img').src = '1a.gif'" />
There are many ways of implementing this kind of thing, but to keep in line with how you're doing it, you'll want to hook into the onload event of the img.
Note that in this snippet, I don't have access to your GIFs, so I'm using the dummyimage.com service, which is pretty fast, so you don't see the "loading" for very long.
window.onload = function() {
var img = document.getElementById('img');
var container = document.getElementById('container');
var showImage = function showImage() {
img.style.display = "inline";
container.style.backgroundImage = "";
};
img.addEventListener('load', showImage);
img.addEventListener('error', showImage);
var thumbs = document.getElementsByClassName('thumb');
for (var i = 0, z = thumbs.length; i < z; i++) {
var thumb = thumbs[i];
var handler = (function(t) {
return function clickThumb() {
container.style.backgroundImage = "url('https://dummyimage.com/500x500/000/fff.gif&text=loading')";
img.style.display = "none";
img.src = t.dataset['image'];
};
})(thumb);
thumb.addEventListener('click', handler);
}
};
<div>
<img src="1.png" class="thumb" data-image="https://dummyimage.com/500x200/000/fff.gif" />
<img src="2.png" class="thumb" data-image="https://dummyimage.com/200x200/000/fff.gif" />
<img src="3.png" class="thumb" data-image="https://dummyimage.com/500x500/000/fff.gif" />
</div>
<div id="container">
<img id="img" class="main" />
</div>
This happens bacause the second img is not loaded yet!
I suggest you to put the 2 img in 2 different divs and the use javascript to hide/show the entire div!

Auto image slider that starts from the beginning infinitely

As the sketch above shows, I need a slider gallery where four images slide to left one by one automatically. As the fourth image leaves, the first one follows as if it were the fifth.
How can I achieve this goal, without any plugins, just CSS and a little bit JavaScript?
Please check below code
<script type="text/javascript" src="js/jquery.flexislider.js"></script>
<div id="slider">
<div id="imageloader" style="display: none;">
<img src="images/header-logos_04.jpg" />
</div>
<img src="images/header-logos_04.jpg" />
<img src="images/header-logos_05.jpg" />
<img src="images/header-logos_02.jpg" />
<img src="images/header-logos_03.jpg" />
<img src="images/header-logos_02.jpg " />
<img src="images/header-logos_03.jpg" />
</div>
jquery.flexislider.js
jQuery(window).load(function(){
pic = jQuery("#slider").children("img");
numImgs = pic.length;
arrLeft = new Array(numImgs);
for (i=0;i<numImgs;i++){
totalWidth=0;
for(n=0;n<i;n++){
totalWidth += jQuery(pic[n]).width();
}
arrLeft[i] = totalWidth;
jQuery(pic[i]).css("left",totalWidth);
}
myInterval = setInterval("flexiScroll()",speed);
jQuery('#imageloader').hide();
jQuery(pic).show();
});
function flexiScroll(){
for (i=0;i<numImgs;i++){
arrLeft[i] -= 1;
if (arrLeft[i] == -(jQuery(pic[i]).width())){
totalWidth = 0;
for (n=0;n<numImgs;n++){
if (n!=i){
totalWidth += jQuery(pic[n]).width();
}
}
arrLeft[i] = totalWidth;
}
jQuery(pic[i]).css("left",arrLeft[i]);
}
}
The idea is to insert the images one at a time into HTML and have them take on the banner functionality, the tricky part that we couldn't repeat anything in HTML so keyframe should be used to animate it,
Check that article for the complete solution, and that live demo

Stop simple JavaScript slideshow after one loop

I know very little about JavaScript at all, but I'm looking for a solution to a simple code that I'd like to use. I'm not trying to execute any slides or fades, just a simple slideshow that switches from one image to the next. I want the slideshow to play through just once, and then stop on the last image in the sequence. Any help would be greatly appreciated!
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.next()
.end()
.appendTo('#slideshow');
}, 3000);
As I said, it's a very simple code. The first GIF runs only once, the second GIF loops. I would like the slideshow to stop on the looping GIF. I'm wondering if the '3000' (which I know corresponds to the length of each slide) can be changed to accomplish what I'm looking for. Or else adding a stop function... which I don't know how to write.
<div id="slideshow">
<div>
<img src="https://31.media.tumblr.com/e2c4bbaeb781a3b834cd09549595393f/
tumblr_noy3q3l1dy1uwyyx9o2_1280.gif">
</div>
<div>
<img src="https://33.media.tumblr.com/1d6495399687801067d62c83c4218644/
tumblr_noy3q3l1dy1uwyyx9o1_1280.gif">
</div>
</div>
Ok I have made this with the objective of being as clear and simple for you to understand as possible, (since you new to js...)
JS/Jquery:
$(function () {
setTimeout(playSlideShow, 3000);
function playSlideShow() {
var currImgContainer = $('.showImg');
if (!$(currImgContainer).hasClass('lastImg')) {
$('.showImg').removeClass('showImg').next().addClass('showImg');
setTimeout(playSlideShow, 3000);
}
}
});
So here we find the imgContainer(div) with the class "showImg", then using chaining, we remove the class and add it to the next imgContainer(div). Therefore toggling the CSS to show/hide the image until it finds the div that has the class "lastImg".
CSS:
.slideShow > div:not(.showImg) {
display: none;
}
.showImg {
display: block;
width: 400px;
height: 400px;
}
HTML:
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="Images/img1.png" alt="" />
</div>
<div>
<img src="Images/img2.png" alt="" />
</div>
<div>
<img src="Images/img3.png" alt="" />
</div>
<div class="lastImg">
<img src="Images/img4.png" alt="" />
</div>
</div>
This way you can have as many images as you want, just make sure the last div has class "lastImg" and the first one has the class "showImg".
Here is a fiddle
Hope it helps...
Try this:
var intervalID = null;
var iterator = 0;
var intervalDuration = 3000;
var slideshow = $('#slideshow');
var divs = slideshow.find('div');
//divs.filter(':gt(0)').hide();
divs.eq(iterator).show();
intervalID = setInterval(function(){
divs.eq(iterator).hide();
iterator += 1;
if (iterator === divs.length - 1) { clearInterval(intervalID); }
divs.eq(iterator).show();
}, intervalDuration);
#slideshow > div { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
</div>
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/PIXI.jpg" />
</div>
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
</div>
</div>
The HTML structure is same as yours but the only thing that I have changed are the image sources (tumbler images weren't loading for me). But JavaScript has been changed completely.
Add as many DIVs as you like in your HTML to test it out. Hope it helps.
Update #1:
Added CSS to hide the divs by default.
Increased the intervalDuration to 3000. Just to make sure there is ample time for the images to be loaded.
Commented the filter line of JS.
Added another JS line right below the previous filter line.
This update should also load your GIF only when it is needed to appear, hence will not be running in the background.
Let me if this works.

Add one or two pictures to the jQuery Slider

I need to add a jQuery slider to my website and I found this one met my requirement. But the slider just show 3 pictures, how to add one or two other pictures to the slider?
Demo: http://d.lanrentuku.com/down/js/jiaodiantu-883/
The html code
<div id="preview-slider">
<div id="preview-slide-1" style="display: none;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/01.jpg"></a></div>
<div class="preview-hide" id="preview-slide-2" style="display: block;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/02.jpg"></a></div>
<div class="preview-hide" id="preview-slide-3" style="display: none;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/03.jpg"></a></div>
<div id="preview-slider-line">
<ul id="preview-slider-holder">
<li class="preview-first">
<div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im1" alt="" src="images/01.png" style="top: 0px;"></a></div>
<span><a target="_blank" href="http://www.lanrentuku.com/">Picture 1</a></span></li>
<li class="preview-second">
<div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im2" alt="" src="images/02.png" style="top: -15px;"></a></div>
<span><a target="_blank" href="http://www.lanrentuku.com/">Picture 2</a></span></li>
<li class="preview-third">
<div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im3" alt="" src="images/03.png" style="top: 0px;"></a></div>
<span><a target="_blank" href="http://www.lanrentuku.com/">Picture 3</a></span></li>
</ul>
</div>
</div>
The javascript code
(function($){
$(document).ready(function() {
var ready = true, position = 1, timer = null, domer = $('ul#preview-slider-holder > li');
var anima = function () {
if (!ready) {
$("#preview-slider > div:not(':last'):not(':eq(" + position + ")')").each(function(){
if($(this).is(':animated')){
$(this).stop(true, true);
}
});
}
ready = false;
$("#preview-slider > div:not(':last'):not(':eq(" + position + ")')").hide();
$('img', this).animate({"top": "-15px"}, 200);
$('#preview-slide-' + (position + 1)).fadeIn(600, function(){
ready = true;
});
$('img[id^="preview-thumbnail-im"]:not([id="preview-thumbnail-im' + (position+1) + '"])').stop(true, false).animate({'top': '0px'}, 200);
position = ++ position % 3;
};
timer = setInterval(function(){anima.apply(domer)}, 2000); // interval time
domer.mouseover(function () {
timer == null || clearInterval(timer);
if($(this).hasClass('preview-first')){
position = 0;
} else if($(this).hasClass('preview-second')){
position = 1;
} else if($(this).hasClass('preview-third')){
position = 2;
}
anima.apply(this);
});
domer.mouseout(function () {
timer = setInterval(function(){anima.apply(domer)}, 2000);
});
});
})(jQuery);
I tried to add a li element , but it didn't work. I think I need to modify the javascript code. But I am not good at the programming, will someone tell how to do?
While I agree with DevlshOne, that many other quality sliders are out there. To answer the OP's question, you have to fix the code to not have hard-coded positions. Instead, I chose to use the index method present with jQuery.
Here is the jsFiddle that shows 4 images working (though I used the original code, so no actual images are displayed).
http://jsfiddle.net/a5yqx/
The key changes to the code are from:
position = ++ position % 3;
...
if($(this).hasClass('preview-first')){
position = 0;
} else if($(this).hasClass('preview-second')){
position = 1;
} else if($(this).hasClass('preview-third')){
position = 2;
}
To:
position = ++position % domer.length;
...
position = $(this).index();
Since I don't have the CSS to accompany it, I'm not sure what else you'll need to keep your style up, but good luck.
Last note, I changed the image size from your default to 10x10 in order to see it on my screen in the fiddle.

loading a whole series of images using jquery

I am using this library and what I want to do is to dynamically load the entire series of images in to an element:
<div id="product" style="width: 640px; height: 300px; overflow: hidden;">
/* These images are loaded and appended to the div element dynamically
<img src="images/01.jpg" alt="" />
<img src="images/02.jpg" alt="" />
<img src="images/03.jpg" alt="" />
<img src="images/04.jpg" alt="" />
<img src="images/05.jpg" alt="" />
<img src="images/06.jpg" alt="" />
/*
</div>
and then call the j360 library to set it up:
jQuery(document).ready(function() {
jQuery('#product').j360();
});
after the images have been loaded.
I have only seen tutorials where one image is loaded like this....
Are there any techniques for loading and appending a bunch of images in order?
Thanks in advance
Not sure what you mean by "load", but you can simply append the img element to the parent div, and the browser will say, "Hey, there's an image with a src, let me go grab it."
Here a working example on JSFiddle
If I understand correctly, you want to label the div as loading until ALL of the images to be appended have been properly loaded. This is doable, but a little complicated.
I am assuming you are able to generate an ordered list of image URLs. If this is not the case, then you have some more grunt work to do.
Essentially what we want to do is have each image check off whether or not it has loaded. Once they have all loaded, we can called a done handler and you can replace the loading .gif with your product view. Let's do it.
HTML
<div id="product" style="width: 640px; height: 300px; overflow: hidden;"></div>
JavaScript
$(document).ready(function() {
var imageURLs = [ ... ]; // you need to generate this (not too hard)
var imagesLoaded = 0;
var images = [ ];
$.each(imageURLs, function(i, imageURL) {
var $img = $('<img/>').load(function() {
imagesLoaded++;
// See if this was the last image we need to load.
if (imagesLoaded == imageURLs.length) {
showProductView();
}
})
.attr('src', imageURL);
images.push($img);
});
});
var showProductView = function() {
var $product = $('#product');
$.each(images, function(i, $img) {
$product.append($img);
});
$product.removeClass('loading');
$product.j360();
}
Don't know if this is specifically what you're looking for in your question, but this plugin will notify you when a set of images are loaded, and allow to perform a callback function after each individual image loads, or the whole set:
http://www.farinspace.com/jquery-image-preload-plugin/
It works great.

Categories

Resources