How to replace html code in jquery img click - javascript

i'm new to jquery.I tried to load gallery when click image in script. I want to replace images src links when click the top images.
like this-->
image1 image2 image3
if image1 click load gallery1, if image2 click load gallery2 lick vice.
this is the my html code
<div>
<img id="book1" src="image1.jpg">
<img id="book2" src="image2.jpg">
</div>
<div id="pages">
<div style="background: url(1.jpg); width:100%;"></div>
<div style="background: url(2.jpg); width:100%;"></div>
<div style="background: url(3.jpg); width:100%;"></div>
<div>
i want to replace this
<div id="pages">
<div style="background: url(1.jpg); width:100%;"></div>
<div style="background: url(2.jpg); width:100%;"></div>
<div style="background: url(3.jpg); width:100%;"></div>
<div>
into
<div id="pages">
<div style="background: url(new1.jpg); width:100%;"></div>
<div style="background: url(new2.jpg); width:100%;"></div>
<div style="background: url(new3.jpg); width:100%;"></div>
<div>
i just want to replace the html
Can anyone help me to write this jquery?

You can try this:-
<div id="demo">
<img id="book1" src="image1.jpg" class="image1">
<img id="book2" src="image2.jpg" class="image2">
<img id="book3" src="image3.jpg" class="image3">
</div>
<div id="pages">
<div id="image1" style="background: url(1.jpg); width:100%;"></div>
<div id="image2" style="background: url(2.jpg); width:100%;"></div>
<div id="image3" style="background: url(3.jpg); width:100%;"></div>
<div>
javascript ->
$(document).on("click","#demo img",function(){
var $self= $(this);
selfId = '#' + $self.attr('class'),
$("#pages").replaceWith($("#"+selfId) );
});
example:http://api.jquery.com/replacewith/

You can try below code, where you can add data attribute data-gallary to images and its value equal to id of the page div. Add id to the page div as shown below.
Now you need to hide and show pages on the basis of clicked image.
NOTE - please make sure that all ids should be unique through out the HTML.
HTML:
<div>
<img id="book1" src="image1.jpg" data-gallary="page1">
<img id="book2" src="image2.jpg" data-gallary="page2">
</div>
<div id="pages">
<div id="page1" style="background: url(1.jpg); width:100%;"></div>
<div id="page2" style="background: url(2.jpg); width:100%;"></div>
<div id="page3" style="background: url(3.jpg); width:100%;"></div>
<div>
JQuery:
$(function(){
$('img[id^=book]').click(function(){
//hide all pages
$('div[id^=page]').hide();
//show corresponding page
var pageId= $(this).data('gallary');
$('#'+pageId).show();
});
});

Check this fiddle
Simple jQuery code
$("#book1").click(function(){
$('#page1').attr('src','http://placehold.it/350x150.gif');
$('#page2').attr('src','http://placehold.it/150x150.gif');
$('#page3').attr('src','http://placehold.it/100x100.gif');
});
$("#book2").click(function(){
$('#page1').attr('src','http://placehold.it/300x300.gif');
$('#page2').attr('src','http://placehold.it/150x150.gif');
$('#page3').attr('src','http://placehold.it/100x100.gif');
});

If you are simply trying to alter the img src, you can use this.
You can try $("#book1").attr("src",[your new src]);
If you want to do it on click...
$("#book1").click(function(){
$("#book1").attr("src",[your new src]);
});
Hope that helps

Related

jquery, change order of append tags

i have below code :
<div id="test">
<img src="#">
</div>
I append span to this div tag:
$('div#test').append('<span>123123</span>');
this result :
<div id="test">
<img src="#">
<span>123123<span>
</div>
but I want get span first , like this :
<div id="test">
<span>123123<span>
<img src="#">
</div>
Thanks for your help
You can use $.prepend()
$('div#test').prepend('<span>123123</span>');
You can use prepend(); to change the order.
.before() is easier to remember. Then there's its counterpart .insertBefore(). And then there's the previously mentioned .prepend() and its opposite .prependTo().
Plain JavaScript has .before(), .prepend(), .insertBefore(), and my favorite .insertAdjacentHTML(). .insertAdjacentHTML() is like .innerHTML that can insert htmlString at 4 different positions in relation to an element.
Signature:
DOMObject.insertAdjacentHTML(Position,htmlString)
Position:
"beforebegin" <div> "afterbegin" ... "beforeend" </div>"afterend"
$('#test1 img').before('<span>123123</span>');
$('<span>123123</span>').insertBefore('#test2 img');
$('#test3').prepend('<span>123123</span>');
$('<span>123123</span>').prependTo('#test4');
document.querySelector('#test5 img').before(document.createElement('SPAN').textContent = '123123');
var span = document.createElement('SPAN');
span.textContent = '123123';
document.querySelector('#test6').insertBefore(span, document.querySelector('#test6 img'));
document.querySelector('#test7').prepend(document.createElement('SPAN').textContent = '123123');
document.querySelector('#test8').insertAdjacentHTML('afterbegin', '<span>123123</span>');
<div id="test1">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test2">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test3">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test4">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test5">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test6">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test7">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test8">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Trying to filter non-hovered elements with jquery

I have an image gallery. Basically I am trying to go for something that lets the hovered image maintain its styling properties but the background (non-hovered images, I should say) filter to grayscale.
This is my first project and I am trying to push myself. I am making some mistakes but learning from each one. Your help is appreciated.
HTML:
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="images/martial-arts-banner/boxing.png">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="images/martial-arts-banner/kickboxing.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="images/martial-arts-banner/muaythai.png">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="images/martial-arts-banner/wrestling.png">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>
JQUERY:
$(document).ready(function() {
$(".disciplines img").hover(function(){
var images = $(".disciplines img");
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).next().find('h3').slideToggle();
if (images.not(".active-image") {
$(images).css("filter", blur("20px"));
}
});
You have to do it like below:-
$(document).ready(function() {
$("#image-gallery img").hover(function(){ // on hover of image
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).parent().css({"filter": ""}); //remove it's parent filter css
$('img').not($(this)).parent().css({"filter":'blur(5px)'}); //add filter css to all othe images parent-div apart from thr current clicked-one
}, function () { //when hover-out
$('.disciplines').css({"filter": ""}); //remove filter css from all div
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="https://ae01.alicdn.com/kf/HTB1dizJKFXXXXa_XFXXq6xXFXXXs/Closed-Type-Boxing-Helmet-Head-Protector-For-Taekwondo-Karate-Tai-MMA-Muay-Thai-Kickboxing-Competition-Training.jpg_50x50.jpg">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="http://www.days-gym.com/wp-content/uploads/2015/11/days-gym-website-logo.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="https://i.pinimg.com/favicons/50x/ded1fa7e09a93f576a8dc1060fbf82f7e63076e47a08abd0cf27887f.png?ca1416448b5d5bfb6c7465ba2cb5e0d4">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="https://iawrestle.files.wordpress.com/2017/06/screen-shot-2017-06-14-at-10-35-09-am.png?w=50&h=50&crop=1">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>

Looking for duplicate images in multiple divs

I have the below HTML I'm trying to loop through using jQuery's .each() method:
<div id="currentOrder" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 79px; max-height: none; height: auto;">
<div class="vehiclesInBox" id="product3">
<div class="fltLeft numAmt3">
<span id="builtVehNum" class="hidden"><span>X</span></span>
</div>
<div class="fltLeft positionRelative name3">
<img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
<img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
<img class="vehicle vehicleInShipment" src="../images/car1192015.png" style="">
</div>
<div class="fltRight recycle hidden" id="removeHidden3">:)</div>
<div class="fltRight removeX">–</div>
<div class="clear"></div>
</div>
<div class="vehiclesInBox" id="product4">
<div class="fltLeft numAmt4">
<span id="builtVehNum" class="hidden"><span>X</span></span>
</div>
<div class="fltLeft positionRelative name4">
<img class="wheelThmbs wheelsInShipment" src="../images/wheels2.png">
<img class="pattern patternInShipment" src="../images/fire1192015.png">
<img class="vehicle vehicleInShipment" src="../images/truck1192015.png" style="">
</div>
<div class="fltRight recycle hidden" id="removeHidden4">:)</div>
<div class="fltRight removeX">–</div>
<div class="clear"></div>
</div>
<div class="vehiclesInBox" id="product5">
<div class="fltLeft numAmt5"><span id="builtVehNum" class="hidden"><span>X</span></span>
</div>
<div class="fltLeft positionRelative name5">
<img class="wheelThmbs wheelsInShipment" src="../images/wheels3.png">
<img class="pattern patternInShipment" src="../images/squiggle1192015.png">
<img class="vehicle vehicleInShipment" src="../images/van1192015.png" style="">
</div>
<div class="fltRight recycle hidden" id="removeHidden5">:)</div>
<div class="fltRight removeX">–</div>
<div class="clear"></div>
</div>
<div class="vehiclesInBox" id="product6">
<div class="fltLeft numAmt6"><span id="builtVehNum" class="hidden"><span>X</span></span>
</div>
<div class="fltLeft positionRelative name6">
<img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
<img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
<img class="vehicle vehicleInShipment" src="../images/car1192015.png" style="">
</div>
<div class="fltRight recycle hidden" id="removeHidden6">:)</div>
<div class="fltRight removeX">–</div>
<div class="clear"></div>
</div>
I'm attempting to look through all of the div containers with a class of .vehiclesInBox and compare the image sources in them. If there is an exact match of all three images, remove the newest duplicate div#product(x), and add a number counter to the matched container in span#builtVehNum. My jQuery is below:
$("#currentOrder .vehiclesInBox").each(function() {
var jaVehicle = $(this).find("img.vehicleInShipment").attr("src")
var jaWheel = $(this).find("img.wheelsInShipment").attr("src")
var jaPattern = $(this).find("img.patternInShipment").attr("src")
});
I'm confused as to what the next step would be? Any help is appreciated. Thanks!
Its not yet adding the counter, but here you have a rough selection logic:
$("#currentOrder .vehiclesInBox").each(function() {
var cont = $(this),
images = cont.find('img'),
srcs = new Array(images.eq(0).attr('src'), images.eq(1).attr('src'), images.eq(2).attr('src')),
matchings = $("#currentOrder .vehiclesInBox").filter(function() {
return $(this).find('img[src="' + srcs[0] + '"]').length && $(this).find('img[src="' + srcs[1] + '"]').length && $(this).find('img[src="' + srcs[2] + '"]').length;
});
if (matchings.length > 1) {
matchings.filter(':last').fadeTo(500, .5);
}
});
Replace fadeTo(500, .5); with remove();.
Working fiddle
I would handle it something like this:
Loop over each product and then for each product, loop over its images.
Within the loop, you'll create an array to keep track of all image sources. Each time you encounter a new image, check if its source already exists in the array. If it does not, add it. If if DOES, add one to our duplicateCounter.
At the end, check if the duplicateCounter is equal to 3 (in other words, you have three matching image sources).
If so, remove the current product
See code below (run to see it in action):
function removeDuplicates() {
var imgSources = []; // empty array to hold image sources for comparison
var duplicateCounter; // counter to keep track of how many duplicate image sources found
var src;
// Loop over each product
$("#currentOrder .vehiclesInBox").each(function() {
// Reset the duplicate counter to zero for each new product
duplicateCounter = 0;
// Loop over the current product's images
$(this).find('img').each(function() {
src = $(this).attr('src');
// Check if the current image source exists in the image source array.
// If it does, increment the counter by one.
if ($.inArray(src, imgSources) > -1) {
duplicateCounter++;
} else {
// If it doesn't already exist in the array, add it
imgSources.push(src);
}
});
// Now that we've looped through all the images for the current product, check if the duplicate count is 3. If so, remove the product.
if (duplicateCounter === 3) {
$(this).remove();
}
});
}
$(document).ready(function() {
// Call the function on document ready
removeDuplicates();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="currentOrder" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 79px; max-height: none; height: auto;">
<div class="vehiclesInBox" id="product3">
<div>Product 3</div>
<img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
<img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
<img class="vehicle vehicleInShipment" src="../images/car1192015.png" style="">
</div>
<div class="vehiclesInBox" id="product4">
<div>Product 4</div>
<img class="wheelThmbs wheelsInShipment" src="../images/wheels2.png">
<img class="pattern patternInShipment" src="../images/fire1192015.png">
<img class="vehicle vehicleInShipment" src="../images/truck1192015.png" style="">
</div>
<div class="vehiclesInBox" id="product5">
<div>Product 5</div>
<img class="wheelThmbs wheelsInShipment" src="../images/wheels3.png">
<img class="pattern patternInShipment" src="../images/squiggle1192015.png">
<img class="vehicle vehicleInShipment" src="../images/van1192015.png" style="">
</div>
<div class="vehiclesInBox" id="product6">
<div>Product 6 (this one has duplicate images and will be removed...)</div>
<img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
<img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
<img class="vehicle vehicleInShipment" src="../images/car1192015.png" style="">
</div>
</body>
</html>

Thumbnails Image Slider

Here This is what I am trying. On Click of each thumbnail I have to display the Larger Image. I need some help so that I can know my issue why the click method is not working fine for me.
Thumbs Part HTML
<div class="ScreenShot" id="__control0" data--ui="__control0">
<div id="thumbs" data--ui="thumbs" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set0" data--ui="__set0" class="UiUx3DS">
<div id="__set0-items">
<div id="__view0" data--ui="__view0" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item0-__set0-0" data--ui="__item0-__set0-0">
<div id="__layout0-0" data--ui="__layout0-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-0" data--ui="__image0-0" src="images/image_01_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-1" data--ui="__item0-__set0-1">
<div id="__layout0-1" data--ui="__layout0-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-1" data--ui="__image0-1" src="images/image_02_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-2" data--ui="__item0-__set0-2">
<div id="__layout0-2" data--ui="__layout0-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-2" data--ui="__image0-2" src="images/image_03_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Larger Images HTML
<div id="panel" data--ui="panel" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set1" data--ui="__set1" class="UiUx3DS">
<div id="__set1-items">
<div id="__view1" data--ui="__view1" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item1-__set1-0" data--ui="__item1-__set1-0">
<div id="__layout1-0" data--ui="__layout1-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-0" data--ui="__image1-0" src="images/image_01_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-1" data--ui="__item1-__set1-1">
<div id="__layout1-1" data--ui="__layout1-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-1" data--ui="__image1-1" src="images/image_02_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-2" data--ui="__item1-__set1-2">
<div id="__layout1-2" data--ui="__layout1-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-2" data--ui="__image1-2" src="images/image_03_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Jquery
$("#thumbs img").click(function(){
$("#thumbs img.clicked").removeClass('clicked');
$("#panel img").hide();
$("#panel img:nth-child("+Number($(this).index()+1)+")").fadeIn();
$(this).addClass('clicked');
});
Here is the demo:
http://jsfiddle.net/L7yKp/5/
On click of each thumbnail the corresponding image should be fadeIn. But here every larger image is fading In.
Here is a simple working demo matching your needs: http://jsfiddle.net/D6XHt/1/
Note: It's not the same html as yours but should you push to the right direction. The technique i'ma using has one disadvantage. Without JS enabled your users will see only on big image.
BUT a real advantage is you will save bandwidth and page loading time if you have many images. This is because every big image will load only if the user clicks a thumbnail.
Here is another working solution with all images in document.
http://jsfiddle.net/D6XHt/2/
If you want to show your Images in a fancy lightbox Popup try
http://fancybox.net/home or
http://www.jacklmoore.com/colorbox

how to change the image of div on click of other image

I have two image div in HTML i want that onclik of one image other image should change
<div class="image_21"><img src="pagetwo_graph_two_4.png"/></div>
<div class="alignment"><img src="pagetwo_graph_one.png"/></div>
<div class="image_one"><img src="pagetwo_graph_two_1.png"/></div>
<div class="image_two"><img src="pagetwo_graph_two_2.png"/></div>
<div class="option_image"><img src="option1.png"/></div>
<div class="option_image_label">Option 1</div>
<div class="option_image_one"><img src="option1.png"/></div>
<div class="option_image_label_one">Option 2</div>
I want that on click on option_image_one it should change image of image_one and imagetwo
UPDATE
<html>
<head>
<script type="text/javascript">
function changeImage(){
document.getElementById('toChange').src='3.jpg';
}
</script>
</head>
<body>
<div class="option_image_one"><img src="1.jpg" onclick="changeImage()"/></div>
<div class="image_two"><img src="2.jpg" id="toChange"/></div>
</body>
</html>
Here the code that works for me
onclick = "document.getElementById('option_image_one').getElementsByTagName('img')[0].src='pagetwo_graph_two_2.png' "
It would work.
Best option is to give images some id and then do something like document.getElementById('yourId').src='newimage' (this should be some js function that you assign to onClick event on your first div)
You can try the following:
<div class="option_image_one">
<img onclick="document.getElementById('image2').src='http://www.w3schools.com/images/compatible_firefox.gif'" src="http://www.w3schools.com/images/compatible_chrome.gif"/>
</div>
<div class="image_two">
<img id="image2" src="http://www.w3schools.com/images/compatible_safari.gif"/>
</div>
Note that I have added an ID to the second image.
See the live example on this interactive HTML/JS editor
div are useless
<img src="option1.png" id="img1" onclick="document.getElementById('img2').src='newImage.png'"/>
<img src="pagetwo_graph_two_2.png" id="img2"/>
If you could use jQuery it would be like this:
$(".option_image_one img").onclick(function(event) {
$(".image_two img").attr('href','different_image,jpg').hide().fadeIn("fast");
});
To use jQuery import the jQuery library by including the following in your header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
As per Thomas's and Filype's answers, I would suggest that use divs but put onClick for img tag and not div tag.
This is for future enhancement so that if you would like to add anything else to these divs.
complete code just copy it and paste
jQuery(document).ready(function(){
jQuery('.small').click(function(){
if(jQuery(this).hasClass('active')!=true);
{
jQuery('.small').removeClass('active');
jQuery(this).addClass('active');
var new_link=jQuery(this).children('img').attr('src');
jQuery(countainer).children('img').attr('src',img_link);
}
});
});
</script>
</head>
<body>
<div class="countainer">
<img src="image/slideme-jQuery-slider.jpg" width="400" heiht="200"/ alt="">
</div>
<div class="clear"></div>
<br/>
<div class="mini">
<div class="small active">
<img src="image/Galleria-JavaScript-Image-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Trip-Tracker-slideshow.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Visual-Lightbox-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/RoyalSlider_-_Touch-Enabled_Image_Gallery_and_Content_Slider_Plugin.jpg" alt="" height="50" width="50" />
</div>
<div class="small">
<img src="image/UnoSlider-jQuery-image-slider.jpg" height="50" width="50" />
</div>
</div>

Categories