Develop Reference

Time delay in js function load

There seems to be a time delay before the below mention functions starts to work. I'm not able to identify why it is so. Could anybody guide me on this??
The images do show initially but without the fade in or fade out effect but once all the images are done going the first loop, the animation works.
JS:
$(function fadeAnimation() {
$(".imageClass img:gt(0)").hide();
setInterval(function fadeAnimation() {
$(".imageClass :first-child")
.fadeOut(3000)
.next("img")
.fadeIn(3000)
.end()
.appendTo(".imageClass");
}, 5500);
});
HTML:
<div class="slidesDiv" id="cust">
<img class="imageClass" src="images/Folder1/1.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/2.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/3.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/4.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/5.jpg?" alt="" />
</div>

You have a couple issues in your code.
.imageClass are the <img>... You have to use the container's class, which is .slidesDiv.
You have to use the callback of the animations... Now, both .fadeIn() and .fadeOut are executing at the same moment.
Your timing is wrong... The animations are taking 6 seconds, but you have set the interval to 5,5 seconds.
See comments in code for the details.
$(function fadeAnimation() {
// Hide all image
$(".slidesDiv img").hide();
// Fade the first in right away.
$(".slidesDiv :first-child")
.fadeIn(3000);
// Start the interval to loo through all image
// The interval will execute for the first time in 6 seconds from now.
setInterval(function fadeAnimation() {
// Fade the first out.
$(".slidesDiv :first-child")
.fadeOut(3000, function(){ // This is a "callback" when the fade out is complete
// Fade In the next image
$(this).next("img")
.fadeIn(3000);
// append the faded out image to the end of the container.
$(this).appendTo(".slidesDiv");
});
}, 6000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidesDiv" id="cust">
<img class="imageClass" src="https://via.placeholder.com/200x200?text=1" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=2" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=3" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=4" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=5" alt="" />
</div>

select image and and play an audio by clicking the button using html and javascript

<audio id="audio1" src="a.wav"></audio>
<audio id="audio2" src="b.wav"></audio>
<img id="img1" src="a.png" alt="" onselect="select()" />
<img id="img2" src="a.png" alt="" onselect="select()" />
<input type="button" onclick="play()">
i have multiple images in my code a and every image has its respective audio what i want to do is i want to select the image and on clicking the button i want to play the audio against that particular image .all this i want to do using javascript and html . so can any one help me javascript part?

You can do something like this using data attributes: http://jsfiddle.net/bostdgvp/
JS:
var selectedImage;
function select(image) {
var images = document.querySelectorAll('img');
var index = 0, length = images.length;
for (; index < length; index++) {
images[index].classList.remove('selected');
}
selectedImage = image.id;
image.classList.add('selected');
}
function playAudio() {
if (!selectedImage) {
alert('no image selected')
}
var image = document.getElementById(selectedImage);
var audioId = image.getAttribute('data-audio')
var audioElement = document.getElementById(audioId);
audioElement.play();
}
HTML:
<audio id="audio1" src="#Url.Content(item.Letter_Record)"></audio>
<audio id="audio2" src="#Url.Content(item.Letter_Record)"></audio>
<img id="img1" data-audio="audio1" src="http://placehold.it/350x150" alt="" onclick="select(this)" />
<img id="img2" data-audio="audio2" src="http://placehold.it/200x100" alt="" onclick="select(this)" />
<input type="button" value="play" onclick="playAudio()">
CSS:
.selected {
border: 1px solid red;
}

Just add this and it should work:
<img id="img1" src="a.png" alt="" onclick="select(this.id)" />
<img id="img2" src="a.png" alt="" onclick="select(this.id)" />
<script>
function select(num){
var x = num.match('/\d+/');
var audio = document.getElementById("audio"+x);
audio.play();
}
</script>

Here is a jsfiddle that should put you in the right direction:
http://jsfiddle.net/knopch/31oasnee/
<img id="img1" src="a.png" alt="" onclick="select(this.id)" />
<img id="img2" src="a.png" alt="" onclick="select(this.id)" />
<script>
function select(id){
console.log(id);
//play(id);
}
</script>
This allows you to click the image, and its id will be printed in the console (option+cmd+j on chrome+mac).
So if you have the id of the object being clicked (or selected), the select() functions really just need to pass on this id to the function that handles playback. If you have an audio file mapped to each image, you can select the audio file for playback based on the image id.

fadein and fadeout jquery

I have this code:
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
$(function()
{
function animation()
{
$('#img0').attr('src',$('#img1').attr('src')).fadeOut(4000).attr('src',$('#img2').attr('src')).fadeIn(4000).fadeOut(4000).attr('src',$('#img3').attr('src')).fadeIn(4000).fadeOut(4000) ;
animation();
}
});
</script>
<body>
<img id="img0" width="613" height="260" alt="OffLease Only Lot" />
<img src="static/images/home/slides/SLIDERS-mP.jpg" id="img1" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/slider_usa.jpg" id="img2" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/SLIDERS-ODOMETER.jpg" id="img3" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
</body>
</html>
i want slide showing the images by changing the source of image and proceed by appearing and disappearing it.
but my code didn't work
why?
how can i fix it?

If you're trying to cycle the three images, do something like this:
function animate1() {
$('#img1').fadeIn(4000, function() {
$('#img1').fadeOut(4000, animate2);
})
}
function animate2() {
// Do the same thing here, and do animate3 too
}
$(function() { $('#img0').fadeOut(4000, animate1) };
I would also take a minute to go over the jQuery fadeOut and fadeIn pages. I don't think they work the way you think they work.
http://api.jquery.com/fadeOut/
http://api.jquery.com/fadeIn/

You have to wait for an animation to finish first like this...
element$.fadeOut(4000, function () {
// Do something when faded out
element$.fadeIn(4000, function () {
// Do something when faded in
});
});

Javascript in Wordpress page

I want to run the following javascript in a Wordpress page.
Thus, I copied the script as it is directly into the source code of a page. The images are all displayed, but the "mouse over" effect is not working..
I tested the script embedded (directly as code) in a normal html page and it works perfectly.
Help and ideas greatly appreciated!
<script type="text/javascript">
var imgArray = new Array(
'pic1.jpg',
'pic2.jpg',
'pic3.jpg',
'pic4.jpg',
'pic5.jpg'
);
function swapImage(imgID) {
var theImage = document.getElementById('theImage');
var newImg;
newImg = imgArray[imgID];
theImage.src = newImg;
}
function preloadImages() {
for(var i = 0; i < imgArray.length; i++) {
var tmpImg = new Image;
tmpImg.src = imgArray[i];
}
}
</script>
<div id="image">
<img id="theImage" src="images/pic1.jpg" alt="" />
</div>
<div id="thumbs">
<img src="images/pic1_tn.jpg" alt="" onmouseover="swapImage(0);" />
<img src="images/pic2_tn.jpg" alt="" onmouseover="swapImage(1);" />
<img src="images/pic3_tn.jpg" alt="" onmouseover="swapImage(2);" />
<img src="images/pic4_tn.jpg" alt="" onmouseover="swapImage(3);" />
<img src="images/pic5_tn.jpg" alt="" onmouseover="swapImage(4);" />
<br />
</div>

jQuery code refactoring help needed

An update to before, here's what I'm dealing with:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" onClick=setupVeg("showCarrot", "carrotBig") /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" onClick=setupVeg("showBroc", "brocBig") /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
function setupVeg(thumbVeg, hiddenVeg) {
$("#" + thumbVeg).click(function() {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
});
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
isAnyBig=false;
});
</script>
</body>
This code is not working unfortunately. I have borrowed from suggested solution below.
Would be nice if it did work!
Any suggestions, most welcome.

I don't think you need any of the flags or the if conditions really. I think your logic is:
toggle carrotBig whenever showCarrot
is clicked.
hide div.hidden whenever showCarrot is clicked.
So all you need is:
$("#showCarrot").click(function () {
$("#carrotBig").toggle("fast");
$("#div.hidden").hide();
});
.toggle will handle one of your flags (isCarrotBig) and .hide() won't do anything if div.hidden is already hidden, so that takes care of your isAnyBig flag.
Now.. let's make that work with broc as well...
function setupVegetable(showId, toggleId) {
$("#" + showId).click(function () {
$("#" + toggleId).toggle("fast");
$("#div.hidden").hide();
});
}
setupVegetable("showCarrot", "carrotBig");
setupVegetable("showBroc", "brocBig");
If you're interested, you can refactor it FURTHER so you don't need to supply the IDs for each of the vegetables. I'll need to see your HTML markup though.

Ok I'll post a new answer in response to the edit.
Points worth noting:
Removed divs surrounding the imgs - they are unnecessary and complicate the relationship between the thumnnails and the large images.
Removed onclick attribute from within HTML - you will be attaching the event handlers in the JS so this is not needed.
Since the relationship between the thumbnails and the large images is quite obvious (the large images is just the next element) you don't need IDs to identify ANY of them. All you need is a class on the thumbnails.
Since we're not using IDs, only classes, you can add as many vegetables as you want without touching the JS
Your code modified:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<img class="imgThumb" src="img/carot.jpg" />
<img class="imgBig hidden" src="img/carot.jpg" />
<img class="imgThumb" src="img/brocoli.jpg" />
<img class="imgBig hidden" src="img/brocoli.jpg" />
</div>
<!-- end thumbs container -->
<script>
$("#thumbsContainer .imgThumb").click(function () {
var thisImgBig = $(this).next();
// Hide all imgBigs, except for this one
$("#thumbsContainer .imgBig").not(thisImgBig[0]).hide();
// Toggle this imgBig
thisImgBig.toggle();
});
$("#thumbsContainer .imgBig").click(function () {
// Hide this imgBig
$(this).hide();
});
</script>
</body>

create a function and reuse it....something like:
/**
* document here....
*/
var toggleElements = function() {
// your code here
}
and then
$("#whatever").click(toggleElements);

Personally I would suggest creating a simple jQuery plugin. Something like so:
(function($){
$.fn.big = function(options) {
var defaults = {
target: '#carrotBig',
};
var options = $.extend(defaults, options);
return this.each(function() {
$(this).click(function () {
isBrocBig=false;
if (isCarrotBig == false && isAnyBig == false) {
$(options.target).show("fast", function() {});
isCarrotBig=true;
isAnyBig=true;
}
else if (isCarrotBig == true) {
$(options.target).hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
else if (isCarrotBig == false && isAnyBig == true) {
$("div.hidden").hide("fast");
$(options.target).show("fast", function() {});
isCarrotBig=true;
}
else {
$("div.hidden").hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
});
});
};
})(jQuery);
Then you just call it with something like so:
$("#showCarrot").big({target: '#carrotBig'})
Your next step should be to investigate whether you can get rid of the global variables or not.

Ok I have found a neat(ish) sollution, dependent on each hidden DIV being the .next() one. If it isn't it won't work but should be fine generally though. Hacked!
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
$("div.thumb").click(function() {
var thumbVeg = $(this).attr("id");
var hiddenVeg = $(this).next().attr("id");
setupVeg(thumbVeg, hiddenVeg);
});
function setupVeg(thumbVeg, hiddenVeg) {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
});
</script>