Develop Reference

How to debug click event handling in JavaScript code?

<img id="Slide" src="SlideOne.png"></img>
<img id="SImg" src="Slide Image One.png" onmouseover="this.src='Slide Image Hover One.png';" onmouseout="this.src='Slide Image One.png';" onclick="SlideManager()"></img>
<img id="SImg" src="Slide Image Two.png" onmouseover="this.src='Slide Image Hover Two.png';" onmouseout="this.src='Slide Image Two.png';" onclick="SlideManager()"></img>
<img id="SImg" src="Slide Image Three.png" onmouseover="this.src='Slide Image Hover Three.png';" onmouseout="this.src='Slide Image Three.png';" onclick="SlideManager()"></img>
</center>
<script>
function SlideManager() {
if(document.getElementById('SImg').src.match("Slide Image One.png"))
{
document.getElementById('Slide').src = "SlideOne";
}
if(document.getElementById('SImg').src.match("Slide Image Two.png"))
{
document.getElementById('Slide').src = "SlideTwo";
}
if(document.getElementById('SImg').src.match("Slide Image Two.png"))
{
document.getElementById('Slide').src = "SlideTwo";
}
}
</script>
I am using JavaScript first time. It is supposed to change images when clicked on specific button/image.
But its not working.

you probably want to do this:
<img id="Slide" src="Slide Image One.png" />
<!-- id has to be unique, cannot use same id for multiple elements -->
<img id="Img1" src="Slide Image One.png" onmouseover="changeImage('Slide Image Hover One.png');" onmouseout="changeImage(currentSlide)" onclick="setCurrentSlide('Slide Image Hover One.png')" />
<!-- also <img /> is single-tag element -->
<img id="Img2" src="Slide Image Two.png" onmouseover="changeImage('Slide Image Hover Two.png');" onmouseout="changeImage(currentSlide)" onclick="setCurrentSlide('Slide Image Hover Two.png')" />
<img id="Img3" src="Slide Image Three.png" onmouseover="changeImage('Slide Image Hover Three.png');" onmouseout="changeImage(currentSlide)" onclick="setCurrentSlide('Slide Image Hover Three.png')" />
</center>
<script>
// use variable to remember current active slide (to be used to return to by mouseout)
var currentSlide = "Slide Image One.png";
// just temporarly change
function changeImage(name) {
document.getElementById('Slide').src = name;
}
// save new image to currentSlide and change image
function setCurrentSlide(name) {
currentSlide = name;
changeImage(currentSlide);
}
</script>

I want to change the "SlideOne" image to "SlideTwo" when clicked on "Slide Image Two" button.

Bootstrap Carousel Thumbnail Border not auto updating.

When the carousel goes to the next slide the border on the thumbnails should move to the next thumbnail to correspond with that image change. They do not. I discovered this error when adding a closing div to .carousel-inner that wasnt there it was causing my carousel to collapse after the last slide. Here is the code.
HTML
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="img/100325-01.jpg" class="img-responsive" alt="Regional Open Space Comparison" />
<div class="carousel-caption"><p></p>
<div class="photo-credit"><p>Photo Credit:<br />Media: Please submit high-resolution image requests to</p>
</div>
</div>
</div>
<div class="item" data-slide-number="1">
<img lazy-src="img/100325-02.jpg" class="img-responsive" alt="Ecological Analysis" />
<div class="carousel-caption"><p></p>
<div class="photo-credit"><p>Photo Credit: <br />Media: Please submit high-resolution image requests to</p>
</div>
</div>
</div>
</div>
CSS
.carousel-selector > .active, .selected img {
border: solid 2px #003C30;
}
JS
$('#myCarousel').carousel({
interval: 13000
});
// handles the carousel thumbnails
$('.carousel-selector').click(function () {
var selectorIdx = $(this).closest('li').index();
$('#myCarousel')
.carousel(selectorIdx)
.find('.carousel-selector').removeClass('selected')
.eq(selectorIdx).addClass('selected')
.end()
.find('.item').removeClass('selected')
.eq(selectorIdx).addClass('active');
});

Here's how you'd do it by index rather than all that string parsing.
$('.carousel-selector').click(function () {
$('#myCarousel').find('.carousel-selector').removeClass('selected');
var selectorIdx = $(this).addClass('selected').closest('li').index();
$('#myCarousel').find('.item').removeClass('selected')
.eq(selectorIdx).addClass('selected');
$('#myCarousel').carousel(selectorIdx);
});
Demo
Note that 1) I've added classes to each control element, and 2) I've removed the previous/next controls because they were overlapping the individual controls.
Here's a fun chained version:
$('#myCarousel')
.carousel(selectorIdx)
.find('.carousel-selector').removeClass('selected')
.eq(selectorIdx).addClass('selected')
.end()
.find('.item').removeClass('selected')
.eq(selectorIdx).addClass('active');
Demo 2

How to change Class From jquery but remove that class from another object

i have problem. i don't no how to fix that problem
HTML Code:
<div class="image">
<a href="#">
<img src="images/image1.jpg" id="mainimg-1">
</a>
</div>
<div class="otherthumbnailcontainer">
<div class="thumbnailimages" id="thumbnailcont-1">
<img src="images/image1.jpg" id="thumbnail-1" onMouseOver="changeimage('images/image1.jpg','mainimg-1','thumbnail-1','thumbnailcont-1');" class="thumbsmallimg selectedthumb">
<img src="images/image2.jpg" id="thumbnail-2" onMouseOver="changeimage('images/image2.jpg','mainimg-1','thumbnail-2','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image3.jpg" id="thumbnail-3" onMouseOver="changeimage('images/image3.jpg','mainimg-1','thumbnail-3','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image4.jpg" id="thumbnail-4" onMouseOver="changeimage('images/image4.jpg','mainimg-1','thumbnail-4','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image5.jpg" id="thumbnail-5" onMouseOver="changeimage('images/image5.jpg','mainimg-1','thumbnail-5','thumbnailcont-1');" class="thumbsmallimg">
</div>
</div>
Here is code:
function changeimage(thumburl,mainimgid,thumbnailimg,thumbmaindiv)
{
$('#'+mainimgid).attr("src", thumburl);
// $('#'+thumbnailimg).add("thumbsmallimg selectedthumb");
$('#'+thumbnailimg).removeClass("selectedthumb").addClass('thumbsmallimg');
// $('#'+thumbnailimg).toggleClass("selectedthumb");
}
Now what i would like to do on the website page is completely load the first image with these two class "thumbsmallimg selectedthumb" but when mouse goes over on another image the class "selectedthumb" will switch from one image to another.
EDIT:
http://jsfiddle.net/nZMpW/ Check this link. its like a product image gallery when you hover mouse on down image its come in big image. but first down image is selected if you move on another image its come in big image but is not select. css this ":hover" option only work when you mouse on that image but i don't want to do this

remove all you onmouseover events and use this jquery code in the $(document).ready() section
$(".thumbsmallimg").mouseover(function() {
$("#mainimg-1").attr("src", this.src);
$(".selectedthumb").removeClass("selectedthumb");
$(this).addClass("selectedthumb");
});
and, if you want it to work with several sets of thumbnails/bigImages, you can use data() attributes:
<img src="http://www.yoono.com/static/yoono_com_v8/img/iphone_yoono.png" id="thumbnail-1" class="thumbsmallimg selectedthumb" data-big-image="mainimg-1">
<img src="http://www1.pcmag.com/media/images/302835-apple-iphone-5-sprint.jpg" id="thumbnail-2" class="thumbsmallimg" data-big-image="mainimg-1">
.....
and in jqQuery:
$(".thumbsmallimg").mouseover(function() {
$("#" + $(this).data("big-image")).attr("src", this.src);
$(".selectedthumb").removeClass("selectedthumb");
$(this).addClass("selectedthumb");
});
here is your Fiddle updated again

instead having selectedthumb, in your css put those styles inside .thumbsmallimg:hover{
.thumbsmallimg:hover{
/* the styles that wrere in class .selectedthumb */
}

Javascript image swap not working with IE8

I have a simple script that swaps an image in a div when you click on a thumbnail image. Like an image gallery. Works perfectly in IE 9 and above and in chrome firefox and so on. Just not in IE8 It will swap the image 1 or 2 times then it just stops working. I got this script off another forum, and I am a novice when it comes to scripts. I would appreciate any advice. this is the javascript.
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('images/main/ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
Here is the html
<div id="imageWrap">
<img src="images/main/blue.JPG" alt="Main Image" id="mainImage"/>
</div>
<!-- thumbnails are links to the full size image -->
<img src="images/main/blue_thumb.JPG" alt="Image 1"/>
<img src="images/main/green_thumb.JPG" alt="Image 2"/>
<img src="images/main/red_thumb.JPG" alt="Image 3"/>
<img src="images/main/purple_thumb.JPG" alt="Image 4"/>
and the css
#imageWrap {
width: 640px;
height: 510px;
background: url(../../images/main/ajax-loader.gif) center center no-repeat;
}
here is the link to the sample I have up.
http://www.rkshootingsupply.com/test

Your problem is that you're setting the source of the image before adding the event listener. When the src is changed for the first time it is requested from the server and this takes a bit of time; meaning that the event listener has chance to be attached before the image loads and subsequently triggers the load event. Then when you load the image the next time, IE fetches the image from its local cache and the load event is triggered before the event is attached. This will result in the JavaScript not knowing that the image has loaded and thus not updating it on the page.
Here is the modified code which changes the source after the event listener is attached.
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('images/main/ajax-loader.gif')");
var i = $('<img />').load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
}).attr('src',this.href);
return false;
});
});

Jquery cycle - slideshow with different speed transitions?

I’m trying to make a fade slideshow with different speed values for the transition effect.
I don't want to change the Timeout, or the Fx…I just want to change the speed transition value for each image...It is possible?
Thank you very much in advance!!!
This is the code:
$('#s1').cycle({
fx: 'fade',
speed: 1000, //this is that I want to change for each img!!!
timeout: 1700,
next: '#s1',
});
<div id="s1" class="pics">
<img src="img.jpg" width="450" height="300" />
<img src="img.jpg" width="450" height="300" />
<img src="img.jpg" width="450" height="300" />
</div>

I use the following property to declare per slide delays:
timeoutFn: function (a) { return $(a).data('delay') * 1000; },
/.../
which reads the "delay" data attribute from the slide.
I.e. your image tags needs to be decorated in the following manner:
<div id="s1" class="pics">
<img src="img.jpg" width="450" height="300" data-delay="1" />
<img src="img.jpg" width="450" height="300" data-delay="2" />
<img src="img.jpg" width="450" height="300" data-delay="3" />
</div>
EDIT:
I read your question too quickly. I realize now you did not want to change the delay between transitions - but rather the speed of the transition.
I have not done that myself, but one approach that might work is using the event "before" in the following manner:
$('#s1').cycle({
fx: 'fade',
speed: 1000, //this is that I want to change for each img!!!
timeout: 1700,
next: '#s1',
before: function(e1, e2, opts) { opts.speed = parseInt($(e1).data('speed')); }
});