Thumbnail image switching - javascript

I have a div clalled product_main_img that is the full standalone image. I then have four thumbnail images that are underneath switch when clicked switch with the main image to become the full displayed image.
What I need to accomplish is have the standalone image (the first one on page load) change to the image that is being clicked, and then have the standalone image move into the thumbnail section.
I have the thumbnails moving into the main div area, but the standalone image is then disappearing.
div class="product_visuals">
<div class="product_main_img">
<div class="main_img_switch"><img src="/images/main_img.jpg"></div>
</div>
<div class="product_selection">
<div class="product_details">
<img src="/images/img_01.jpg">
</div>
<div class="product_details">
<img src="/images/img_02.jpg">
</div>
<div class="product_details">
<img src="/images/img_03.jpg">
</div>
<div class="product_details">
<img src="/images/img_04.jpg">
</div>
</div
script:
$('.product_details img').click(function() {
$('.main_img_switch img').attr("src", $(this).attr("src"));
});

save a reference of the standalone image in a variable, something like this:
$('.product_details img').click(function() {
var mainImg = $('.main_img_switch img');
var tempSrc = mainImg.attr("src");
mainImg.attr("src", this.src));
this.src = tempSrc;
});

Related

Changing background of div in JavaScript

my code have one div and three picture
my main task is to show the same image in div when I hover over any picture what I am not able to understand is how can I do it with variables so that if in future if add more pictures it does not make any problem for me
note:: I want to do it by using variables I don't want to hard code image source.
I am also attaching the image for reference only.
function showproperties(element) {
var x = document.getElementById("box001");
x.innerHTML = element.alt;
var y = element.src;
document.getElementById("printsrc").innerHTML = y;
x.style.backgroundImage = y;
}
<body>
<div id="box001">main hover box
</div>
<div class="row">
<div class="image001 imgresize">
<img src="img01.jpg" alt="Image 001" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
</div>
<div class="image002 imgresize">
<img src="img02.jpg" alt="image 002" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
</div>
</div>
</body>
image
I tried to reproduce your issue and made some changes in it. I Hope that's how you wanted it to work. I have used some gif images url for demo purpose.
HTML:
<div id="box001" style="width: 100px;height: 100px; margin:7px">main hover box
</div>
<div class="row">
<div class="image001 imgresize">
<img src="https://c.tenor.com/Lvhj4QVL8-4AAAAS/server-is-for-javascript.gif" alt="Image 001" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
</div>
<div class="image002 imgresize">
<img src="https://c.tenor.com/FIcvxhgc1sgAAAAS/dit-is-een-code-blok-code.gif" alt="image 002" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
</div>
</div>
JS:
var x = document.getElementById("box001");
function showproperties(element) {
var y = element.src;
x.innerText = "";
x.style.backgroundImage = `url(${y})`;
}
function defaulttext(element) {
x.innerText = "main hover box";
x.style.backgroundImage = "none";
}
Full working code is available on this fiddle - https://jsfiddle.net/0h1urctn/

Event Delegation - event trigger with wrong class

I'm trying to create a slider with html- vanilla javascript. I'm able to open a modal, show a wide slider image and small images (thumbnails). Everything looks fine but when I click the thumbnails (which have "small_image" class) they trigger events, change image and add the same images to the thumbnails section again.
I checked the console with console.log(e.target.className) when I clicked any of the thumbnails and it shows "slider" class not "small_image" class.. Why is this happening and how can I fix this ?
Html section
<div id="photos" class="tabcontent">
<div class="tabslider">
<div>
<img src="{{image_path("posts/5-1537128615.jpg")}}" class="slider">
</div>
<div>
<img src="{{image_path("posts/6-1537128615.jpg")}}" class="slider">
</div>
<div>
<img src="{{image_path("posts/7-1537128615.jpg")}}" class="slider">
</div>
<div>
<img src="{{image_path("posts/8-1537128615.jpg")}}" class="slider">
</div>
<div id="myModal" class="modal">
<span class="close cursor">×</span>
<div class="modal-content">
<!-- wide image -->
<div class="mySlides">
<img class="show_slider" src="">
</div>
<!-- small images -->
<div class="small_images"></div>
</div>
</div>
</div>
</div>
Javascript section
document.querySelector(".tabslider").addEventListener("click", function (e) {
if (e.target.className = "slider") {
let smallImages = document.querySelector(".small_images"),
images = document.querySelectorAll(".slider"),
slider = document.querySelector(".show_slider"),
sliderDiv = document.querySelector(".mySlides"),
model = document.querySelector("#myModal");
model.style.display = "block";
images.forEach(function (image) {
let img = Elementor.create("img", {"src": image.src, "class": "small_image"}),
div = Elementor.create("div", {"class": "columnlightbox"},);
div.appendChild(img);
smallImages.appendChild(div);
});
slider.setAttribute("src", e.target.src);
sliderDiv.style.display = "block";
}
})
e.target.className = "slider"
You are setting the value here, not comparing :D

jquery mini slider, generate unique id

hello I am new in jquery, in my website I have mini slider please see demo here:
http://kulinari.ge/4x4/en/cars
Here I have two slider, the problem is that the slider is repeated in the second slider images and second slide images repeated first slider images, on hover. there is my jquery code, sorry for my bad english. how i can prevent this?
jQuery(document).ready(function () {
jQuery(".cars-img img").attr("src", jQuery(".img-log img").eq(0).attr("src"));
jQuery(".img-log img").eq(0).attr("class", "active");
jQuery(".img-log img").hover(function () {
jQuery(".cars-img img").attr("src", jQuery(this).attr('src'));
jQuery(".img-log img").removeAttr("class", "active");
jQuery(this).attr('class', 'active');
});
});
there is html
<div class="cars-img">
<img src="big image link" alt=""/>
</div>
<div class="img-smol">
<div class="img-log">
<a href="#">
<img src="small image link" alt=""/>
</a>
</div>
</div>

Jquery Image Popup Window with thumb nail pane

I want to load an image into a Div when I click on thumbnail image & when I click the image in Div it should pop-up in a new window (full size image)with all other thumbnail images as navigational pane.
I can load images into a Div & my second requirement is 100% similar to this plugin
https://41db8e9483f1ef6631809a5ed661fd36970b368a.googledrive.com/host/0B-XtjO0RzRaHbFI0TzFwV2FNYjg/example.html .
But it needs all the anchor "" tags in DIV with thumbnail image sources to load the thumbnail pane.
Can anyone help me to achieve this or is there any other plugin with a thumbnail pane & popup window?
(ColorBox is Ok but it doesn't have a thumbnail pane)
<div class="col-sm-8" style="float:left">
#foreach (var image in Model.Images)
{
<div class="gallery-item" id="gallery">
<a href="~/#image.ImageUrl" class="gallery-tem">
<img style="max-height:100px; max-width:100p src="~/#image.ThumbNailUrl" class="img-responsive" />
</a> <br />
</div>
}
</div>
<div class="col-sm-4" id="imageBox" style=" float:left">
<img src="~/#Model.MainImageUrl" />
</div>
<script>
$(".gallery-item a").click(function (evt) {
evt.preventDefault();
$("#imageBox").empty().append(
$("<img>", { src: this.href })
);
});
<script/>

How to display div with JavaScript depending on which image is clicked

I wish to display certain divs inside a main div dependent on which image is clicked. With out any decent knoweldge of Js or Jquery, I fail to do this without some assistance.
<form>
<input type="hidden" name="prod">
<div id="images">
<img id="one" src="http://lorempixel.com/200/200/">
<img id="two" src="http://lorempixel.com/201/200/ ">
<img id="three" src="http://lorempixel.com/203/200/ ">
<img id="four" src="http://lorempixel.com/204/200/ ">
</div>
</form>
<div id="description">
</div>
<div class="one">Brilliant</div>
<div class="two">Super</div>
<div class="tree">Amazing</div>
<div class="four">Excellent</div>
If the image which has id="one" is clicked, then display <div class="one">Brilliant</div> inside of the description div. Then ofcause if the second image is clicked, then display the the 'super' div inside the description div. I'd like to not have the descriptions visible until clicked, and only one div at a time to be shown.
The images are apart of a form because I need to forward the value of the id on the images to a variable.
Here is the script that does that.
$('#images').delegate('img', 'click', function () {
var $this = $(this);
// Clear formatting
$('#images img').removeClass('border-highlight');
// Highlight with coloured border
$this.addClass('border-highlight');
// Changes the value of the form field prod to the file name shown in the image.
$('[name="prod"]').val($this.attr('id').substring($this.attr('id').lastIndexOf('-') + 1));
//Alert for debugging simplicity
alert($('[name="prod"]').val());
});
Perhaps a function can be implemented into the current script?
Here is a fiddle, and it will all make sense of what I have as a whole currently.
Check out this fidde
You just need to add:
$('#description').html($('.' + $this.attr('id')).html());
At the bottom of your onclick function.
** You have a typo on the 3rd div with text(tree instead of three).
You can make it bit simple by adding the divs for description in div as I see no need to put the divs for description outside the description div and later adding it. You will need to hide all the divs we have in description div and show the one that is related to img being clicked.
Live Demo
Html
<input type="hidden" name="prod">
<div id="images">
<img id="imgone" src="http://lorempixel.com/200/200" />
<img id="imgtwo" src="http://lorempixel.com/201/200" />
<img id="imgthree" src="http://lorempixel.com/203/200" />
<img id="imgfour" src="http://lorempixel.com/204/200" />
</div>
<div id="description">
<div id="one">Brilliant</div>
<div id="two">Super</div>
<div id="three">Amazing</div>
<div id="four">Excellent</div>
</div>
Javascript
$('#images').delegate('img', 'click', function () {
$('#description div').hide();
$('#' + this.id.replace('img', '')).show();
});

Categories