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

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/

Related

Onerror event add a new class and count how many times it replaces image source

I'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?
You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');
You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>

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(','))
});

JQuery-zoom dynamically change image

I'm using jquery-zoom and I have 4 images for a product on my website, when clicking one of the 4 images, I want the main image to change to the clicked image and still zoomable with jquery-zoom, now everytime when click different images, the main image gets updated to the clicked one but it's no longer zoomable, it's only zoomable when the page reloaded... How should I make my desired effect happen? Currently my code looks like this:
HTML:
<div class="product-main-image">
<img id="product-zoomable-image"src="/images/image1.jpg" alt="无图片" class="img-responsive" data-BigImgsrc="/images/image1.jpg">
</div>
<div class="product-other-images">
<img alt="无图片" src="/images/image1.jpg">
<img alt="无图片" src="/images/image2.jpg">
<img alt="无图片" src="/images/image3.jpg">
<img alt="无图片" src="/images/image4.jpg">
</div>
Javascript:
$('.product-carousel-image').click(function(event) { // change image shown as product image
var newImageUrl = $(this).attr('href');
console.log(newImageUrl) ;
$('#product-zoomable-image').attr('src', newImageUrl);
$('#product-zoomable-image').trigger('zoom.destroy');
$('#product-zoomable-image').zoom({url: newImageUrl});
});
Just figured out by myself, need to destroy the zoomImg first and then create another:
$('.product-carousel-image').click(function(event) { // change image shown as product image
var newImageUrl = $(this).attr('href');
$('#product-zoomable-image').attr('src', newImageUrl);
$('.product-main-image').trigger('zoom.destroy');
$('.product-main-image').zoom({url: newImageUrl});
});

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 */
}

click handler in capty plugin

I am trying this JS code in jquery capty plugin . However the plugin needs an image to works, like:
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
Well, when i add this image the JS below didn't works. Basically what i want is just click in span and show an alert message with the content.
$('.tag_content').live('click', function(event){
var span_val = $(this).parent().children("span").html();
alert(span_val);
});
html code
<div class="images">
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
<div id="content-target1">
<span class="tag_content">Design</span>
</div>
</div>
Any idea ? thanks
The following code seems to work for me. You can try it out on jsFiddle: http://jsfiddle.net/fZSGt/4/
$('#default1').capty();
$('.tag_content').click(function() {
//var span_val = $(this).parent().children("span").html();
var span_val = $(this).html();
alert(span_val);
});
I also changed $(this).parent().children("span").html() to $(this).html() because it seems to be unnecessary for your code.

Categories

Resources