I am creating a product page in a checkout. The page has swatches that when clicked need to update the main image and corresponding thumbnails with a new set of images with the new color. You can view page here: http://www.briansugden.com/ai/tron.html un/pw is ai/ai.
Here's the code I have:
<div id="productGallery">
<div id="tronGallery_1" class="tab">
<div class="productGalleryMainImg">
<img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div>
<div id="productThumbs">
<img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" />
<img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" />
<img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
<img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
</div>
</div>
<div id="tronGallery_2" class="tab">
<div class="productGalleryMainImg">
<img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div>
<div id="productThumbs">
<img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" />
<img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" />
<img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
<img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
</div>
</div>
<div id="tronGallery_3" class="tab">
<div class="productGalleryMainImg">
<img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div>
<div id="productThumbs">
<img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" />
<img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" />
<img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
<img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
</div>
</div>
<div id="tronGallery_4" class="tab">
<div class="productGalleryMainImg">
<img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div>
<div id="productThumbs">
<img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" />
<img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" />
<img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
<img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
</div>
</div>
</div>
And the javascript for the main thumbs (change views of main image) as well as the swatches (change whole gallery to a new color):
$(function(evt) {
$("a:has(img.thumb)").click(function() {
var largePath = $(this).attr("href");
$("#photoLarge").attr({ src: largePath });
return false;
});
$("#productThumbs > a > img").click(function(e){
e.preventDefault();
$("#productThumbs > a > img").addClass("active").not(this).removeClass("active");
});
});
$(document).ready(function () {
$("#tronGallery_2").hide();
$("#tronGallery_3").hide();
$("#tronGallery_4").hide();
var clickHandler = function (link) {
$(".tab").hide();
$("#tronGallery_" + link.data.id).show();
$(".active").removeClass("active");
$(this).attr("class","active");
}
$(".swatch1").bind("click", {id:"1"} ,clickHandler);
$(".swatch2").bind("click", {id:"2"} ,clickHandler);
$(".swatch3").bind("click", {id:"3"} ,clickHandler);
$(".swatch4").bind("click", {id:"4"} ,clickHandler);
})
</script>
So the divs arent switching out correctly and the thumbs dont work once you chagne the swatch. I think I know what the problem is but I dont know how to fix it. I assume that once I switch out the divs by clicking a swatch its still targeting the div that was hidden instead of the one that's visible. How do I fix that.
Any help would be much appreciated!
First: those are some expensive shoes!
Second: you have lots of duplicate ID values. For example: photoLarge, productThumbs, thumb01, thumb02, thumb03, thumb04. Make those each unique and you will probably get better results.
Third: after the line $(this).attr("class","active"); you want to have another line to make the first thumbnail active because you removed its active class already. Your HTML marks the first thumbnail active, but that gets removed before it is shown.
Related
I have this Codepen demonstrating how to do it with jQuery. I tried to do it with vanilla Javascript but couldn't get it to work. How would you go about this in plain ES6?
HTML:
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<p>Placeholder images courtesty of Placeholder.com</p>
Javascript:
$(document).ready(function () {
// Scan the webpage for all class names of 'external'.
$(".external").each(function () {
// For each class name of 'external' found, find descendant tag "a" of that div and apply the rel attribute.
$(".external a").attr("rel", "external noopener");
});
});
You can just do document.querySelectorAll('.external a').forEach to iterate over all of them:
document.querySelectorAll('.external a').forEach((el) => {
el.setAttribute('rel', 'external noopener');
});
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<p>Placeholder images courtesty of Placeholder.com</p>
Below is my HTML:
<div id="mover">
<img src="images/building3.jpg" width="330" height="150" />
<img src="images/building5.jpg" width="330" height="150" />
<img src="images/building1.jpg" width="330" height="150" />
<img src="images/building4.jpg" width="330" height="150" />
</div>
Using:
document.getelementById("mover");
only gives me this div, how can I get all the images from this div using JavaScript?
Let me know if this works out for you:
<html>
<body>
<div id="mover">
<img src="images/building3.jpg" width="330" height="150" />
<img src="images/building5.jpg" width="330" height="150" />
<img src="images/building1.jpg" width="330" height="150" />
<img src="images/building4.jpg" width="330" height="150" />
</div>
<script>
var imgs = document.getElementById("mover").getElementsByTagName("img");
for (i in imgs) {
if (parseInt(i) > -1) { // check if it is an integer
alert(document.getElementById("mover").getElementsByTagName("img")[i].src);
}
}
</script>
</body>
</html>
I am designing a template in Channel Advisor for an eBay store and it doesn't allow jQuery.
I used JSSOR (non-jQuery one) for my slider in order to make it responsive and swipe/touch friendly.
When I use template tags in like:
<img src="{{ITEMIMAGEURL1}}"/>
<img src="{{THUMB(ITEMIMAGEURL1)}}"/>
I have 10 of {{ITEMIMAGEURL1}} and {{THUMB(ITEMIMAGEURL)}} tags number from 1-10 in the slider template, {{ }} are the image paths from Channel Advisor. In order to have this gallery work on all current listings, I need to delete some of the div tags correspond to how many images an ad has/uploaded to channel advisor.
Lets say I have this:
<div>
<div>
<img u="image" src="{{ITEMIMAGEURL1}}">
<img u="thumb" src="{{THUMB(ITEMIMAGEURL1)}}">
</div>
<div>
<img u="image" id="galleryImage2" src="{{ITEMIMAGEURL2}}">
<img u="thumb" id="thumbnail2" src="{{THUMB(ITEMIMAGEURL2)}}">
</div>
<div>
<img u="image" id="galleryImage3" src="{{ITEMIMAGEURL3}}">
<img u="thumb" id="thumbnail3" src="{{THUMB(ITEMIMAGEURL3)}}">
</div>
<div>
<img u="image" id="galleryImage4" src="{{ITEMIMAGEURL4}}">
<img u="thumb" id="thumbnail4" src="{{THUMB(ITEMIMAGEURL4)}}">
</div>
<div>
<img u="image" id="galleryImage5" src="{{ITEMIMAGEURL5}}">
<img u="thumb" id="thumbnail5" src="{{THUMB(ITEMIMAGEURL5)}}">
</div>
<div>
<img u="image" id="galleryImage6" src="{{ITEMIMAGEURL6}}">
<img u="thumb" id="thumbnail6" src="{{THUMB(ITEMIMAGEURL6)}}">
</div>
<div>
<img u="image" id="galleryImage7" src="{{ITEMIMAGEURL7}}">
<img u="thumb" id="thumbnail7" src="{{THUMB(ITEMIMAGEURL7)}}">
</div>
<div>
<img u="image" id="galleryImage8" src="{{ITEMIMAGEURL8}}">
<img u="thumb" id="thumbnail8" src="{{THUMB(ITEMIMAGEURL8)}}">
</div>
<div>
<img u="image" id="galleryImage9" src="{{ITEMIMAGEURL9}}">
<img u="thumb" id="thumbnail9" src="{{THUMB(ITEMIMAGEURL9)}}">
</div>
<div>
<img u="image" id="galleryImage10" src="{{ITEMIMAGEURL10}}">
<img u="thumb" id="thumbnail10" src="{{THUMB(ITEMIMAGEURL10)}}">
</div>
</div>
and a listing has only 4 sets of pictures/first 4 sets image paths. How do I delete the div tags that wrap around the images from 5-10?
Thank you in advance!!
Try ...
<img src="{{THUMB(ITEMIMAGEURL1)}}" id="img1">
<img src="{{THUMB(ITEMIMAGEURL2)}}" id="img2">
<img src="{{THUMB(ITEMIMAGEURL3)}}" id="img3">
<img src="{{THUMB(ITEMIMAGEURL4)}}" id="img4">
<img src="{{THUMB(ITEMIMAGEURL5)}}" id="img5">
<img src="{{THUMB(ITEMIMAGEURL6)}}" id="img6">
<img src="{{THUMB(ITEMIMAGEURL7)}}" id="img7">
<img src="{{THUMB(ITEMIMAGEURL8)}}" id="img8">
<img src="{{THUMB(ITEMIMAGEURL9)}}" id="img9">
<img src="{{THUMB(ITEMIMAGEURL10)}}" id="img10">
function removeImages(site_has) {
for (var i=site_has+1; i<=10; i++) {
document.getElementById('img'+i).style.visibility='hidden';
}
}
... to remove ...
var image_x = document.getElementById('img'+i);
image_x.parentNode.removeChild(image_x);
This is what I have for jquery
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
Here is my HTML
<div id="slides">
<img height="440" width="384" src="img/example-frame.png" alt="Example Frame" id="frame">
<div class="slides_container">
<img src="images/slidephotos/race_slide_photos/GS_slide.png" width="395" height="330" alt="Slide 1" />
<img src="images/slidephotos/race_slide_photos/RD_slide.png" width="395" height="330" alt="Slide 2" />
<img src="images/slidephotos/race_slide_photos/VH_slide.png" width="395" height="330" alt="Slide 3" />
<img src="images/slidephotos/race_slide_photos/FHH_slide.png" width="395" height="330" alt="Slide 4" />
<img src="images/slidephotos/race_slide_photos/HC_slide.png" width="395" height="330" alt="Slide 5" />
<img src="images/slidephotos/race_slide_photos/CR_slide.png" width="395" height="330" alt="Slide 6" />
<img src="images/slidephotos/race_slide_photos/CC_slide.png" width="395" height="330" alt="Slide 7" />
<img src="images/slidephotos/race_slide_photos/BB_slide.png" width="395" height="330" alt="Slide 8" />
</div>
<img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev" /> <img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next" />
</div>
You can see on the first image ive tried to make it link, but its a no go.
Any help would be greatly appreciated, Thanks
Depending on what plugin you are using, there may already be a built-in way to do this, but one option would be to add data attributes to your images containing the url you want to link to:
<img src="images/slidephotos/race_slide_photos/FHH_slide.png" width="395" height="330" alt="Slide 4" data-link="http://www.yoursite.com" />
Then you would add a click event handler to the images like this:
$(document).on('click', '.slides_container img', function(){
var url = $(this).data('link');
if (typeof url !== 'undefined')
{
window.location.href = url;
}
});
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>