We Keep Coding

Toggle images when clicking on a set of anchor elements

I need to hide and show some images depending on where the user clicks.
The .img-active class indicates the image displayed by default, and the .img-inactive class indicates the image hidden. When you click on the anchor those images must swap(show one and hide the another).
Obviously, if you click on another anchor, the last one you clicked must be set again to its default state.
But I am having an issue right now with that, the functionality only works in the first click on every anchor. When try the second time, you will see it is broken.
In the video you will see that every circle has a border after you click the second time, I did that just to differentiate the if conditions.
I have recorded this video!
This is the html that you may see in the video:
<a class="fig-8" data-tab="tab1">
<img src="path/researchicon-x.png" alt="" class="pulse img-active">
<img src="path/selected-x.png" alt="" class="img-inactive">
</a>
<a class="fig-8" data-tab="tab2">
<img src="path/WideRange.png" alt="" class="pulse img-active">
<img src="path/selected-x.png" alt="" class="img-inactive">
</a>
<a class="fig-8" data-tab="tab3">
<img src="path/SSI_toolbox.png" alt="" class="pulse img-active">
<img src="path/selected-x.png" alt="" class="img-inactive">
</a>
<a class="fig-8" data-tab="tab4">
<img src="path/PricingIcon.png" alt="" class="pulse img-active">
<img src="path/selected-x.png" alt="" class="img-inactive">
</a>
Here is the JS function:
var iconTabs = function () {
$('.tabs1 a').on('click', function() {
var $tabContainer = $(this).parents('.tab-container');
var tabId = $(this).data('tab');
$tabContainer.find('.icons-tabs a').addClass('inactive');
$(this).removeClass('inactive');
// that functionality begins here!!!
$('.tabs1 a').not(this).find('.img-inactive').hide();
$('.tabs1 a').not(this).find('.img-active').show();
var active;
if ($(this).hasClass('selected-shown')) {
active = '.img-inactive';
$(this).find('.img-active').css('border', '5px solid green');
} else {
active = '.img-active';
$(this).find('.img-active').show();
$(this).find('.img-active').css('border', '4px solid red');
}
var show;
if ($(this).hasClass('selected-shown')) {
show = '.img-active';
$(this).find(show).css('border', '3px solid blue');
} else {
show = '.img-inactive';
$(this).removeClass('selected-shown');
$(this).find('.img-active').css('border', '6px solid orange');
}
$(this).addClass('selected-shown').find(show).show();
$(this).find(active).hide();
});
};
That .selected-shown is just a flag I am adding to the parent element to check the anchor I a have clicked.
Any suggestions?

Try this and please read comments in the code
See the code in action
$('.tabs1 a').on('click', function() {
var ThisIt = $(this), // this
All_a_but_this = $('.tabs1 a').not($(this)), // all <a> tags but this
Active = $(this).find('img.img-active').is(':visible'), // return true if the img with img-active class is visible
Inactive = $(this).find('img.img-inactive').is(':visible'); // return true if the img with img-inactive class is visible
// return all <a> but this to default
All_a_but_this.each(function(){ // loop through other <a>
$(this).removeClass('selected-shown'); // remove selected-shown
$(this).find('img.img-active').show(); // show active image
$(this).find('img.img-inactive').hide(); // hide inactive image
});
// swap
if(Active === true){ // if active image is visible
$(this).find('img.img-active').hide(); // hide active image
$(this).find('img.img-inactive').show(); // show inactive image
}
if(Inactive === true){ // if inactive image is visible
$(this).find('img.img-active').show(); // show active image
$(this).find('img.img-inactive').hide(); // hide active image
}
$(this).toggleClass('selected-shown'); // toggle selected-shown class
}).filter('.selected-shown').click();
.img-active{
display: block;
}
.img-inactive{
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs1">
<a class="fig-8" data-tab="tab1">
<img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active">
<img src="http://via.placeholder.com/200x150" alt="" class="img-inactive">
</a>
<a class="fig-8" data-tab="tab2">
<img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active">
<img src="http://via.placeholder.com/200x150" alt="" class="img-inactive">
</a>
<a class="fig-8" data-tab="tab3">
<img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active">
<img src="http://via.placeholder.com/200x150" alt="" class="img-inactive">
</a>
<a class="fig-8 selected-shown" data-tab="tab4">
<img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active">
<img src="http://via.placeholder.com/200x150" alt="" class="img-inactive">
</a>
</div>

Try this one.
<div id="gallery">
<div class="main">
<div class="big show"><!-- image / video here --></div>
<div class="big"><!-- image / video here --></div>
<div class="big"><!-- image / video here --></div>
</div>
<div class="thumbnails">
<img src="images/thumb1.jpg" alt="#"/>
<img src="images/thumb1.jpg" alt="#"/>
<img src="images/thumb1.jpg" alt="#"/>
</div>
$('.thumbnails a').on('click',function(){
var eq = $(this).index();
$('.main .big').removeClass('show');
$('.main .big').eq(eq).addClass('show');
});

Image sliding hover effect

I am using this fiddle but i want more than one images sliding with hover effect,this link only shows one image slide i want more than one image to slide on it.
HTML:
<div id="container">
<div class="fimg"><img height="130px" width="100%" src="a.jpg" alt="" />
</div> <div class="simg">
<img height="130px" width="100%" src="A.jpg" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p>
</div>
Javascript:
$(function(){
$("#container").hover(function(){
$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
}, function() {
$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
});
});

How can I create an image "change" effect in JQuery? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have the following structure:
<div class="container">
<img src="images/1.png" class="image_wall_thumbnail" />
<img src="images/2.png" class="image_wall_thumbnail" />
<img src="images/3.png" class="image_wall_thumbnail" />
<img src="images/4.png" class="image_wall_thumbnail" />
<img src="images/5.png" class="image_wall_thumbnail" />
<img src="images/6.png" class="image_wall_thumbnail" />
</div>
What I want to do is use the existing images I am using in the image tags and every 2-5 seconds I want to slowly fade one image and in it's place show another image (one of the existing images in the other image tags) and I want this effect to take place randomly.
I've never done this before so not sure how to go about this? I am thinking fade in and fade out makes sense but not sure how to tackle this. Any ideas?

Okay, so like any programming task you want to break something like this down into simple steps. In this case, maybe something like this:
When the page loads, only show the first image. To do this, you should have a display:none CSS rule on all of the images EXCEPT for the first one. This can easily be accomplished by created a class called hide and applying it to the HTML. We could also manage this via JS, but that may cause bugs depending on the internet connection that your users have...
Every five seconds, fade the current image out, and fade the next one in.
If we are on the last image, make sure we go back to the first image in the list.
That's pretty much all we need to do, so let's write some code:
First, let's refactor your markup to use an id for the container and then add the CSS class to all images but the first.
<div id="img_container">
<img src="images/1.png" class="image_wall_thumbnail" />
<img src="images/2.png" class="hide image_wall_thumbnail" />
<img src="images/3.png" class="hide image_wall_thumbnail" />
<img src="images/4.png" class="hide image_wall_thumbnail" />
<img src="images/5.png" class="hide image_wall_thumbnail" />
<img src="images/6.png" class="hide image_wall_thumbnail" />
</div>
Next, let's write a little CSS:
.hide {
display:none;
}
Okay now is the "tricky" part where we write some JS:
$(function() {
//cache dom elements and set init vars
var $img = $('#img_container').find('img'),
max = $img.length, //how many images you have in the container
current = 0; //we will start the script at the first item
//Every five seconds, run the code within the handler
setInterval(function(){
$($img[current]).fadeOut('fast', function(){
determineIndex(); //Update the index of the image in the img array
$($img[current]).fadeIn();
});
}, 5000);
function determineIndex () {
current = (current === max - 1) ? 0 : (current + 1);
}
});
Now here's the demo! http://jsfiddle.net/T2nzh/
Comment if you have any questions about how the javascript works. :)
EDIT: Okay, so if you want to just randomly swap out image sources, check this out. The html you want:
<div id="img_container">
<img src="images/1.png" style="background:red" class="image_wall_thumbnail" />
<img src="images/2.png" style="background:silver" class="image_wall_thumbnail" />
<img src="images/3.png" style="background:purple" class="image_wall_thumbnail" />
<img src="images/4.png" style="background:yellow" class="image_wall_thumbnail" />
<img src="images/5.png" style="background:green" class="image_wall_thumbnail" />
<img src="images/6.png" style="background:blue" class="image_wall_thumbnail" />
</div>
<div id="img_spares" style="display:none;">
<img src="images/7.png" style="background:magenta" class="image_wall_thumbnail" />
<img src="images/8.png" style="background:brown" class="image_wall_thumbnail" />
</div>
And the JS:
$(function() {
//cache dom elements and set init vars
var $img = $('#img_container'),
$spares = $('#img_spares'),
max = $img.find('img').length,
spares_max = $spares.find('img').length;
//Every five seconds, run the code within the handler
setInterval(function(){
$($img.find('img')[randomIndex(0,max)]).fadeOut('fast', function(){
var $el = $(this),
el_source = $el.attr('style'),
$swap = $($spares.find('img')[randomIndex(0,spares_max)]),
swap_source = $swap.attr('style');
$el.attr('style', swap_source).fadeIn();
$swap.attr('style', el_source);
});
}, 1000);
function randomIndex (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
});
And the demo: http://jsfiddle.net/T2nzh/3/

take a look:
<div class="container">
<img src="images/1.png" class="image_wall_thumbnail" />
<img src="images/2.png" class="image_wall_thumbnail" />
<img src="images/3.png" class="image_wall_thumbnail" />
<img src="images/4.png" class="image_wall_thumbnail" />
<img src="images/5.png" class="image_wall_thumbnail" />
<img src="images/6.png" class="image_wall_thumbnail" />
</div>
then the jQuery:
var slide = 1;
function slideshow() {
$("#container").find("img").animate({opacity:0});
setTimeout('$("#container").find("img").hide();',400);
setTimeout('$("#container").find("[src='images/"+slide+".png']").show();',400);
setTimeout('$("#container").find("[src='images/"+slide+".png']").animate({opacity:1});',400);
slide++;
}
var slideshow = setInterval("slideshow();",3000);
also, set the opacity to 0 and display to none for all the images. This code has not beenj tested so you might have to make some minor adjustments.

Prevent jquery slider's image show in the page on click

i am using this jquery and html for change the clicked image on a display div it works fine but the issue is when i click a image in the display div its open in the page itself. How to Make the image as it as when user click on it.
<script type="text/javascript">
jQuery('div#thumbs img').click(function () {
jQuery('#foo a').prop('href', jQuery(this).prop('src'));
jQuery('#foo img').prop('src', jQuery(this).prop('src'));
return false;
})
</script>
my html
<div id="foo">
<a href="#">
<img src="images/demo_slider.jpg" name="Display" id="display" /></a>
</div>
<br />
<div id="thumbs">
<img src="images/a.jpg" width="56" height="56" alt="" />
<img src="images/b.jpg" width="56" height="56" alt="" />
<img src="images/c.jpg" width="56" height="56" alt="" />
<img src="images/d.jpg" width="56" height="56" alt="" />
</div>
</div>
edit:
If the user click the thumbs image it load to the div foo. then the user click the image in foo the clicked image opens in the same page(as the basic html functionality like open image in new tab) i need to prevent the image open on click.

You should do
$('#foo a').click(function(e){
e.preventDefault();
});

Not tested, but you could try adding preventDefault:
jQuery("#foo a").click(function(e) {
e.preventDefault();
});
Did you mean something like that...

Show loading indicator with jQuery

I have a <div> with an image slider in an <li>. There are 12 images, and it takes some time to load all of them. While the images load, I want to show a loading GIF image. How can I do this with jQuery? My code is:
<div id="banner_slider">
<ul id="portfolio">
<li>
<img src="gallery/2010/2010slider//01_quddus_helal.jpg" alt="Slider Image" border="0" /><br />
<p class="caption"> Quddus Helal :: 01st - 2010</p>
</li>
<li>
<img src="gallery/2010/2010slider//02_md_moniruzzaman.jpg" alt="Slider Image" border="0" /><br />
<p class="caption"> Md Moniruzzaman :: 02nd - 2010</p>
</li>
</ul>
</div>

You can bind a listener to the load event of each image. Use a counter or some other mechanism to keep track of how many images are loaded each time the listener is invoked. Then hide the loading indicator after the last image is loaded. For example:
HTML
<span id="loading" style="display:none">Loading...</span>
<div class="images">
<img class="large-image" src="http://astritademi.files.wordpress.com/2011/04/happy_panda.jpg" width="893" height="548" />
<img class="large-image" src="http://www.pandafix.com/pandafix/images/r3387761054.jpg" width="275" height="199" />
<img class="large-image" src="http://farm1.static.flickr.com/149/357563212_f8b89ac6d8.jpg" width="500" height="375" />
</div>
jQuery
$(function() {
var images = $('.large-image')
, total = images.length
, count = 0;
$('#loading').show();
images.load(function() {
count = count + 1;
if (count >= total) {
$('#loading').hide();
}
});
});
You can see this example in action on jsFiddle: http://jsfiddle.net/hallettj/ZefaM/

You can use the jQuery load() function. It will run the code once the image has loaded. So if you have a gif shown, once the image has loaded, it will hide it.
Javascript
$('img#id').load(function(){
$('#loadingGif').hide();
});
HTML
<div id="loadingGif">
<img src="loading.gif" />
</div>

This is what you need:
http://jqueryfordesigners.com/image-loading/

if u loading all images via AJAX then use below way
HTML
<div id="loadingDiv"><img src="loading.gif"></div>
jQuery
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;