I am building a website with a store interface and I have multiple store items with 2 small pictures and a big picture. I want to be able to mouseover the smaller picture and change the source of the big picture to the same source as the currently moused over small picture.
<div id='store_checkout_image_div'>
<img default-image='Images/test-shirt.jpg' src='Images/test-shirt.jpg' alt='Shirt' class='store_checkout_image'/>
<div id='small_images'>
<img id='store_image_1' src='Images/placeholder1.jpg' alt='Front' class='fade_store'/>
<img id='store_image_2' src='Images/test-shirt.jpg' alt='Back' class='fade_store'/>
</div>
</div>
I tried my hand it making it work, and it does, but if multiple store items are there when I go to the next store item the picture is the same as the picture I previously used. Here is the jquery I have written. I am using php to grab item information and image source to create new store items in case that is important.
$('.fade_store').mouseover(function(){
var currentPic = $(this).attr('src');
$('.fade_store').fadeTo(0.15);
$('.store_checkout_image').attr('src', currentPic);
});//end mouseover
Note, I would like to only change the the picture of the currently selected set of html divs. Currently If I have more than 1 set, the source of all divs with the class store_checkout_image will change.
Try this maybe ?
$('.fade_store').mouseover(function(){
var currentPic = $(this).attr('src');
$(this).parent().find('.fade_store:first').fadeTo(0.15);
$(this).parent().find('.store_checkout_image:first').attr('src', currentPic);
});//end mouseover
If you just want to update the first store_checkout_image element:
$('.fade_store').mouseover(function(){
var currentPic = $(this).attr('src');
$('.fade_store').fadeTo('slow', 0.15);
$('.store_checkout_image').eq(0).attr('src', currentPic);
});//end mouseover
Otherwise update eq(0) to point to the index of whichever element you need (0 points to the first element, 1 to the second, etc).
Also, the fadeTo call isn't working correctly, try adding a transition speed:
$('.fade_store').fadeTo('slow', 0.15);
http://jsfiddle.net/Hz7x2/4/
Related
I have two problems.
I have a jQuery array which stores the URL's for images. Everything was working fine a few minutes ago, but now it's not. I have the following code for the images:
var images = ["link1","link2","etc","etc"];
index=0;
this to display them when you click their thumbnails:
$('.thumbnail').click(function(){
$('.large_view').prepend('<img src="'+images[index]+'" width="450px"/>');
});
and this to show the previous/next images in the array:
$('.next').click(function(){
index = (index===0)?(images.length-1):(index-1);
$('.large_view img').attr('src',images[index]);
});
$('.previous').click(function(){
index = (index==images.length-1)?0:(index+1);
$('.large_view img').attr('src',images[index]);
});
My problem is that when I click a thumbnail, the same image (the first one in the array) always shows up. After that I can change the image properly with my next/previous buttons.
When I display the images in my array with code that includes the following, it shows up backwards, from the last item in the array to the first one: for(var i=0; i<images.length; i++)
P.S. the only reason the code inside .previous and .next are backwards is because the array is somehow backwards, like I said.
The first problem is that when any thumbnail is clicked, index will be at its original value of 0, which is what's always making the first one show up. To fix this, you'll need to determine the corresponding index from whichever thumbnail was clicked (perhaps using $(this).attr('data-image-index'), if you stuffed the index into an attribute like that).
The second problem is that you want to use .append instead of .prepend in the for loop to tack each new thumbnail onto the end of the set instead of the beginning.
Also, the click handlers for .next and .previous appear to be backwards.
And you might want to use $('.large_view').html(...) instead of $('.large_view').prepend(...) if you only want one large picture to be displayed at any given time.
1) your index is 0, so you are going to get the first image every time.
this line
$('.large_view').prepend('<img src="'+images[index]+'" width="450px"/>');
should be changed, to reference the index of the clicked thumbnail instead of the variable called index. so something like
$('.large_view').prepend('<img src="'+ $(this).attr("index") +'" width="450px"/>');
You will add the index attr when creating the thumbnails, for example:
for( var i=0; i<images.length; i++){
var thumbnails = '<label class="align">' + '<img class="thumbnail" src="'+images[i]+'" index="' + i + '"/></label>';
$('.gallery').prepend(thumbnails);
}
2) for your second problem, you are using prepend, which as the name implies PREpends. you will want to use append() to get them in the forward sequence as you want.
I'm trying to make an image which changes based on clicking on images in a list.
The only trouble is, the images in the list have their url embedded in a style as a background-image.
How would I call the url of the img src to the new image?
<ul id="swatchList_att1"><li class="Name AttributeSwatch In_stock colourSwatch" id="attributeSwatch_1" data-attname="att1" data-attvalue="Deep Blue (001)" data-atrsku="0012345" style="background-image: url(https://color.adobe.com/api/v2/themes/2022184.png);">
EDIT
Wow, great response time.
and
Wow, I phrased this incredibly poorly yesterday. Apologies.
The list "swatchList_att1" is a group of color swatches which are shrunk to 50% of the jpeg size.
All I'm trying to do is create a sort of "Preview" image which sits in a different div and will show a selected color swatch at an inflated size (110%). On page load, it would be the first color in the list. When a click occurs on a color in the group of color swatches, the "Preview" image would change to what color was clicked.
I can't make changes to how these list items work (i.e. change it to "data-background") because the functionality behind the scenes would break. Annoyingly, I can't do much about that. These list objects need to have their image defined in "style", for whatever reason (I don't know). I can, however, add an onclick function to the list (if I had something that could apply it to all items in the list, which all have very long and different names).
Thus I need to extrapolate the url from the "style" onclick and have "Preview" img src change to that url.
In response to BearSkyView:
Since it's a seperate image, this isn't exactly what I meant. Also, I'd need something which applied an onclick to everything in the list.
In response to somethinghere:
That is more closely along the lines of what I'd like to accomplish, but as I can't change the way these list objects are made, this sadly won't work for me.
http://api.jquery.com/css/
$('#attributeSwatch_1').css("background-image", new src here);
EDIT: Are you looking for something like this? http://jsfiddle.net/rsqtL805/
Since you are using data-attributes anyway, why don't you put it into one? Say data-background="URL".
<img src="" id="myImageElement" alt="large image" />
<img src="path/to/image.jpg" data-background="path/to/image.jpg" onclick="setImg(this); return false;" alt="thumbnail" />
function setImg(obj){
var img = obj.getAttribute('data-background');
document.getElementById("myImageElement").attribute("src", img);
}
Otherwise you can read the background image property and split it in javascript to retrieve the URL and do with it as you like:
var img = this.style.backgroundImage;
img = img.split("rl(")[1].split(")")[0];
The above will take the following string:
url(path/to/image.jpg);
And split it first into:
[0] => u
[1] => path/to/image.jpg)
And then we split the element at place 1 at the ) and select the remainder at index 0.
[0] => path/to/image.jpg
[1] =>
With that you could do
document.getElementById("myImageElement").attribute("src", img);
to set the src of the image element to the just retrieved source.
I'm using a simple jQuery image slider (Owl Carousel) to show a list of speakers at a convention with photos, and I'm trying to find a way to overlay text associated with each speaker onto a div placed above the slider. I have a mockup page here. As you can see on the mockup, I have two primary divs-- i.e. div#sit and div#carousel-sit; within the former I have an container with the class .sit-quote-container into which I'd like the quote text/markup injected. I would like this overlay text to pull from the paragraph elements with the .sit-quote class that exist for each speaker.
In addition to the problem of displaying the appropriate text within the container div, I'm seeing that placing the .sit-quote paragraph within each slide is causing a gap to appear under the speaker name (the grey box underneath) and I have no idea why this is happening given that I've set .sit-quote to display:none. I'm wondering if perhaps I need to move the elements containing the quotations out of the slider markup altogether (?)
As for the actual hover function, this is what I have so far, with the help of another SO user; but it doesn't seem to be working:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container");
}, function(){
$(".sit-quote-container").html(""); // this clears the content on mouseout
});
Ultimately, I'd like the quotes to fade in/out positioned within the main div. Thanks for any assistance, and please let me know if I need to provide further clarification as to the aim here.
you should first visible that quote
try this:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").show(); // Here you should show the quote
}, function(){
$(".sit-quote-container").html("");
});
if you want to fade in:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").fadeIn(); //Here if you want to fade the quote
}, function(){
$(".sit-quote-container").html("");
});
Use the below script to pull the text from .sit-quote p tag of the hovered item and display it in the .sit-quote-container
UPDATE
If needed wrap the quote in a para tag and to avoid complexity use a different class name, in this case .sit-quote_inner.
CSS : .sit-quote_inner{ display:none; }
JS
$('.sit-carousel-container .owl-item').hover(function(){
var quote = $(this).find('.sit-quote').text(); //Only text not the p tag
quote = '<p class="sit-quote_inner">' + quote + '</p>';
$('.sit-header .sit-quote-container').html(quote);
$('.sit-quote_inner').fadeIn(); //Add this
},function(){
$('.sit-header .sit-quote-container').html('');
});
The carousel seems to be dynamically injecting clones of the slides. In this case, you might want to delegate your event handler so that it works with the dynamically generated slides.
Also, if you want to fadeOut the text, you should remove it in the complete callback of fafeOut instead of simply emptying the html Try
$(document).on("mouseenter",".slide-sit",function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").fadeIn("slow");
});
$(document).on("mouseleave",".slide-sit", function(){
$(".sit-quote-container")
.find(".sit-quote")
.fadeOut("slow",function(){ // Fadeout and then remove the text
$(this).remove();
})
});
The gap (grey background) is the background of .slide-sit, which is visible due to the margin-bottom: 15px; applied on the paragraph containing name (style rule .item p main.css line 67 it seems), removing this will fix the issue.
Update
It'd be better if you keep a .slide-sit inside the .sit-quote-container so that you can fade it in/out properly using the below script.
$(document).on("mouseenter",".sit-carousel-container .slide-sit",function() {
var content = $(this).find(".sit-quote").html();
(".sit-quote-container .sit-quote").html(content).fadeIn("slow");
});
$(document).on("mouseleave",".sit-carousel-container .slide-sit", function(){
$(".sit-quote-container").find(".sit-quote").fadeOut("slow")
});
$("#tail").kendoFlatColorPicker({
preview: false,
value: "#000",
change: select
});
$("#head").kendoFlatColorPicker({
preview: false,
value: "#e15613",
change: select
});
i tried this code using color picker .please help me for manque dress changing
i want my website look like as below link please see it and help me
http://glamstorm.com/en/fittingroom/clothes
Dude unstead of click use hovering would look awesome and different from other siteDoing that is Very simple. Give an id to your images so they can be uniquely identified. In the mouseover function, either pass the id of the current image and map it to another, or directly pass the id of the image you want to swap.
<img src="one.jpg" id="one" onmouseover="swapImage('two')">
<img src="two.jpg" id="two" onmouseover="swapMappedImage(this.id)">
so when one image is hovered another image is changed.
OR for ur clicking
if you want to fire the event on your image set this attribute, to each one :
<image src=".." onclick="changeMainImage('put here the path of you main image');" >
then you can put this function on a script tag:
<script type="text/javascript">
function changeMainImage(url)
{
/*now here you have to get the element of you main top image, supposing that you are usins as an id "myMainImage" ok!
*/
var mainImage = document.getElementById('myMainImage');
// here we are setting to the maing image the path you receive as a param
mainImage.src = url;
}
</script>
I am using this jquery.smoothZoom.min.js to zoom and pan image.I have successfully applied that to my project for single image,now i want to add (<,>.i.e. corousal) ,so that I can use it for multiple images.When I add the corresponding part in my custom.js it does not work properly.
I will attach two screen sorts which will clear the picture
This is the first case
and after clicking the right corousal button
I can see only the background but not the required image . I can not understand what i am missing ,
This the html part i have been using
<div class="image-display" id="displayplan4" style="width:70%;height:120%; left:39%;top:10%;position:absolute;display:none;">
<img src="images/amenities.jpg" style="width:150%;height:130%; left:-60%;top:-20%;position:absolute;overflow:auto; z-index:1;">
<div style="width:150%;height:130%; left:-60%;top:-20%;position:absolute;background:rgba(255,255,255,0.7);z-index:2;">
</div>
<img class="planzoom" src="gallery/Residential/ongoing/Almog/Plan/almog1.jpg" id = "almogplan0" style="width:100%;height:100%; right:3%;top:50%;position:absolute;z-index:3;">
<!--button for forward and backward movement-->
</div>
and
<div id = "almogplandivII">
<img class="planzoom" src="gallery/Residential/ongoing/Almog/Plan/almog2.jpg" id= "almogplan1" style="width:100%;height:100%; right:3%;top:50%;position:absolute;z-index:3;display:none;">
</div>
and the corresponding js part to show and hide image on mouse click upon the image.
var almog_plan_div=0;
//Function for image forward with forward button
$("#almogforward").click(function ()
{
if(almog_plan_div<1)
{
$("#almogplan"+almog_plan_div).hide();
almog_plan_div++;
$("#almogplan"+almog_plan_div).show();
}
else
{
$("#almogplan"+almog_plan_div).hide();
almog_plan_div=0;
$("#almogplan"+almog_plan_div).show();
}
});
//Function for image backward with backward button
$("#almogback").click(function ()
{
if(almog_plan_div>0)
{
$("#almogplan"+almog_plan_div).hide();
almog_plan_div--;
$("#almogplan"+almog_plan_div).show();
}
else
{
$("#almogplan"+almog_plan_div).hide();
almog_plan_div=1;
$("#almogplan"+almog_plan_div).show();
}
});
I have tried like adding display:none style properties but it does not help my cause,
any help on this ?
Remove inline styling display: none from the img tag and then when u initialize your page, then hide that image using hide() function.
Inline-styling might be overriding this
Thanks to both of your answers ,both of u may not be exactly correct but definitely helped me getting me my solution.
The trick i was missing:
I) have used two different divs ,but i have not positioned the second one, (I noticed only that when I tried the whole thing in a new web page with only 2 images in it ,they were not positioned properly )my requirement needs the divs to be hidden ,i had to hide them.
2) The other thing i had to remove was the position:absolute thing from individual image elements.
Once rectified its cool now.