Right now i am changing the image by dropdown selection. But i want to change image by click on choice of image Like.
If the user click on green t-shirt image then set green image in <div>, If user click on yellow t-shirt then set yellow t-shirt in <div>.
But right now i am using dropdown for this procedure.
var bgArray = [
'https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg',
'https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg'
]
$('#imageroom').on('change', function() {
value = $(this).val() - 1;
$('#backgroundIMage').css({
'background-image': 'url(' + bgArray[value] + ')'
});
});
#backgroundIMage {
width: 400px;
height: 300px;
outline: 1px dotted gray;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label>Change image</label>
<select size="1" id="imageroom">
<option value="1">Image 1</option>
<option value="2">IMage 2</option>
</select>
<!-- for demo only -->
<hr>
<div id="backgroundIMage"></div>
You can handle the click event on an image. In the example below, I loop through the bgArray and dynamically display all the images in that array.
When one of the images is clicked, I show that image in the backgroundIMage element. Notice that I am using event delegation to make sure the image click works for any images that are dynamically added to the picker.
var bgArray = [
'https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg',
'https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg'
];
$("#picker").on("click", "img", function() {
//use event delegation to handle click event of any img tags in #picker
$('#backgroundIMage').css({
'background-image': 'url(' + this.src + ')'
});
//toggle selected
$("#picker img").removeClass("selected");
$(this).addClass("selected");
});
$(function() {
//initialize the picker on document load
bgArray.forEach(function(src) {
var img = new Image(50, 50);
img.src = src;
$("#picker").append(img);
});
//default the first one to be selected
$("#picker img").first().trigger("click");
});
#backgroundIMage {
width: 400px;
height: 300px;
outline: 1px dotted gray;
margin: 0 auto;
}
#picker img {
padding: 5px;
}
.selected {
background-color: dodgerblue;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Change image
<div id="picker"></div>
<hr>
<div id="backgroundIMage"></div>
Although it is king of hard to know exactly what you are trying to do, you should try to work with the click event of the image.
For a specific image :
$('#myImageId').click(function(){
$(this).css//etc..
});
For all images :
$('img').click(function(){
$(this).css//etc..
});
Related
I'm trying to add a class to a element when mouse hovers over it and then remove it when mouse leaves. It works currently only with giving it direct style in js.
As shown below I tried various ways to do this, all had some problems. Only the direct style change worked. On mouse leave I do the same but remove the class. The mouse over and leave checks canvas element.
poly.on('mouseover', function () {
this.opacity(1);
layer.draw();
$('.' + this.name()).css({ backgroundColor: "#ffcc00" });
//$('.' + this.name()).classList.add("textboxhighlight");
//$('.' + this.name()).className += " textboxhighlight";
//$('.' + this.name()).addClass("textboxhighlight");
//$('.' + this.name()).setAttribute("class", "textboxhighlight");
});
I'm not sure what the problem is as I tired various methods in adding class all of them with different problems. Using just this.addClass wont work as it needs to start with $('.' + this.name()) or nothing works in the code not even forcing the style part. $('.' + this.name()) refers to a class name in element with the same name as poly.
In css:
.textboxhighlight {
background-color: #ffcc00;
}
Thanks for any help.
May be you have to use in your css class background-color: #red !important. See working example here
It would be easier if you provided more code to work with. The example below will illustrate on how to add a class on hover and remove a class on leaving the element.
$('#element').hover(function(e) {
$(this).addClass('selected');
}, function(a) {
$(this).removeClass('selected');
});
.selected {
background-color: green;
}
<div id='element'>
element
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Hard to say what is wrong with your code when you don't show the mouseenter/leave parts of your code. But here is an example with classes:
https://codepen.io/andeersg/pen/MOGqPQ
$('.el').mouseenter(function() {
$(this).addClass('el-hover');
});
$('.el').mouseleave(function() {
$(this).removeClass('el-hover');
});
You can use toggleClass on hover event
$(".hoverclass").hover(function () {
$(this).toggleClass("hoverclass_toggle");
});
.hoverclass {
height: 72px;
width: 100%;
border: 1px solid #000;
}
.hoverclass_toggle {
background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
<div class="item">
<div id="item1"> <i class="icon"></i>Test</div>
</div>
<div>
Otherwise you can do that type :
$(".hoverclass").hover(
function () {
$(this).addClass("result_hover");
},
function () {
$(this).removeClass("result_hover");
}
);
.hoverclass {
height: 72px;
width: 100%;
border: 1px solid #000;
}
.result_hover {
background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
<div class="item">
<div id="item1">
<i class="icon"></i>Test
</div>
</div>
<div>
I'm animating images using JQuery. I'm using a button to activate the animation.
Here is my code:
$(document).ready(function(){
$("#b1").click(function(){ // b1 is the id of button
$(#img).animate({left: '+=20px'}); // img is the id of image
});
});
I have five images so when I click on another image, I need to put its id into the $(#img) instead of #img. So the second image will be animated.
How do I do this?
It sounds like you need to:
$(document).ready(function(){
// declare a variable to store the selected image
var selected = null;
// listen to clicks on all your images
// note: might want to filter this down to your target images
$("img").click(function(){
// save the selected image
selected = this
});
$("#b1").click(function(){
// animate the selected image
$(selected).animate({left: '+=20px'});
});
});
I hope that helps!
You can give the image a 'selected' class on click, then animate the selected:
$(document).ready(function() {
$(".image").click(function() {
// unselect others
$(".image").removeClass("selected");
// reselect this one
$(this).addClass("selected");
});
$("#b1").click(function() {
// animate selected
$(".image.selected").animate({left:'+=20px'});
});
});
html
<img class='image' src="image1"/>
<img class='image' src="image1"/>
<button id='b1'>click</button>
this will also allow you to style the selected image, eg:
.selected { border: 1px solid pink }
Add class (like img_to_animate) to images like
<img src='http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png' style="width:50px;height:50px;" class="img_to_animate" />
<img src='http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png' style="width:50px;height:50px;" class="img_to_animate" />
JavaScript
$(".img_to_animate").click(function(){
$(this).animate({left: '+=20px'});
})
This version will move the animated image back to its original position when the button is pushed, if a different image is selected:
$('img').on('click', function() {
$('img').removeClass("active");
$(this).addClass("active");
});
$('input[type="submit"]').on('click', function() {
if ( $(this).attr('data-current-image') !== $('img.active').attr('data-image-id') ) {
$('img[data-image-id=' + $(this).attr('data-current-image') + ']').animate({left: '10'});
}
$(this).attr('data-current-image',$('img.active').attr('data-image-id'));
$('img[data-image-id=' + $(this).attr('data-current-image') + ']').animate({left: '+20'});
});
img { display: block; position: relative; margin-top: 10px; left: 10px; height: 50px; width: 75px; }
img.active { border-right: 3px solid #f90; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type=submit data-current-image=0 value=" Animate! ">
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=1 class="active" />
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=2 />
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=3 />
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=4 />
<img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=5 />
I am implementing customize t-shirt using java script. Right now i am set one background image after click on image choice. But right now i want to set two different image in two div after click once.
If user click on yellow t-shirt then set tow images in two different div.(front size image and backside image of t-shirt).
var bgArray = [
'https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg',
'https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg',
'https://d2z4fd79oscvvx.cloudfront.net/0016630_quad_diamond_earings_205.jpeg',
];
$(".picker-image").on("click", "img", function() {
$('.backgroundIMage').css({
'background-image': 'url(' + this.src + ')'
});
});
$(function() {
bgArray.forEach(function(src) {
var img = new Image(50, 50);
img.src = src;
$(".picker-image").append(img);
});
});
.backgroundIMage{
width:400px;
height:300px;
outline:1px dotted gray;
margin:0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="picker-image"></div>
<!-- for demo only -->
<hr>
<div class="backgroundIMage"></div>
<div style="height:200px;width:200px;border:1px solid #333">
Front Side Image
</div>
<div style="height:200px;width:200px;border:1px solid #333">
back Side Image
</div>
Finally i want click t-shirt then two images set into two div front side of image and back side of image.
For Hints
https://jsfiddle.net/varunPes/p9L76j0z/2/
You will need to store the relationship between the front and back images. I'd suggest using an array of objects, where each item in the array contains the front and back images. Then when the selector item is clicked, you can populate the front and back images.
var bgArray = [
{
front: 'https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg',
back: 'http://lorempixel.com/200/200/sports/1/'
},
{
front: 'https://d2z4fd79oscvvx.cloudfront.net/0016630_quad_diamond_earings_205.jpeg',
back: 'http://lorempixel.com/200/200/sports/2/'
},
{
front: 'https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg',
back: 'http://lorempixel.com/200/200/sports/3/'
}
];
$(".picker-image").on("click", "img", function() {
//find the item in the array where the 'front' matches the URL of the image that was clicked
var src = this.src;
var item = bgArray.find(function(element) {
return element.front === src;
});
//set the front image
$("#front").css({
'background-image': 'url(' + item.front + ')'
});
//set the back image
$("#back").css({
'background-image': 'url(' + item.back + ')'
});
//indicate the selected one
$(".picker-image img").removeClass("selected");
$(this).addClass("selected");
});
$(function() {
//dynamically populate image picker
bgArray.forEach(function(item) {
var img = new Image(50, 50);
img.src = item.front;
$(".picker-image").append(img);
});
//select the first one by default
$(".picker-image img").first().trigger("click");
});
.product {
height:200px;
width:200px;
border:1px solid #333;
margin:10px;
display: inline-block;
}
.picker-image img {
padding: 5px;
}
.selected {
background-color: dodgerblue;
border-radius : 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Pick One
<div class="picker-image"></div>
<hr>
<div id="front" class="product">
Front Side Image
</div>
<div id="back" class="product">
Back Side Image
</div>
for this you have to make one default JSON structure like below:
{
data:[
{
"mainSrc":"https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg",
"backSrc":"sss.jpg",
"frontSrc":"sddsd.jpg"
},
{
"mainSrc":"https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg",
"backSrc":"sss.jpg",
"frontSrc":"sddsd.jpg"
}
]
}
and then refer the index dynamically from click element attr and the get front back src append it.
Please refer to this fiddle below :
Fiddle : fiddle
Just add id for front and back image div in html code and assign image background through javascript. Here is the changed code.
var bgArray = [
'https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg',
'https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg',
'https://d2z4fd79oscvvx.cloudfront.net/0016630_quad_diamond_earings_205.jpeg',
];
$(".picker-image").on("click", "img", function() {
$('.backgroundIMage').css({
'background-image': 'url(' + this.src + ')'
});
$('#front').css({
'background-image': 'url(' + bgArray[1] + ')'
});
$('#back').css({
'background-image': 'url(' + bgArray[2] + ')'
});
});
<div style="height:200px;width:200px;border:1px solid #333" id="front">
Front Side Image
</div>
<div style="height:200px;width:200px;border:1px solid #333" id="back">
back Side Image
</div>
Lately I've been trying my hand at animation using CSS and jQuery, it went well, however, now I want to do a bit more.
That is, once the user clicks information should show up on top of the image.
At the moment, I just have a few tags on which I perform the animations and class toggles.
My question is, I've thought about doing the following:
<div class= "singleImage">
<img src.... class="actualImage">
<p>text to put over the image</p>
</div>
This would be done per image which means that I'll have about 5 of them with different images.
However, I don't know how to go about selecting the previous element of class "actualImage".
Has anyone got any suggestions?
Thank you
Use the jQuery prev function. Example: Assume you want to select the image previous to the second image:
var foo = $(".singleImage").eq(1);
var bar = $(foo).prev().find('.actualImage');
Fiddle
Try this:
$('singleImage').children('.actualImage').prev();
I'm not sure why you are trying to select the previous element, but you could do something akin to this:
Bind a function to the click event for the element containing your image and caption.
Inside this function, toggle the caption.
Also, bind a click event handler to the body to detect clicks "off" the containing element.
HTML:
<a href="#" class="has-caption">
<img src="http://placehold.it/300x300" />
<span class="caption">This is a caption</span>
</a>
CSS:
a.has-caption { position: relative; }
a.has-caption .caption {
background: rgba(0, 0, 0, .25);
bottom: 0;
color: #fff;
display: none;
height: 20px;
left: 0;
line-height: 20px;
position: absolute;
width: 100%;
}
a.has-caption img { vertical-align: bottom }
JavaScript
$('a.has-caption').on('click', function(e) {
e.preventDefault(); e.stopPropagation();
var self = $(this)
, tmpId = 'toggle-' + Date.now();
self.addClass(tmpId);
$('span.caption', self).toggle();
$('body').one('click', function(e) {
if (!$(event.target).closest('.' + tmpId).length) {
$('span.caption', '.' + tmpId).hide();
self.removeClass(tmpId);
};
});
});
http://jsfiddle.net/83s7W/
I want to see if this is possible, i need to change a select element content to be displayed as divs using images just like a color picker. when the user selects clicks on a colored div i want an image to be displayed on the page. Also would i still be able to capture the selected item in a form hidden field?
It's a shirt building page, i have 12 colours, and 4 parts to a shirt. Any help, guidance would be appreciated.
My current code is below pretty basic.
function swapImage(){
var image = document.getElementById("neck");
var dropd = document.getElementById("imageneck");
image.src = dropd.value;
};
<select name="imageneck" id="imageneck" onChange="swapImage()">
<option value="WHITE-4.png">White</option>
</select>
<div id="poloneck"><img id="neck" src="WHITE-4.png" /></div>
A demo of the page image based is here ..demo
Thanks
I suggest you creating a <div> or <table> box for every picker. [Working demo]
Javascript
// instead of swapImage
function setImage(subject, color) {
var image = document.getElementById(subject);
image.src = color + ".jpg"; // e.g.: white.jpg
}
// general click event handler for changing color
function pickerClick(e) {
// event -> which box -> which color
e = e || event;
var target = e.target || e.srcElement;
if ( target.nodeName.toUpperCase() != "TD" ) return;
var color = target.className;
var picker = target.parentNode.parentNode;
// change <input> field
document.getElementById("imageneck").value = color;
// change appearance
setImage(picker, color);
}
// a specific click handler for neck
var collarbox = document.getElementById('collar');
collarbox.onclick = pickerClick;
HTML
<table class="picker" id="collar">
<tr>
<td class="white"></td>
<td class="black"></td>
<td class="red"></td>
<td class="blue"></td>
</tr>
</table>
CSS
.white { background: white }
.black { background: black; }
.red { background: red; }
.blue { background: blue; }
.picker { border: 1px solid #ccc; }
.picker td { width:30px; height: 30px; cursor: pointer; }
http://api.jquery.com/val/
Check the demo for select box.
You can change your color or image based on select box selected value.
You can use jquery add function for adding css or
addClass function and removeClass for changing class