Develop Reference

Change product image based on variant color

Online example of my goal:
I'm trying to display bike products on a category page. On each product there's a frame variant color, I'm displaying that using round divs.
When I click a color, the image should change as you can see on Specialized website: (underneath the product image) Specialized Example.
My own website
You can see my own example here: My own website example (scroll down till you see the product with multiple products).
My target functionality:
When I click the GREEN div I'd like to show picture 2 and when I click the RED div I'd like to see image 3, but as Default it will always be the firs
The first color = the first image
The second color = the second image
And so forth
My HTML:
<div class="frameColors">
<div class="frameColor" data-color="#95BD40" style="background-color:#95BD40"></div>
<div class="frameColor" data-color="#000000" style="background-color:#000000"></div>
<div class="frameColor" data-color="#C6352D" style="background-color:#C6352D"></div>
</div>
<a href="/produkter/cykler/mountain-bikes/specialized/epic-hardtails/epic-hardtail/">
<div class="categoryImage" data-frame-color="95BD40">
<img src="/media/1072/165519.jpg?anchor=center&mode=crop&width=500&height=350&rnd=131200748910000000" class="productImage">
</div>
<div class="categoryImage" data-frame-color="000000">
<img src="/media/1071/165518.jpg?anchor=center&mode=crop&width=500&height=350&rnd=131200746750000000" class="productImage">
</div>
<div class="categoryImage" data-frame-color="C6352D">
<img src="/media/1073/166762.jpg?anchor=center&mode=crop&width=500&height=350&rnd=131200749050000000" class="productImage">
</div>
</a>
My Foreach(s):
var imageIds = item.GetPropertyValue<string>("productImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
var images = Umbraco.Media(imageIds);
<div class="frameColors">
#foreach (var bikeColor in images)
{
var color = bikeColor.GetPropertyValue("frameColor");
<div class="frameColor" data-color="##color" style="background-color:##color"></div>
}
</div>
<a href="#item.Url">
#foreach (var img in images)
{
<div class="categoryImage" data-frame-color="#img.GetPropertyValue("frameColor")">
<img src="#img.GetCropUrl("product image")" class="productImage" />
</div>
}
</a>

Based on Adeneo reply I managed to modify the code a little so it worked out as I wanted.
First, I added a css line: .categoryImage { display:none; } to hide ALL the product images.
I then added the script based on Adeneo's reply. I start off with targeting EACH of the .frameColor divs and inside that, I added this the following line to show the first image: categoryImage.first().show();
If the CSS line is not included, all of the product images will be displayed by default, so it was necessary to HIDE all the images and inside the script, show the first image.
$(function () {
$(".frameColor").each(function () {
var categoryImage = $(this).parent("div").next("a").find(".categoryImage");
categoryImage.first().show();
if ($(categoryImage).length > 1) {
$(this).on('click', function () {
var color = $(this).data('color').replace('#', '');
$(categoryImage).hide().filter(function () {
return $(this).data('frame-color') === color;
}).show();
});
}
else {
$(this).hide();
}
});
});
Credits goes to Adeneo for providing the original script.

How to call an image from a different src location to that of the clicked thumbnail image onto a separate div?

I am making a gallery webpage that has small thumbnails and one bigger container div to display a selected image. The thumbnail images are 300x300 stored in a thumbnail folder, however I would like to be able to click the thumbnail and have it call the full resolution image from an "images" folder that have the same name as its thumbnail counterpart. So thumbanil 1 would be src="thumb/image1.jpg" and when this is clicked, instead of calling "thumb/image1.jpg" onto the main container i would like it to call "images/image1.jpg".
Code:
HTML
<div class="containermain">
<img id="img-main" alt="main image" src="images/placeholder.png" />
<div class="clear"></div></div>
<div class="containerimg">
<img class="img" alt="thumbnail-image1" src="thumb/image1.jpg" />
<img class="img" alt="thumbnail-image2" src="thumb/image2.jpg" />
<img class="img" alt="thumbnail-image3" src="thumb/image3.jpg" />
<img class="img" alt="thumbnail-image4" src="thumb/image4.jpg" />
<img class="img" alt="thumbnail-image5" src="thumb/image5.jpg" />
</div>
Javascript
$(document).ready( function() {
$("img.img" ).on( "click", function( event ) {
$("#img-main").attr("src", $(this).attr("src"));
});
});
So far this works, but the large imaged displayed on the main container is the thumbnail sized image and if i were to change the src to that from images folder with the full res image, the website will run too slow (the full images around 5mb-10mb each and I plan to have 18 images). Any help will be greatly appreciated thanks!

Do a string replace.
$(document).ready( function() {
$("img.img" ).on( "click", function( event ) {
var currentSrc= $(this).attr("src");
currentSrc=currentSrc.replace("thumb/", "images/");
$("#img-main").attr("src", currentSrc);
});
});
Here is a jsfiddle sample
But as TNC mentioned in the comment, the best solution is to keep an HTML 5 data attribute in your image tag for the full resolution image src
<img class="img" alt="thumbnail-image1" data-fullsize="images/image1.jpg"
src="thumb/image1.jpg" />
And read that and use it
$(document).ready( function() {
$("img.img" ).on( "click", function( event ) {
var newSrc= $(this).data("fullsize");
$("#img-main").attr("src", newSrc);
});
});
Here is a sample of that

Using jQuery to change image source dynamically

I have a page that is a series of N img elements. I need each image to, when clicked, change to the next image in their own series of three. I have listed my html below to explain.
<body>
<div class="images">
<div class="image_group">
<img id="first" src="group1_image1"></img>
<img id="second" src="group1_image2"></img> //this isn't displayed until clicked
<img id="third" src="group1_image3"></img> //when this is displayed, it cycles back to group1image1
</div>
...
<div class="image_group">
<img id="first" src="groupN_image1"></img>
<img id="second" src="groupN_image2"></img>
<img id="third" src="groupN_image3"></img>
</div>
</div>
</body>
Each image_group div displays only one image until clicked, when it displays the second, then the third when clicked, then cycles back to the first when clicked a third time.
My problem is writing a JQuery method that can do this cycling by making "second" images replace "first" images when clicked and so on. The below method rewrites the image source which seems silly but I can't think of a better way to do it. I'm also not sure if the "first" class image will be isolated in the "image_group" div (as it should) or if it will change all images on the page to their "second" class image.
$("#first").attr("src","group1_image2.jpg");
Can anyone think of a way to do this?

I would do something like this
$("image_group img").on("click", function() {
var index = $(this).index();
$(this).attr("src", index === $("img").length - 1 ? $(this).next().src : $("img")[0].src);
});

refine your html:
<body>
<div class="images">
<div class="image_group">
<img id="1,1" data_num="1,1" src="group1_image1"></img>
</div>
...
<div class="image_group">
<img id="n,1" data_num="n,1" src="groupN_image1"></img>
</div>
</div>
</body>
and then you might do something like:
$("image_group img").on("click", function() {
var max = 3;
var indexes = $(this).data('num').split(',');
if ( indexes[1] == max
indexes[1] = 1;
else
indexes[1]++;
$(this).attr("src", "group" + indexes[0] + "_image" + indexes[1]);
$(this).data('num', indexes.join(','))
});

How to change Class From jquery but remove that class from another object

i have problem. i don't no how to fix that problem
HTML Code:
<div class="image">
<a href="#">
<img src="images/image1.jpg" id="mainimg-1">
</a>
</div>
<div class="otherthumbnailcontainer">
<div class="thumbnailimages" id="thumbnailcont-1">
<img src="images/image1.jpg" id="thumbnail-1" onMouseOver="changeimage('images/image1.jpg','mainimg-1','thumbnail-1','thumbnailcont-1');" class="thumbsmallimg selectedthumb">
<img src="images/image2.jpg" id="thumbnail-2" onMouseOver="changeimage('images/image2.jpg','mainimg-1','thumbnail-2','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image3.jpg" id="thumbnail-3" onMouseOver="changeimage('images/image3.jpg','mainimg-1','thumbnail-3','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image4.jpg" id="thumbnail-4" onMouseOver="changeimage('images/image4.jpg','mainimg-1','thumbnail-4','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image5.jpg" id="thumbnail-5" onMouseOver="changeimage('images/image5.jpg','mainimg-1','thumbnail-5','thumbnailcont-1');" class="thumbsmallimg">
</div>
</div>
Here is code:
function changeimage(thumburl,mainimgid,thumbnailimg,thumbmaindiv)
{
$('#'+mainimgid).attr("src", thumburl);
// $('#'+thumbnailimg).add("thumbsmallimg selectedthumb");
$('#'+thumbnailimg).removeClass("selectedthumb").addClass('thumbsmallimg');
// $('#'+thumbnailimg).toggleClass("selectedthumb");
}
Now what i would like to do on the website page is completely load the first image with these two class "thumbsmallimg selectedthumb" but when mouse goes over on another image the class "selectedthumb" will switch from one image to another.
EDIT:
http://jsfiddle.net/nZMpW/ Check this link. its like a product image gallery when you hover mouse on down image its come in big image. but first down image is selected if you move on another image its come in big image but is not select. css this ":hover" option only work when you mouse on that image but i don't want to do this

remove all you onmouseover events and use this jquery code in the $(document).ready() section
$(".thumbsmallimg").mouseover(function() {
$("#mainimg-1").attr("src", this.src);
$(".selectedthumb").removeClass("selectedthumb");
$(this).addClass("selectedthumb");
});
and, if you want it to work with several sets of thumbnails/bigImages, you can use data() attributes:
<img src="http://www.yoono.com/static/yoono_com_v8/img/iphone_yoono.png" id="thumbnail-1" class="thumbsmallimg selectedthumb" data-big-image="mainimg-1">
<img src="http://www1.pcmag.com/media/images/302835-apple-iphone-5-sprint.jpg" id="thumbnail-2" class="thumbsmallimg" data-big-image="mainimg-1">
.....
and in jqQuery:
$(".thumbsmallimg").mouseover(function() {
$("#" + $(this).data("big-image")).attr("src", this.src);
$(".selectedthumb").removeClass("selectedthumb");
$(this).addClass("selectedthumb");
});
here is your Fiddle updated again

instead having selectedthumb, in your css put those styles inside .thumbsmallimg:hover{
.thumbsmallimg:hover{
/* the styles that wrere in class .selectedthumb */
}

How to show/hide big image by clicking on thumbnails?

How to show/hide big image by clicking on thumbnails?
I need like this
Try with JSFiddle here http://jsfiddle.net/jitendravyas/Qhdaz/
Is it possible with CSS only. if not then jQuery solution is OK.
An is it good to use <a href=#"> even it's not opening any new page in same or new tab.
Edit:
I forgot to add. it should work on iPad too

See this example:
No preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript (jQuery)
$(function(){
$(".small-images a").click(function(e){
var href = $(this).attr("href");
$("#big-image img").attr("src", href);
e.preventDefault();
return false;
});
});
Currently only 1 big image, when clicking on an A, the href of the A is copied as SRC of the big image.
Live example: http://jsfiddle.net/Qhdaz/1/
If you wan't to do it without the extra DOM progressing, you can add 3 big images, and load them directly. The above solution does not preload the images, the below function will.
With preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
<img src="http://lorempixel.com/400/200/fashion/1/">
<img src="http://lorempixel.com/400/200/city/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript:
$(function(){
$("#big-image img:eq(0)").nextAll().hide();
$(".small-images img").click(function(e){
var index = $(this).index();
$("#big-image img").eq(index).show().siblings().hide();
});
});
http://jsfiddle.net/Qhdaz/2/