Develop Reference

javascript slideshow shows all photos when site opens but not otherwise

My JavaScript slideshow is acting a little wonky. When I load the page the slide show pictures are visible, but it shows all the photos in the slideshow.
After a couple of seconds, it does decompress to one photo showing, and works how it's supposed to, flipping through each one at a 5 second pace.
However, no matter what I do, it still shows all the pictures at the beginning, which defeats the point...
This is my HTML:
<div class="container">
<div style="display: inline-block; ">
<img class="mySlides" src="../images/fullshot1.jpg">
</div>
<div style="display: inline-block; ">
<img class="mySlides2" src="../images/unnamed.jpg">
</div>
<div style="display: inline-block; ">
<img class="mySlides3" src="../images/fullshot2.jpg">
</div>
</div>
And this is my Jquery/JavaScript:
$(document).ready(function() {
console.log( "document loaded" );
//declare section variables
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
//how to click and make it work
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
//interval time
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
//this closes the doc ready
});
Can anybody help me with this/has had this problem too? Thanks!

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

jQuery .click() activates addClass() & class uses transform: translate to move element

I am making an image slider with two arrows on either side of the slider. For instance, when .click() the .rightArrow, a class is added ( .addClass() ) called .moveRight.
.moveRight{
transform: translate(760px,0);
-webkit-transform: translate(760px,0); /** Safari & Chrome **/
-o-transform: translate(760px,0); /** Opera **/
-moz-transform: translate(760px,0); /** Firefox **/
}
The problem is that this click event only triggers once. I imagine this is because I am telling the moveable element to go to a specific location.
I want to the element to keep moving right for a certain amount of px every time I .click() the .rightArrow.
The jQuery
$( document ).ready(function() {
$('.rightArrow').click( function() {
$('.imgGluedToThis').removeClass("moveLeft");
$('.imgGluedToThis').addClass("moveRight");
});
$('.leftArrow').click( function() {
$('.imgGluedToThis').removeClass("moveRight");
$('.imgGluedToThis').addClass("moveLeft");
});
});
Here is the HTML
<img src="rightArrow.png" class="rightArrow">
<img src="leftArrow.png" class="leftArrow">
<div class="pictures-container">
<div class="imgGluedToThis">
<div class="picture-container">
<a href="#openModal1">
<img src="house.png" class="picture">
</a>
</div>
<div class="picture-container">
<a href="#openModal1">
<img src="building.png" class="picture">
</a>
</div>
<div class="picture-container">
<a href="#openModal1">
<img src="house2.png" class="picture">
</a>
</div>
<div class="picture-container">
<a href="#openModal1">
<img src="house.png" class="picture">
</a>
</div>
<div class="picture-container">
<a href="#openModal1">
<img src="building.png" class="picture">
</a>
</div>
<div class="picture-container">
<a href="#openModal1">
<img src="house2.png" class="picture">
</a>
</div>
</div>
</div>

Use css() method in jQuery
$(document).ready(function() {
$('.rightArrow').click( function() {
$('.imgGluedToThis').css('left','+=10px');
});
$('.leftArrow').click( function() {
$('.imgGluedToThis').css('left','-=10px');
});
});
FIDDLE
Or use animate() method
$(document).ready(function() {
$('.rightArrow').click( function() {
$('.imgGluedToThis').animate({'left':'+=10px'});
});
$('.leftArrow').click( function() {
$('.imgGluedToThis').animate({'left':'-=10px'});
});
});
FIDDLE

The click event is triggering correctly every time - translate will move an element to a specific position. If it is already 760px across and click is called again to move it to 760px, nothing appears to happen.
You could set up a few classes to define where the leftmost, rightmost etc images should display, updating the classes for each element accordingly.
If the slider needs to be infinite, you will need to update the DOM too to set the elements to the correct order, updating the classes again once you have done so.

If you want to use translate, specifically, you will need to track it and change it with code, perhaps like this:
jQuery(function ($) {
// closures
var iImageIndex = 0;
var iSlideWidth = 760;
var iImageMax = $('.picture-container').size();
var $slides = $('.imgGluedToThis');
var fTranslate = function (iDirection) {
iDirection = (iDirection && (iDirection < 0) ) ? -1 : 1; // normalize direction
iImageIndex = iImageIndex + iDirection; // increment direction
iImageIndex = iImageIndex < 0 ? iImageMax + iImageMax : iImageIndex; // check left end
iImageIndex = iImageIndex % iImageMax; // check right end
$slides.css('transform', 'translate(' + (iSlideWidth * iImageIndex) + 'px, 0)');
}
// event methods (closures)
var fClickLeft = function () {
fTranslate(-1);
};
var fClickRight = function () {
fTranslate(1);
};
// event handlers
$('.rightArrow').click(fClickRight);
$('.leftArrow').click(fClickLeft);
});

Add Class to Following Element

I had a look out on the interwebs for a jQuery image gallery and couldn't find one that suited what I wanted to do. So I, ended up creating one myself and am trying to figure out how to get the prev and next buttons to work.
<div class="gallery portrait">
<nav>
<div class="close"></div>
<div class="prev"></div>
<div class="next"></div>
</nav>
<div class="cover">
<img src="image.jpg">
</div>
<ul class="thumbs">
<li class="thumb">
<img src="image.jpg">
</li>
...
</ul>
</div>
I'm also using a bit of jQuery to add a class of .full to the .thumb a element, which makes the thumbnails go fullscreen.
$( ".thumb a" ).click(function() {
$( this ).toggleClass( "full" );
$( "nav" ).addClass( "show" );
});
Now I can't work out this next bit, I need a way when the .prev or .next buttons are clicked for it to remove the class of .full from the current element and add it to the next or previous .thumb a element, depending on which was clicked.
I've got a demo setup here: http://codepen.io/realph/pen/hjvBG
Any help is appreciated, thanks in advance!
P.S. If this turns out well, I plan on releasing it for free. I guess you can't have too many jQuery image galleries, eh?

You can use $.next() and $.prev():
$(".prev").click(function () {
var current = $('.full');
current.prev('.thumb').addClass('full');
current.removeClass('full');
return false; // stop propagation; prevents image click event
});
$(".next").click(function () {
var current = $('.full');
current.next('.thumb').addClass('full');
current.removeClass('full');
return false; // stop propagation; prevents image click event
});

I suggest the following additions to your code to handle wrapping around with your next and previous links:
$(".next").click(function (event) {
navigate("next");
return false;
});
$(".prev").click(function (event) {
navigate("prev");
return false;
});
function navigate(operation) {
var $thumbs = $(".thumb"),
$full = $thumbs.find("a.full").closest(".thumb"),
$next;
$thumbs.find('a').removeClass('full');
if (operation == 'prev' && $full.is($thumbs.first()))
$next = $thumbs.last();
else if (operation == 'next' && $full.is($thumbs.last()))
$next = $thumbs.first();
else
$next = $full[operation]();
$next.find('a').click();
}
Here is a forked CodePen.

Something like this will get you started, but what you're wanting to do takes a little time to get just right.
<script type="text/javascript">
var imgSrcs = ['/imgs/this.jpg', '/imgs/will.jpg', '/imgs/work.jpg', '/imgs/just.jpg', '/imgs/fine.jpg'];//img url loaded into an array
var btnPrev = document.getElementById('prev'),
btnNext = document.getElementById('next'),
cover = document.getElementById('cover'),
thumb = document.getElementById('thumb'),
currImgIx = 0;
btnPrev.onclick = function () {
if (currImgIx === 0) { return; };
currImgIx--;
cover.src = imgSrcs[currImg];
thumb.src = imgSrcs[currImgIx];
};
btnNext.onclick = function () {
if (currImgIx === imgSrcs.length - 1) { return; };
currImgIx++;
cover.src = imgSrcs[currImgIx];
thumb.src = imgSrcs[currImgIx];
};
</script>
<div class="gallery portrait">
<nav>
<div class="close">X</div>
<div id="prev" class="prev">Prev</div>
<div id="next" class="next">Next</div>
</nav>
<div class="cover">
<img id="cover" src="image.jpg">
</div>
<ul class="thumbs">
<li class="thumb">
<img id="thumb" src="image.jpg">
</li>
...
</ul>
</div>

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

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