Swap image used as background with javascript - javascript

This js code below is used in Prestashop to swap the main image with by clicking thumbnails:
$('.js-qv-product-cover').attr('src', $(event.target).data('image-large-src'));
The HTML code for the main image is below:
<div class="product-cover">
<img class="js-qv-product-cover" src="{$product.cover.bySize.ats_large.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
</div>
I am trying to use the image as a background and I came up with this code:
<div class="product-cover" style="background-image: url({$product.cover.bySize.ats_large.url});"></div>
In the JS file, I change the 'src' to 'url' but it is not working when I click the thumbnails. What is the right way of doing this so that the main image is swapped as a background?

This is how you change a background image with jquery. In your case, just replace the random urls i used with $(event.target).data('image-large-src') (what should be your own image url.
$('.change').on('click', () => {
$('.container').css("background-image", "url('https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg')");
})
.container {
width: 500px;
height: 200px;
background-image: url('https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?auto=compress&cs=tinysrgb&h=350')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
<button class="change">Change</button>

I was able to resolve this by using the code below:
var quickviewDataBgPath = $(event.target).data('image-large-src');
$('.js-qv-product-cover').css('background-image', 'url(' + quickviewDataBgPath + ')' );

Related

Creating a button on slide image

So, what i want to do is to create a buttons in a specified place of my image, also these buttons will be another images. I complicated it all a lot and I just have no idea what to do next and how to.
Main concept is:
I have that slider with image 1 and image 2, when it gets pressed the image will be changed to image 3 and slider will be paused. After image 3 is displayed, there will be image buttons to appear on that image 3.
I dont know if i can use position: absolute; and position: relative; or if i am just doing it wrong. My problem is that i cant use css to give that <div id="slider"> the relative effect because i want to put in there images with absolute effect.
Sorry for complicating it all so much but i don't really know how to explain it simplier, also english is not my main language.
All the code in short
So here is my JS
<script>
var numer = Math.floor(Math.random()*2)+1;
function schowaj()
{
$("#slider").fadeOut(500);
}
function zmienslajd()
{
numer++; if (numer>2) numer=1;
var plik = "<img src=\"drzewo" + numer + ".png\" />";
document.getElementById("slider").innerHTML = plik;
$("#slider").fadeIn(500);
setTimeout("zmienslajd()", 5000);
setTimeout("schowaj()", 4500);
}
</script>
And here is HTML
<body onload="zmienslajd()">
<div id="slider">
</div>
</body>
Also CSS
#slider
{
background-color: #b3ffb3;
width: 90%;
height: 800px;
float: left;
}
Thanks for any help in advance.

How to resize a png image to fit in a div?

I am trying to resize a PNG image to fit in a div
This the div where I'd like to fit it in:
But this is how it looks like:
I tried to solve it by this Changing image sizes proportionally using CSS? but no change was noticed.
Here's the code snippet:
<div className="Card-header">
{this.props.roadmapID}
<label className="Card-header-status">{this.props.technology.toString().replace(/,/g , " ")}</label>
<label>{this.props.category}</label>
<img src="images/dark_chat.png"></img>
<CardStatus
status = {this.props.status}
onClickStatus = {this.props.onClickStatus}
/>
</div>
div.Card-header > img {
max-width: 100%;
max-height: 100%;
}
Use in your Stylesheet
.Card-header {
width: XYpx;
height: XYpx;
}
and this in your html:
<div class="card-header">
<img src="yourpic.jpg" style=" width:100%; height:100%;">
</div>
Your image will now expand to your given div size you declared in the stylesheet.
Why not set your image height to 100% of your div and then use width:auto ?
<img src="/path/to/your-image.png" style="height:100%; width:auto;" >
Even if the height of your div changes, the image will adjust proportionally.
Also, if you want this page to load reasonably quickly, it would definitely be worth re-sizing that image.
There is no code so this is a guess:
<div MB018>
<img src="whatever.jpg" width="10px" height="10px">
</div>

How to swap images from side bar to the middle div on clicking on those sidebar images?

I'm new to JavaScript and I'm trying to build a web page and I've 3 images of that product in my sidebar and one main image in the middle now I want to get the sidebar image in the middle when a user clicks on that sidebar image. I don't know how to go about this. I've already tried couple of ways which I've found online, one of them is this
1. How to swap image and video to another div?
But these are not working out for me.
What you have to do is save both images in a variable and then swap them. Look at the example below
var imgleft,
imgcenter,
$center = $(".center img");
$(".sidebar img").click(function(){
imgleft = $(this).attr("src");
imgcenter = $center.attr("src");
$center.attr("src", imgleft);
$(this).attr("src", imgcenter);
});
.sidebar{
position: absolute;
top: 0;
width: 70px;
height: 100%;
background: red;
}
.center{
width: 80px;
height: 80px;
margin:25% auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<img src="http://placehold.it/70x70">
<img src="http://placehold.it/70x60">
<img src="http://placehold.it/70x50">
</div>
<div class="center">
<img src="http://placehold.it/70x40">
</div>
You can use javascript's event handling (on each of your sidebar images) to solve this problem. First add the following java script code in your html:
<script type="text/javascript">
function changeToImage1(){
if(centerImage.src != "[1st-image-url.*]"){
centerImage.src = "[1st-image-url.*]";
}
}
function changeToImage2(){
if(centerImage.src != "[2nd-image-url.*]"){
centerImage.src = "[2nd-image-url.*]";
}
}
function changeToImage3(){
if(centerImage.src != "[3rd-image-url.*]"){
centerImage.src = "[3rd-image-url.*]";
}
}
</script>
Then you can simply add the above functions in the onClick attributes of your three sidebar div's accordingly. This can be done like this:
<div id = "first" onclick = "changeToImage1()">
...
</div>
<div id = "second" onclick = "changeToImage2()">
...
</div>
<div id = "third" onclick = "changeToImage3()">
...
</div>

I did a simple jquery slideshow - I want to toggle to one specific image by clicking thumbnail image

HTML:
<html>
<head>
<script type="text/javascript" src="jscript/jquery.js"></script>
</head>
<body>
<div class="slider_b">
<img src="img/frame_wood_back_460_380.jpg">
<img src="img/01_french_train_480_360.jpg">
<img src="img/05_cherries_480_360.jpg">
<img src="img/06_wheat_480_360.jpg">
<img src="img/10_renault_480_360.jpg">
</div>
<div id="button"><img src="img/06_wheat_480_360.jpg" width="48px" height="auto"></div>
<script>
setInterval("switchit()", 3000);
$('.slider_b img:gt(0)').hide();
function switchit() {
$('.slider_b img:first-child').fadeOut(0).next('img').fadeIn(2000).end().appendTo('.slider_b');
}
</script>
</body>
</html>
CSS:
.slider_box img{
position:relative;
top:0px;
left: 0px; }
.slider_box {
position:absolute;
width: 480px;
height: 360px; }
#button {
position: relative;
top: 10px;
left: 500px;}
The slideshow works - I just could not figure out how to switch the slideshow to one of the images by clicking a thumbnail button (id=button) - the slideshow should continue then in the regular circle order.
You could add a data attribute to your <img> elements, and append the button with the first child <img>element to carry over that data attribute. e.g:
<img src="" data-slide="1">
And for the append
var thumbnail = $("div.slider_b").find("img:first");
$("#button > img").replaceWith(thumbnail);
Once this is done, make it so that
("#button").on(click, function() {
var moveTo = $(this).find("img").data(slide);
var item = $("div.slider_b").find("[data-slide='" + moveTo + "']"
$("div.slider_b).prepend(item);
}
I'm not 100% right with the jQuery, but I believe I'm on the right lines. A bit more exploration down this route will get you to where you need to be.
Try making a relation between the slide and its thumbnail to fetch the respective slide, e.g. by using attibutes pairs, like data-slide="slide1" for the thumbnail and id="slide1" for the actual slide
on thumbnail click, adjust the current slide to the respective one and continue auto animation from this point
Point one is just one solution, it's the creativity part ;) You could come up with something else, like e.g. using thumbnails and slides indexes, etc. Good luck.

Changing DIV Background Image with JavaScript Not Working

I'm trying to change a div background image on hover, I want to do this with JaveScript so that it works cross browser without any issues. The current code I have is:
<div class="staff" style="background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);" onmouseover="this.style.background=url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png);" onmouseout="this.style.background=url(wp-content/uploads/2013/08/IMG_1828-300x237.png);">
</div>
CSS:
.staff{
width: 300px;
height: 237px;
}
Can anybody see what is causing the problem?
<style>
.staff{
width: 300px;
height: 237px;
background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);
}
.staff:hover {
background-image: url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png);
}
</style>
<div class="staff"></div>
You can use simple css too.. and it will work on all browsers
.staff { background: url("url/img.png")}
.staff:hover { background: url("url/hoverimg.png")}
<div class="staff"></div>
Better use CSS than inline CSS and javascript to achieve the effect.
If you still want to do it inline, here is a example.
jsfiddle
onmouseover="javascript: this.style.backgroundImage = 'url(\'image_url\')'";
you can use css like this:
.staff{
width: 300px;
height: 237px;
background-image: url("/wp-content/uploads/2013/08/IMG_1828- 300x237.png");
}
.staff:hover{
background-image: url("wp-content/uploads/2013/08/IMG_1836-v2-300x237.png");
}
or javascript like:
onmouseover="javascript: this.style.backgroundImage = 'url(\'image_url\')'";
WORKING DEMO
CHANGE I MADE
onmouseover="this.style.background='url()';"
You have to enclose the url in single qoutes...
I would also suggest you use CSS rather than JS to do this. But since you asked how to do it in JS, this is your answer
Most browser should support :hover in css, so there is no need to use JavaScript for this (relevant fiddle here):
.staff{
width: 300px;
height: 237px;
background-image: url("/wp-content/uploads/2013/08/IMG_1828- 300x237.png");
}
.staff:hover{
background-image: url("wp-content/uploads/2013/08/IMG_1836-v2-300x237.png");
}
If you really want to use JavaScript, than you have to wrap url(...) in quotes like so:
<div class="staff"
style="background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);"
onmouseover="this.style.background='url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png)';"
onmouseout="this.style.background='url(wp-content/uploads/2013/08/IMG_1828-300x237.png);'">
</div>
I think you can use this script :
$('.staff').mouseover(function() {
$(this).attr('style',"background:grey;");
})
$('.staff').mouseout(function() {
$(this).attr('style',"background:white;");
})
Change the color to the image path.
$(document).ready(function(){
var staff = $(".staff"); //Avoid repeated traverse
$("img").hover(function(){
staff.css("background",'url(' + $(this).attr('src') + ')');
//Assuming you want to set current image as background image
});
$( "img" ).mouseout(function(){
staff.css("background","none");
});
});
Okay this works for me so when you hover over an image the background of the set div is changed. So when ever you hover over an image .staff background is changed.
I believe that is what you want?

Categories