How to debug click event handling in JavaScript code? - javascript

<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.

Related

Fetch all images in a container and display it as smaller thumbnails in another container

I have a static webpage with over 50-100 images and I want to create a separate container to show each image as a thumbnail. When clicking on the image, it should bring you to the image. I'm having issues when you click on the image and it should bring you to that image on the page.
// loop through img elements
$('.img-class').each(function(){
// create new image object
image = new Image();
// assign img src attribute value to object src property
image.src = $(this).attr('src');
var xx = document.getElementById('gallery');
xx.insertAdjacentHTML('beforeend', '<img src="'+ image.src +'"/>');
});
Sample of the HTML:
<div id='mydata'>
<img src='x.jpg'/>
<img src='1.jpg'/>
<img src='2.jpg'/>
<img src='3.jpg'/>
</div>
<div id='gallery'>
<img src='x.jpg' width='50' height='50'/>
<img src='1.jpg' width='50' height='50'/>
<img src='2.jpg' width='50' height='50'/>
<img src='3.jpg' width='50' height='50'/>
</div>
The gallery is generated when the page loads.

Removing a folder from multiple img src tags with JS

I have a site with many different gallery categories that display a smaller thumbnail size until the screen width is below 1200px, after which I would like to display the full size instead.
The images are displayed like so:
<section class="gallery category1">
<img id="cat1img1" src="cat1/small/img-1.jpg" alt="blah">
<img id="cat1img2" src="cat1/small/img-2.jpg" alt="blah">
etc...
</section>
<section class="gallery category2">
<img id="cat2img1" src="cat2/small/img-1.jpg" alt="blah">
<img id="cat2img2" src="cat2/small/img-2.jpg" alt="blah">
etc...
</section>
And all I want to do is use a JS media query with some jQuery to remove the "small/" from each tag without listing every single img so they can be freely added and removed without modifying the code again.
This is what I've tried but it's not changing the img url, though it does trigger my size change check:
function galleryBreak(x) {
if (x.matches) {
$('.gallery').children('img').attr('src').replace('/small','')
console.log('size change check');
};
};
var x=window.matchMedia('(max-width: 1200px)')
galleryBreak(x)
x.addListener(galleryBreak)
You have multiple (2) galleries and multiple images. You need to iterate over all images for all galleries. Something like this
function changeImagePaths(theGallery) {
var images = theGallery.querySelectorAll('img');
images.forEach( image => {
console.log('Path before: ', image.src)
image.src = image.src.replace('/small','')
console.log('Path AFTER: ', image.src)
});
};
var x=window.matchMedia('(max-width: 1200px)')
var myGalleries = document.querySelectorAll('.gallery')
myGalleries.forEach( gallery => {
if(x.matches) {
changeImagePaths(gallery)
}
});
<section class="gallery category1">
<img id="img1" src="cat1/small/img-1.jpg" alt="blah">
<img id="img2" src="cat1/small/img-2.jpg" alt="blah">
</section>
<section class="gallery category2">
<img id="img1" src="cat2/small/img-1.jpg" alt="blah">
<img id="img2" src="cat2/small/img-2.jpg" alt="blah">
</section>
JsFiddle to play with here
Now all of that said, if you can change the HTML please use Responsive images which will show you all you need can be set right in the image tag like:
<img srcset="elva-fairy-320w.jpg,
elva-fairy-480w.jpg 1.5x,
elva-fairy-640w.jpg 2x"
src="elva-fairy-640w.jpg"
alt="Elva dressed as a fairy">
add resize event listener on window so that on each window / browser resize this event will be fired
const galleryBreak = () => {
if (window.matchMedia('(max-width: 1200px)').matches) {
const images = document.querySelectorAll('.gallery img');
Array.from(images).forEach(img => {
const imgSrc = img.src.replace('/small', '');
img.src = imgSrc;
console.log(imgSrc);
});
}
};
window.addEventListener('resize', galleryBreak);

How to call an image from a different src location to that of the clicked thumbnail image onto a separate div?

I am making a gallery webpage that has small thumbnails and one bigger container div to display a selected image. The thumbnail images are 300x300 stored in a thumbnail folder, however I would like to be able to click the thumbnail and have it call the full resolution image from an "images" folder that have the same name as its thumbnail counterpart. So thumbanil 1 would be src="thumb/image1.jpg" and when this is clicked, instead of calling "thumb/image1.jpg" onto the main container i would like it to call "images/image1.jpg".
Code:
HTML
<div class="containermain">
<img id="img-main" alt="main image" src="images/placeholder.png" />
<div class="clear"></div></div>
<div class="containerimg">
<img class="img" alt="thumbnail-image1" src="thumb/image1.jpg" />
<img class="img" alt="thumbnail-image2" src="thumb/image2.jpg" />
<img class="img" alt="thumbnail-image3" src="thumb/image3.jpg" />
<img class="img" alt="thumbnail-image4" src="thumb/image4.jpg" />
<img class="img" alt="thumbnail-image5" src="thumb/image5.jpg" />
</div>
Javascript
$(document).ready( function() {
$("img.img" ).on( "click", function( event ) {
$("#img-main").attr("src", $(this).attr("src"));
});
});
So far this works, but the large imaged displayed on the main container is the thumbnail sized image and if i were to change the src to that from images folder with the full res image, the website will run too slow (the full images around 5mb-10mb each and I plan to have 18 images). Any help will be greatly appreciated thanks!
Do a string replace.
$(document).ready( function() {
$("img.img" ).on( "click", function( event ) {
var currentSrc= $(this).attr("src");
currentSrc=currentSrc.replace("thumb/", "images/");
$("#img-main").attr("src", currentSrc);
});
});
Here is a jsfiddle sample
But as TNC mentioned in the comment, the best solution is to keep an HTML 5 data attribute in your image tag for the full resolution image src
<img class="img" alt="thumbnail-image1" data-fullsize="images/image1.jpg"
src="thumb/image1.jpg" />
And read that and use it
$(document).ready( function() {
$("img.img" ).on( "click", function( event ) {
var newSrc= $(this).data("fullsize");
$("#img-main").attr("src", newSrc);
});
});
Here is a sample of that

JQuery-zoom dynamically change image

I'm using jquery-zoom and I have 4 images for a product on my website, when clicking one of the 4 images, I want the main image to change to the clicked image and still zoomable with jquery-zoom, now everytime when click different images, the main image gets updated to the clicked one but it's no longer zoomable, it's only zoomable when the page reloaded... How should I make my desired effect happen? Currently my code looks like this:
HTML:
<div class="product-main-image">
<img id="product-zoomable-image"src="/images/image1.jpg" alt="无图片" class="img-responsive" data-BigImgsrc="/images/image1.jpg">
</div>
<div class="product-other-images">
<img alt="无图片" src="/images/image1.jpg">
<img alt="无图片" src="/images/image2.jpg">
<img alt="无图片" src="/images/image3.jpg">
<img alt="无图片" src="/images/image4.jpg">
</div>
Javascript:
$('.product-carousel-image').click(function(event) { // change image shown as product image
var newImageUrl = $(this).attr('href');
console.log(newImageUrl) ;
$('#product-zoomable-image').attr('src', newImageUrl);
$('#product-zoomable-image').trigger('zoom.destroy');
$('#product-zoomable-image').zoom({url: newImageUrl});
});
Just figured out by myself, need to destroy the zoomImg first and then create another:
$('.product-carousel-image').click(function(event) { // change image shown as product image
var newImageUrl = $(this).attr('href');
$('#product-zoomable-image').attr('src', newImageUrl);
$('.product-main-image').trigger('zoom.destroy');
$('.product-main-image').zoom({url: newImageUrl});
});

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 */
}

Categories

Resources