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');
});
Related
This question already has answers here:
change img src on click
(5 answers)
Closed 4 years ago.
I have some HTML code:
<div class="text-center img-big">
<!-- IMAGE BIG -->
<img class="img-fluid img-big" src="" alt="">
</div>
<!-- IMAGE SMALL -->
<a id="getImg" href="" ><img src="img/asus.jpg" alt="" class="img-thumbnail thumb-product img-fluid thumb-first" width="100"></a>
<a id="getImg" href="" ><img src="img/asus-thumb.jpg" alt="" class="img-thumbnail thumb-product img-fluid" width="100"></a>
<img src="img/asus.jpg" alt="" class="img-thumbnail thumb-product img-fluid" width="100">
and this is my some jquery code :
<script type="text/javascript">
var imgSrc = $(".thumb-first").attr("src");
$(".img-big").attr("src",imgSrc);
$("#getImg img").on("click",function(){
tes = $(this).attr("src");
$(".img-big").attr("src",imgSrc);
});
</script>
I want to change src image big when image small clicked, but my code doesn't work properly.
What I did is to change id="getImg" to class="getImg" because id attribute should always be unique.
Instead of getting the click event of the image, I used the click event of <a>, then located the <img> using find().
I also added an id to the big image, because there are two instance of .img-big, which is an <img> and <div>, and <div> does not have a src attribute.
Lastly, I used e.preventDefault() to prevent the redirection when clicking a <a> tag
$(".getImg").click(function(e) {
var imgSrc = $(this).find("img").attr("src");
$("#bigImage").attr("src", imgSrc);
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center img-big">
<!-- IMAGE BIG -->
<img id="bigImage" class="img-fluid img-big" src="" alt="">
</div>
<!-- IMAGE SMALL -->
<a class="getImg" href=""><img src="http://via.placeholder.com/100x100" alt="" class="img-thumbnail thumb-product img-fluid thumb-first" width="100"></a>
<a class="getImg" href=""><img src="http://via.placeholder.com/200x200" alt="" class="img-thumbnail thumb-product img-fluid" width="100"></a>
First, you have multiple elements with the same id attribute.
Second, tes variable here is not defined.
tes = $(this).attr("src");
Third, try placing your javascript at the bottom of the html page or place your javascript code inside the ready function:
$(document).ready(function(){
});
You don't need to give getImg, it can be done through onclick function. Try my code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center img-big">
<!-- IMAGE BIG -->
<img class="img-fluid img-big" src="" alt="">
</div>
<!-- IMAGE SMALL -->
<script>
function change_img(param){
var src = $(param).prop('src');
$('.img-big').prop('src',src);
}
</script>
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 to clone an existing link with class="link" and wrap it around each img in the div "wrap"? Suppose we don't know the link so we can't just use this method:
$('#wrap img').wrap('');
HTML:
<a href="http://foo.com" class="link">
<img/>
</a>
<div id="wrap">
<img class="img" />
<img class="img" />
<img class="img" />
</div>
Result:
<a href="http://foo.com" class="link">
<img/>
</a>
<div id="wrap">
<img class="img" />
<img class="img" />
<img class="img" />
</div>
You could use the outerHTML property:
var link = $('.link').clone().empty().prop('outerHTML');
$('#wrap img').wrap(link);
Do this:
var anchor = $(".link");
anchor.html('');
$("#wrap img").wrap(anchor);
You can simply try this single line:
$('#wrap img').wrap('<a href="' + $('a.link').prop('href') + '">');
To clone the element without children:
$('#wrap img').wrap($('a.link').clone().empty());
Image dimensions in then created this is called into the picture if the picture is not loaded error image is shown.
<div id="hekimResimMini"><img src="" id="imgHekimResim" alt="" width="40" height="55" ></div>
$('#imgHekimResim').load(function(){})
.attr("src", "./personelResimi.jpeg?kurSicNo="+lcd.list[x].DOKTORID)
.error(function() {
var thisImg = this;
if ( $.browser.msie ) {
setTimeout(function() {
if ( ! thisImg.complete ) {
$(thisImg).attr('src', '../../images/error.png');
$(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px');
}
},250);
} else {
$(this).attr('src', '../../images/error.png');
$(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px');
}
});
I am currently working the front-end on a website.
I am using jquery in order to create a dynamic content.
My problem is that when I type my URI (localhost/jquery/myfile/) and the index.php loads, my jquery script works, but when I click on my navigation bar and my #index.php is placed in the URI (localhost/jquery/myfile/#index.php) one of my js scripts, the one with the hover effect, doesn't work (but all my other js files work, such as my nav menu script which includes a hover effect as well).
I have made my research and found out that when the new URI is loaded, hover effect stops working.
index.php
<section id="main-content">
<div id="guts">
<div id="items">
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span style="display: none;" class="caption">8 Extremely </span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">8 Amazing Javascript Experiments of Physic and Gravity Simulation</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">8 Incredible Wordpress Plugins</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">9 Web CSS Tools You Must Know</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span style="display: none;" class="caption">10 Image Galleries jQuery Script with Thumbnail Filmstrip</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span style="display: none;" class="caption">Single Page Websites With Creative Javascript Effects</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">13 Simple but Useful Online Tools for Web Development</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">8 Ways to Increase the Readibility and Beautify your HTML Code</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">12 Insanely Awesome Javascript Effects</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span style="display: none;" class="caption">10 New jQuery Plugins You Have to Know</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">20 Firefox Plug-ins for Web Designers and Developers</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">12 Amazing and Creative Javascript Games</span></a>
</div>
</div>
</section>
ext.js
$(document).ready(function () {
//loop through all the children in #items
//save title value to a span and then remove the value of the title to avoid tooltips
$('#items .item').each(function () {
title = $(this).attr('title');
$(this).append('<span class="caption">' + title + '</span>');
$(this).attr('title','');
});
$('#items .item').hover(
function () {
//set the opacity of all siblings
$(this).siblings().css({'opacity': '0.2'});
//set the opacity of current item to full, and add the effect class
$(this).css({'opacity': '1.0'}).addClass('effect');
//show the caption
$(this).children('.caption').show();
},
function () {
//hide the caption
$(this).children('.caption').hide();
}
);
$('#items').mouseleave(function () {
//reset all the opacity to full and remove effect class
$(this).children().fadeTo('100', '1.0').removeClass('effect');
});
});
dynamicpage.js
$(document).ready(function () {
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href='"+newHash+"']").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
});
I would really appreciate if you could help me find why this is happening.
Thanks in advance,
harris21
*edit:*My dynamic menu is working fine, the problem is that the the ext.js script is not working.
Try using on() if you are using a recent version of jQuery (1.7+), or delegate() if its an older version, instead of just hover()
Like this:
$("#main-content").on("mouseenter", "#items .item", function(event){
// your function
}).on("mouseleave", "#items .item", function(event){
// your function
});
See: http://api.jquery.com/on/
When working with dynamic content be sure to use jquery.on (the newer version of live).
$.on('click', function(){
});
instead of
$.click(function(){});
I found some solution for this problem.
$(document).on("mousemove",".objectclass",function(){
console.log("mousemove");
});
its works fine!
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...